feat: e2e test for parsing config.toml and modifying

lablup · Sep 13, 2024 · 6e9d0e1 · 6e9d0e1
1 parent c1270fc
commit 6e9d0e1
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 170 deletions.
diff --git a/e2e/config-test.toml b/e2e/config-test.toml
diff --git a/e2e/config.test.ts b/e2e/config.test.ts
@@ -1,87 +1,132 @@
-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');
-
-    await loginAsAdmin(page);
-
-    await page.getByRole('group').getByText('Environments').click();
-    await page
-      .getByRole('columnheader', { name: 'Status' })
-      .locator('div')
-      .click();
-    await page
-      .getByRole('columnheader', { name: 'Status' })
-      .locator('div')
-      .click();
-
-    const registryCell = await page
-      .locator('.ant-table-row > td:nth-child(3)')
-      .first();
-    const registry = await registryCell.textContent();
-
-    const architectureCell = await page
-      .locator('.ant-table-row > td:nth-child(4)')
-      .first();
-    const architecture = await architectureCell.textContent();
-
-    const namespaceCell = await page
-      .getByRole('cell', { name: 'community' })
-      .first();
-    const namespace = await namespaceCell.textContent();
-
-    const languageCell = await page.getByRole('cell', { name: 'afni' }).first();
-    const language = await languageCell.textContent();
-
-    const versionCell = await page
-      .getByRole('cell', { name: 'ubuntu18.04' })
-      .first();
-    const version = await versionCell.textContent();
-
-    const uninstalledImageString = `${registry}/${namespace}/${language}:${version}@${architecture}`;
-
-    await page.goto(webuiEndpoint);
-    await page.getByLabel('power_settings_new').click();
-    await page
-      .getByRole('button', { name: '2 Environments & Resource' })
-      .click();
-    await page
-      .locator(
-        '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
-      )
-      .first()
-      .click();
-    await page.getByLabel('Environments / Version').fill('AF');
-    await page
-      .locator('.rc-virtual-list-holder-inner > div:nth-child(2)')
-      .click();
-
-    await page
-      .locator('span')
-      .filter({ hasText: 'ubuntu18.04x86_64' })
-      .locator('div')
-      .first()
-      .click();
-    await page
-      .locator(
-        'div:nth-child(4) > .rc-virtual-list-holder > div > .rc-virtual-list-holder-inner > .ant-select-item > .ant-select-item-option-content > div',
-      )
-      .click();
-    await page
-      .getByRole('button', { name: 'Skip to review double-right' })
-      .click();
-    await page.getByRole('button', { name: 'Copy' }).click();
-
-    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
-
-    const handle = await page.evaluateHandle(() =>
-      navigator.clipboard.readText(),
-    );
-    const clipboardContent = await handle.jsonValue();
-
-    expect(clipboardContent).toEqual(uninstalledImageString);
-  });
+test.describe.parallel('config.toml', () => {
+  test(
+    'block list',
+    { tag: ['@session', '@summary', '@serving'] },
+    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',
+    { tag: ['@session'] },
+    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);
+
+      await page.getByRole('group').getByText('Environments').click();
+      await page
+        .getByRole('columnheader', { name: 'Status' })
+        .locator('div')
+        .click();
+      await page
+        .getByRole('columnheader', { name: 'Status' })
+        .locator('div')
+        .click();
+
+      const registryCell = await page
+        .locator('.ant-table-row > td:nth-child(3)')
+        .first();
+      const registry = await registryCell.textContent();
+
+      const architectureCell = await page
+        .locator('.ant-table-row > td:nth-child(4)')
+        .first();
+      const architecture = await architectureCell.textContent();
+
+      const namespaceCell = await page
+        .getByRole('cell', { name: 'community' })
+        .first();
+      const namespace = await namespaceCell.textContent();
+
+      const languageCell = await page
+        .getByRole('cell', { name: 'afni' })
+        .first();
+      const language = await languageCell.textContent();
+
+      const versionCell = await page
+        .getByRole('cell', { name: 'ubuntu18.04' })
+        .first();
+      const version = await versionCell.textContent();
+
+      const uninstalledImageString = `${registry}/${namespace}/${language}:${version}@${architecture}`;
+
+      await page.goto(webuiEndpoint);
+      await page.getByLabel('power_settings_new').click();
+      await page
+        .getByRole('button', { name: '2 Environments & Resource' })
+        .click();
+      await page
+        .locator(
+          '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
+        )
+        .first()
+        .click();
+      await page.getByLabel('Environments / Version').fill('AF');
+      await page
+        .locator('.rc-virtual-list-holder-inner > div:nth-child(2)')
+        .click();
+
+      await page
+        .locator('span')
+        .filter({ hasText: 'ubuntu18.04x86_64' })
+        .locator('div')
+        .first()
+        .click();
+      await page
+        .locator(
+          'div:nth-child(4) > .rc-virtual-list-holder > div > .rc-virtual-list-holder-inner > .ant-select-item > .ant-select-item-option-content > div',
+        )
+        .click();
+      await page
+        .getByRole('button', { name: 'Skip to review double-right' })
+        .click();
+      await page.getByRole('button', { name: 'Copy' }).click();
+
+      await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+      const handle = await page.evaluateHandle(() =>
+        navigator.clipboard.readText(),
+      );
+      const clipboardContent = await handle.jsonValue();
+
+      expect(clipboardContent).toEqual(uninstalledImageString);
+    },
+  );
 });
diff --git a/e2e/test-util.ts b/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),
     });
   });
 }
diff --git a/package.json b/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"
     ]

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml