feat: e2e test for parsing config.toml and modifying

e2e/config.test.ts

@@ -1,10 +1,39 @@
-import { loginAsAdmin, mockConfigToml, webuiEndpoint } from './test-util';
+import { loginAsAdmin, modifyConfigToml, webuiEndpoint } from './test-util';
 import { test, expect } from '@playwright/test';
 
-test.describe('config read and test', () => {
-  test('showNonInstalledImages', async ({ page, context }) => {
-    // manipulate config file from mocked one
-    await mockConfigToml(page, './config-test.toml');
+test.describe('config.toml', () => {
+  test('block list', async ({ page, request }) => {
+    // modify config.toml to blocklist some menu items
+    const requestConfig = {
+      menu: {
+        blocklist: 'summary, serving, job',
+      },
+    };
+    await modifyConfigToml(page, request, requestConfig);
+    await loginAsAdmin(page);
+
+    // check if the menu items are hidden
+    await expect(page.getByRole('menuitem', { name: 'Summary' })).toBeHidden();
+    await expect(page.getByRole('menuitem', { name: 'Sessions' })).toBeHidden();
+    await expect(page.getByRole('menuitem', { name: 'Serving' })).toBeHidden();
+
+    // check if the pages are not accessible
+    await page.goto(`${webuiEndpoint}/summary`);
+    await expect(page).toHaveURL(/.*error/);
+    await page.goto(`${webuiEndpoint}/serving`);
+    await expect(page).toHaveURL(/.*error/);
+    await page.goto(`${webuiEndpoint}/job`);
+    await expect(page).toHaveURL(/.*error/);
+  });
+
+  test('showNonInstalledImages', async ({ page, context, request }) => {
+    // modify config.toml to show non-installed images
+    const requestConfig = {
+      environments: {
+        showNonInstalledImages: true,
+      },
+    };
+    await modifyConfigToml(page, request, requestConfig);
 
     await loginAsAdmin(page);
 

e2e/test-util.ts

@@ -1,4 +1,12 @@
-import { Locator, Page, expect } from '@playwright/test';
+import TOML from '@iarna/toml';
+import {
+  APIRequestContext,
+  Locator,
+  Page,
+  Request,
+  expect,
+  request,
+} from '@playwright/test';
 import fs from 'fs/promises';
 import path from 'path';
 
@@ -229,14 +237,32 @@ export async function deleteSession(page: Page, sessionName: string) {
   await expect(page.getByText(sessionName)).toBeHidden();
 }
 
-export async function mockConfigToml(page: Page, rawPath) {
-  const filePath = path.resolve(__dirname, rawPath);
-  const mockData = await fs.readFile(filePath, 'utf-8');
-  await page.route('http://127.0.0.1:9081/config.toml', async (route) => {
+/**
+ * Modify specific columns in the webui config.toml file
+ *
+ * @param page
+ * @param request
+ * @param configColumn
+ * The object to modify the config.toml file
+ *
+ * e.g. { "environments": { "showNonInstalledImages": "true" } }
+ */
+export async function modifyConfigToml(
+  page: Page,
+  request: APIRequestContext,
+  configColumn: Record<string, Record<string, any>>,
+) {
+  const configToml = await (
+    await request.get(`${webuiEndpoint}/config.toml`)
+  ).text();
+  const config = TOML.parse(configToml);
+  Object.assign(config, configColumn);
+
+  await page.route(`${webuiEndpoint}/config.toml`, async (route) => {
     await route.fulfill({
       status: 200,
       contentType: 'text/plain',
-      body: mockData,
+      body: TOML.stringify(config),
     });
   });
 }

package.json

@@ -36,6 +36,7 @@
     "theme-schema:update": "pnpm dlx typescript-json-schema \"./react/node_modules/antd/es/config-provider/context.d.ts\" ThemeConfig -o ./resources/antdThemeConfig.schema.json --esModuleInterop"
   },
   "dependencies": {
+    "@iarna/toml": "^2.2.5",
     "@lit/reactive-element": "^2.0.4",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-checkbox": "^0.27.0",
@@ -188,7 +189,7 @@
     ],
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
-    ], 
+    ],
     "e2e/**/*.{js,ts}": [
       "prettier --write"
     ]