test: add projects tests [CM-467]

webui/react/src/components/ProjectMoveModal.tsx

@@ -1,3 +1,4 @@
+import Form from 'hew/Form';
 import Icon from 'hew/Icon';
 import { Modal } from 'hew/Modal';
 import Select, { Option, SelectValue } from 'hew/Select';
@@ -17,6 +18,8 @@ import { useObservable } from 'utils/observable';
 
 import css from './ProjectMoveModal.module.scss';
 
+const FORM_ID = 'move-project-form';
+
 interface Props {
   onMove?: () => void;
   project: Project;
@@ -76,37 +79,40 @@ const ProjectMoveModalComponent: React.FC<Props> = ({ onMove, project }: Props)
       size="small"
       submit={{
         disabled: !destinationWorkspaceId,
+        form: FORM_ID,
         handleError,
         handler: handleSubmit,
         text: 'Move Project',
       }}
       title="Move Project">
       <label htmlFor="workspace">Workspace</label>
-      <Select
-        id="workspace"
-        placeholder="Select a destination workspace."
-        value={destinationWorkspaceId}
-        width={'100%'}
-        onSelect={handleWorkspaceSelect}>
-        {workspaces.map((workspace) => {
-          const disabled = workspace.archived || workspace.id === project.workspaceId;
-          return (
-            <Option
-              disabled={disabled}
-              key={workspace.id}
-              label={workspace.name}
-              value={workspace.id}>
-              <div className={disabled ? css.workspaceOptionDisabled : ''}>
-                <Label truncate={{ tooltip: true }}>{workspace.name}</Label>
-                {workspace.archived && <Icon name="archive" title="Archived" />}
-                {workspace.id === project.workspaceId && (
-                  <Icon name="checkmark" title="Project's current workspace" />
-                )}
-              </div>
-            </Option>
-          );
-        })}
-      </Select>
+      <Form id={FORM_ID}>
+        <Select
+          id="workspace"
+          placeholder="Select a destination workspace."
+          value={destinationWorkspaceId}
+          width={'100%'}
+          onSelect={handleWorkspaceSelect}>
+          {workspaces.map((workspace) => {
+            const disabled = workspace.archived || workspace.id === project.workspaceId;
+            return (
+              <Option
+                disabled={disabled}
+                key={workspace.id}
+                label={workspace.name}
+                value={workspace.id}>
+                <div className={disabled ? css.workspaceOptionDisabled : ''}>
+                  <Label truncate={{ tooltip: true }}>{workspace.name}</Label>
+                  {workspace.archived && <Icon name="archive" title="Archived" />}
+                  {workspace.id === project.workspaceId && (
+                    <Icon name="checkmark" title="Project's current workspace" />
+                  )}
+                </div>
+              </Option>
+            );
+          })}
+        </Select>
+      </Form>
     </Modal>
   );
 };

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

@@ -5,9 +5,9 @@ import { Card } from 'e2e/models/common/hew/Card';
 import { ProjectActionDropdown } from './ProjectActionDropdown';
 
 /**
- * Represents the ProjectsCard in the WorkspaceProjects component
+ * Represents the ProjectCard in the WorkspaceProjects component
  */
-export class ProjectsCard extends Card {
+export class ProjectCard extends Card {
   override readonly actionMenu = new ProjectActionDropdown({
     clickThisComponentToOpen: this.actionMenuContainer,
     root: this.root,
@@ -16,4 +16,8 @@ export class ProjectsCard extends Card {
     parent: this,
     selector: '[data-testid="archived"]',
   });
+  readonly title = new BaseComponent({
+    parent: this,
+    selector: 'h1',
+  });
 }

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

@@ -0,0 +1,12 @@
+import { Modal } from 'e2e/models/common/hew/Modal';
+import { Select } from 'e2e/models/common/hew/Select';
+
+/**
+ * Represents the ProjectMoveModal component in src/components/ProjectMoveModal.tsx
+ */
+export class ProjectMoveModal extends Modal {
+  readonly destinationWorkspace = new Select({
+    parent: this,
+    selector: 'input[id="workspace"]',
+  });
+}

webui/react/src/e2e/models/pages/WorkspaceDetails/WorkspaceProjects.ts

@@ -3,9 +3,26 @@ import { BaseReactFragment } from 'playwright-page-model-base/BaseReactFragment'
 
 import { Select } from 'e2e/models/common/hew/Select';
 import { Toggle } from 'e2e/models/common/hew/Toggle';
-import { ProjectsCard } from 'e2e/models/components/ProjectCard';
+import { GridListRadioGroup } from 'e2e/models/components/GridListRadioGroup';
+import { ProjectCard } from 'e2e/models/components/ProjectCard';
 import { ProjectCreateModal } from 'e2e/models/components/ProjectCreateModal';
 import { ProjectDeleteModal } from 'e2e/models/components/ProjectDeleteModal';
+import { ProjectMoveModal } from 'e2e/models/components/ProjectMoveModal';
+import { HeadRow, InteractiveTable, Row } from 'e2e/models/components/Table/InteractiveTable';
+
+class ProjectHeadRow extends HeadRow {
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="Name"]',
+  });
+}
+
+class ProjectRow extends Row {
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="name"]',
+  });
+}
 
 /**
  * Represents the WorkspaceProjects page in src/pages/WorkspaceDetails/WorkspaceProjects.tsx
@@ -29,15 +46,31 @@ export class WorkspaceProjects extends BaseReactFragment {
     parent: this,
     selector: '[data-testid="newProject"]',
   });
-  // TODO missing grid toggle
+  readonly gridListRadioGroup = new GridListRadioGroup({
+    parent: this,
+  });
+  readonly table = new InteractiveTable({
+    parent: this,
+    tableArgs: {
+      attachment: '[data-testid="table"]',
+      headRowType: ProjectHeadRow,
+      rowType: ProjectRow,
+    },
+  });
+  readonly projectCards = new ProjectCard({
+    parent: this,
+  });
   readonly createModal = new ProjectCreateModal({
     root: this.root,
   });
   readonly deleteModal = new ProjectDeleteModal({
     root: this.root,
   });
-  cardByName(name: string): ProjectsCard {
-    return new ProjectsCard({
+  readonly moveModal = new ProjectMoveModal({
+    root: this.root,
+  });
+  cardByName(name: string): ProjectCard {
+    return new ProjectCard({
       attachment: `[data-testid="card-${name}"]`,
       parent: this,
     });