Merge pull request #705 from liam-hq/add_test_show_mode_on_desktop_to…

…olbar ✅ Add E2E tests for Show Mode menu in desktop toolbar
liam-hq · Feb 10, 2025 · e163b46 · e163b46
2 parents 43cd9fa + 763e675
commit e163b46
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/frontend/packages/e2e/tests/e2e/toolbar.test.ts b/frontend/packages/e2e/tests/e2e/toolbar.test.ts
@@ -39,4 +39,58 @@ test.describe('Desktop Toolbar', () => {
       Number.parseInt(zoomLevelAfter),
     )
   })
+
+  test.describe('Show Mode', () => {
+    type ShowModeTest = {
+      mode: string
+      expectedColumns: string[]
+    }
+
+    const showModeTests: ShowModeTest[] = [
+      {
+        mode: 'Table Name',
+        expectedColumns: [],
+      },
+      {
+        mode: 'Key Only',
+        expectedColumns: ['idbigserial', 'account_idbigint'],
+      },
+      {
+        mode: 'All Fields',
+        expectedColumns: [
+          'idbigserial',
+          'account_idbigint',
+          'titlevarchar',
+          'created_attimestamp',
+          'updated_attimestamp',
+          'replies_policyinteger',
+          'exclusiveboolean',
+        ],
+      },
+    ]
+
+    test.beforeEach(async ({ page }) => {
+      const showModeButton = page.getByRole('button', {
+        name: 'Show mode',
+      })
+      await showModeButton.click()
+    })
+
+    for (const { mode, expectedColumns } of showModeTests) {
+      test(`Show Mode: ${mode}`, async ({ page }) => {
+        const modeButton = page.getByRole('menuitemradio', {
+          name: mode,
+        })
+        await modeButton.click()
+
+        const tableNode = page.getByRole('button', {
+          name: 'lists table',
+          exact: true,
+        })
+
+        const columns = tableNode.getByRole('listitem')
+        await expect(columns).toHaveText(expectedColumns)
+      })
+    }
+  })
 })
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ShowModeMenu/ShowModeMenu.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ShowModeMenu/ShowModeMenu.tsx
@@ -55,6 +55,7 @@ export const ShowModeMenu: FC = () => {
             size="sm"
             variant="ghost-secondary"
             rightIcon={<ChevronDown />}
+            aria-label="Show mode"
           >
             {OPTION_LIST.find((opt) => opt.value === showMode)?.label}
           </Button>