test: add workspace tests (#9905)

webui/react/package.json

@@ -42,7 +42,7 @@
     "fp-ts": "^2.16.5",
     "fuse.js": "^7.0.0",
     "hermes-parallel-coordinates": "^0.6.17",
-    "hew": "npm:@hpe.com/hew@^0.6.44",
+    "hew": "npm:@hpe.com/hew@^0.6.45",
     "humanize-duration": "^3.28.0",
     "immutable": "^4.3.0",
     "io-ts": "^2.2.21",

webui/react/src/components/GridListRadioGroup.tsx

@@ -24,15 +24,17 @@ const GridListRadioGroup: React.FC<Props> = ({ onChange, value }: Props) => {
   );
 
   return (
-    <RadioGroup
-      iconOnly
-      options={[
-        { icon: 'grid', id: GridListView.Grid, label: 'Grid View' },
-        { icon: 'list', id: GridListView.List, label: 'List View' },
-      ]}
-      value={value}
-      onChange={handleChange}
-    />
+    <div data-test-component="grid-list-radio-group">
+      <RadioGroup
+        iconOnly
+        options={[
+          { icon: 'grid', id: GridListView.Grid, label: 'Grid View' },
+          { icon: 'list', id: GridListView.List, label: 'List View' },
+        ]}
+        value={value}
+        onChange={handleChange}
+      />
+    </div>
   );
 };
 

webui/react/src/e2e/fixtures/global-fixtures.ts

@@ -192,11 +192,7 @@ export const test = baseTest.extend<CustomFixtures, CustomWorkerFixtures>({
         },
       });
       const adminUser = await backgroundApiUser.createUser(request);
-      await backgroundApiUser.apiAuth.loginApi({
-        creds: { password: request.password!, username: adminUser.user!.username },
-      });
       await use({ request, response: adminUser });
-      await backgroundApiUser.apiAuth.loginApi();
       await backgroundApiUser.patchUser(adminUser.user!.id!, { active: false });
     },
     { scope: 'worker' },

webui/react/src/e2e/models/components/GridListRadioGroup.ts

@@ -0,0 +1,13 @@
+import { BaseComponent, NamedComponent } from 'playwright-page-model-base/BaseComponent';
+
+export class GridListRadioGroup extends NamedComponent {
+  override defaultSelector = '[data-test-component="grid-list-radio-group"]';
+  readonly grid = new BaseComponent({
+    parent: this,
+    selector: 'label:first-of-type',
+  });
+  readonly list = new BaseComponent({
+    parent: this,
+    selector: 'label:last-of-type',
+  });
+}

webui/react/src/e2e/models/pages/WorkspaceList.ts

@@ -4,10 +4,26 @@ import { DeterminedPage } from 'e2e/models/common/base/BasePage';
 import { Message } from 'e2e/models/common/hew/Message';
 import { Select } from 'e2e/models/common/hew/Select';
 import { Toggle } from 'e2e/models/common/hew/Toggle';
+import { GridListRadioGroup } from 'e2e/models/components/GridListRadioGroup';
+import { HeadRow, InteractiveTable, Row } from 'e2e/models/components/Table/InteractiveTable';
 import { WorkspaceCreateModal } from 'e2e/models/components/WorkspaceCreateModal';
 import { WorkspaceDeleteModal } from 'e2e/models/components/WorkspaceDeleteModal';
 import { WorkspaceCard } from 'e2e/models/pages/WorkspaceList/WorkspaceCard';
 
+class WorkspaceHeadRow extends HeadRow {
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="Name"]',
+  });
+}
+
+class WorkspaceRow extends Row {
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="name"]',
+  });
+}
+
 /**
  * Represents the WorkspaceList page from src/pages/WorkspaceList.tsx
  */
@@ -36,7 +52,17 @@ export class WorkspaceList extends DeterminedPage {
     parent: this,
     selector: '[data-testid="newWorkspace"]',
   });
-  // TODO missing grid list
+  readonly gridListRadioGroup = new GridListRadioGroup({
+    parent: this,
+  });
+  readonly table = new InteractiveTable({
+    parent: this,
+    tableArgs: {
+      attachment: '[data-testid="table"]',
+      headRowType: WorkspaceHeadRow,
+      rowType: WorkspaceRow,
+    },
+  });
   readonly workspaceCards = new WorkspaceCard({
     parent: this,
   });

webui/react/src/e2e/models/pages/WorkspaceList/WorkspaceCard.ts

@@ -15,4 +15,8 @@ export class WorkspaceCard extends Card {
     parent: this,
     selector: '[data-testid="archived"]',
   });
+  readonly title = new BaseComponent({
+    parent: this,
+    selector: 'h1',
+  });
 }