e2e: fix broken tests due to NEO mainlayout, Agent select and Image p…

…arsing
lablup · Nov 19, 2024 · fa64aa7 · fa64aa7
1 parent 07b7970
commit fa64aa7
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 52 deletions.
diff --git a/e2e/agent.test.ts b/e2e/agent.test.ts
@@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => {
   await loginAsAdmin(page);
   await page.getByRole('menuitem', { name: 'hdd Resources' }).click();
   await expect(
-    page.getByRole('heading', { name: 'Computation Resources' }),
+    page.getByTestId('webui-breadcrumb').getByText('Resources'),
   ).toBeVisible();
 });
 

diff --git a/e2e/config.test.ts b/e2e/config.test.ts
@@ -44,7 +44,7 @@ test.describe.parallel('config.toml', () => {
 
       // check if the menu items are hidden
       await expect(
-        page.getByRole('menuitem', { name: 'Summary' }),
+        page.getByTestId('webui-breadcrumb').getByText('Summary'),
       ).toBeHidden();
       await expect(
         page.getByRole('menuitem', { name: 'Sessions' }),
@@ -67,7 +67,7 @@ test.describe.parallel('config.toml', () => {
 
       // check if the menu items are visible
       await expect(
-        page.getByRole('menuitem', { name: 'Summary' }),
+        page.getByRole('link', { name: 'Summary', exact: true }),
       ).toBeVisible();
       await expect(
         page.getByRole('menuitem', { name: 'Sessions' }),
@@ -97,37 +97,14 @@ test.describe.parallel('config.toml', () => {
         .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();
+      await page.getByRole('button', { name: 'Copy' }).first().click();
 
-      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();
+      await context.grantPermissions(['clipboard-read', 'clipboard-write']);
 
-      const uninstalledImageString = `${registry}/${namespace}/${language}:${version}@${architecture}`;
+      const uninstalledImageString = await (
+        await page.evaluateHandle(() => navigator.clipboard.readText())
+      ).jsonValue();
 
       await page.goto(webuiEndpoint);
       await page.getByLabel('power_settings_new').click();

diff --git a/e2e/environment.test.ts b/e2e/environment.test.ts
@@ -100,7 +100,7 @@ test.describe('environment ', () => {
     // Verify image is modified
     const resourceLimitControlIndex = await findColumnIndex(
       imageListTable,
-      'Resource Limit',
+      'Resource limit',
     );
     const resource = await firstRow
       .locator('.ant-table-cell')

diff --git a/e2e/login.test.ts b/e2e/login.test.ts
@@ -20,6 +20,8 @@ test.describe('Login using the admin account', () => {
 
   test('should redirect to the Summary', async ({ page }) => {
     await expect(page).toHaveURL(/\/summary/);
-    await expect(page.getByRole('heading', { name: 'Summary' })).toBeVisible();
+    await expect(
+      page.getByTestId('webui-breadcrumb').getByText('Summary'),
+    ).toBeVisible();
   });
 });
diff --git a/e2e/test-util.ts b/e2e/test-util.ts
@@ -226,7 +226,7 @@ export async function createSession(page: Page, sessionName: string) {
   await page
     .getByRole('heading', { name: 'App close' })
     .getByLabel('close')
-    .click({ timeout: 15000 });
+    .click({ timeout: 30000 });
 
   // Verify that a cell exists to display the session name
   const session = page

diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
@@ -40,7 +40,7 @@ import {
   theme,
 } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useTransition } from 'react';
+import React, { Suspense, useEffect, useMemo, useTransition } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 export const AUTOMATIC_DEFAULT_SHMEM = '64m';
@@ -1213,23 +1213,25 @@ const ResourceAllocationFormItems: React.FC<
           tooltip={<Trans i18nKey={'session.launcher.DescSelectAgent'} />}
         >
           <Flex gap={'xs'}>
-            <Form.Item required noStyle style={{ flex: 1 }} name="agent">
-              {baiClient.supports('agent-select') && (
-                <AgentSelect
-                  resourceGroup={currentResourceGroup}
-                  fetchKey={agentFetchKey}
-                  onChange={(value, option) => {
-                    if (value !== 'auto') {
-                      form.setFieldsValue({
-                        cluster_mode: 'single-node',
-                        cluster_size: 1,
-                      });
-                    }
-                    // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
-                  }}
-                ></AgentSelect>
-              )}
-            </Form.Item>
+            <Suspense>
+              <Form.Item required noStyle style={{ flex: 1 }} name="agent">
+                {baiClient.supports('agent-select') && (
+                  <AgentSelect
+                    resourceGroup={currentResourceGroup}
+                    fetchKey={agentFetchKey}
+                    onChange={(value, option) => {
+                      if (value !== 'auto') {
+                        form.setFieldsValue({
+                          cluster_mode: 'single-node',
+                          cluster_size: 1,
+                        });
+                      }
+                      // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
+                    }}
+                  ></AgentSelect>
+                )}
+              </Form.Item>
+            </Suspense>
             <Form.Item noStyle>
               <Button
                 loading={isPendingAgentList}

diff --git a/react/src/components/WebUIBreadcrumb.tsx b/react/src/components/WebUIBreadcrumb.tsx
@@ -29,6 +29,7 @@ const WebUIBreadcrumb: React.FC<WebUIBreadcrumbProps> = (props) => {
         } as React.CSSProperties,
         props.style,
       )}
+      data-testid="webui-breadcrumb"
     >
       <Breadcrumb
         style={{

diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
@@ -1720,6 +1720,18 @@ const SessionLauncherPage = () => {
                                           }>
                                         }
                                       />
+                                      <Typography.Text
+                                        style={{ color: token.colorPrimary }}
+                                        copyable={{
+                                          text:
+                                            getImageFullName(
+                                              form.getFieldValue('environments')
+                                                ?.image,
+                                            ) ||
+                                            form.getFieldValue('environments')
+                                              ?.version,
+                                        }}
+                                      />
                                     </>
                                   )}
                                 </Flex>