test(datatable): add @AVT tests (#14357)

* test(datatable): add @AVT tests * test(datatable): add keyboard tests --------- Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Aug 4, 2023 · 6bc6d4c · 6bc6d4c
1 parent a0f1b24
commit 6bc6d4c
Show file tree

Hide file tree

Showing 12 changed files with 592 additions and 193 deletions.
diff --git a/.yarn/cache/@playwright-test-npm-1.28.0-20a17c7d04-5b90a4fd7a.zip b/.yarn/cache/@playwright-test-npm-1.28.0-20a17c7d04-5b90a4fd7a.zip
diff --git a/.yarn/cache/@playwright-test-npm-1.36.2-0b5c09b329-659304e0bb.zip b/.yarn/cache/@playwright-test-npm-1.36.2-0b5c09b329-659304e0bb.zip
diff --git a/.yarn/cache/playwright-core-npm-1.28.0-9bd034478b-4bd13bf83b.zip b/.yarn/cache/playwright-core-npm-1.28.0-9bd034478b-4bd13bf83b.zip
diff --git a/.yarn/cache/playwright-core-npm-1.36.2-37b679cd9b-2193ce802e.zip b/.yarn/cache/playwright-core-npm-1.36.2-37b679cd9b-2193ce802e.zip
diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js
@@ -0,0 +1,373 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('DataTable @avt', () => {
+  test.describe('basic', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-basic--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-basic--default'
+      );
+    });
+    test('xl with two lines has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-basic--xl-with-two-lines',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-basic--xl-with-two-lines'
+      );
+    });
+  });
+
+  test.describe('batch actions', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-batch-actions--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-batch-actions--default'
+      );
+    });
+  });
+
+  test.describe('dynamic', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-dynamic--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-dynamic--default'
+      );
+    });
+
+    test('default keyboard navigation sequence', async ({ page }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-dynamic--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-dynamic--default'
+      );
+
+      // Start off by manually focusing the search input
+      await page.getByRole('searchbox').focus();
+      await expect(page.getByRole('searchbox')).toBeFocused();
+
+      // Navigate to the gear/settings button
+      await page.keyboard.press('Tab');
+      await expect(
+        page.getByRole('button', { name: 'Settings' })
+      ).toBeFocused();
+
+      // Navigate to the select all checkbox
+      await page.keyboard.press('Tab');
+      await expect(
+        page.getByRole('checkbox', { name: 'Select all rows' })
+      ).toBeFocused();
+
+      // Pressing enter on the select all checkbox shouldn't do anything
+      await page.keyboard.press('Enter');
+      await expect(
+        page.getByRole('checkbox', { name: 'Select all rows' })
+      ).not.toBeChecked();
+
+      // Pressing space should check the select all checkbox
+      await page.keyboard.press('Space');
+      await expect(
+        page.getByRole('checkbox', { name: 'Select all rows' })
+      ).toBeChecked();
+
+      // Every checkbox should be checked
+      for (const checkbox of await page.getByRole('checkbox').all()) {
+        await expect(checkbox).toBeChecked();
+      }
+
+      // Pressing space should uncheck the select all checkbox
+      await page.keyboard.press('Space');
+      await expect(
+        page.getByRole('checkbox', { name: 'Select all rows' })
+      ).not.toBeChecked();
+      // Every checkbox should no longer be checked
+      for (const checkbox of await page.getByRole('checkbox').all()) {
+        await expect(checkbox).not.toBeChecked();
+      }
+
+      // Navigate to the first expansion button
+      await page.keyboard.press('Tab');
+      await expect(
+        page.getByRole('button', { name: 'Expand current row' }).first()
+      ).toBeFocused();
+      // Expand the first row
+      await page.keyboard.press('Space');
+      await expect(
+        page.getByRole('heading', { name: 'Expandable row content' }).first()
+      ).toBeVisible();
+
+      // Navigate to the first row selection checkbox and check it
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Space');
+      await expect(page.getByText('1 item selected')).toBeVisible();
+
+      // Navigate backwards up into the batch action bar
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+      await page.keyboard.press('Shift+Tab');
+
+      await page
+        .getByRole('heading', { name: 'Expandable row content' })
+        .first()
+        .hover();
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-dynamic--default---with-batch-actions-open-and-row-expanded'
+      );
+      await expect(page.getByRole('button', { name: 'Delete' })).toBeFocused();
+
+      // Navigate forwards through the batch action buttons
+      await page.keyboard.press('Tab');
+      await expect(page.getByRole('button', { name: 'Save' })).toBeFocused();
+      await page.keyboard.press('Tab');
+      await expect(
+        page.getByRole('button', { name: 'Download' })
+      ).toBeFocused();
+      await page.keyboard.press('Tab');
+      await expect(page.getByRole('button', { name: 'Cancel' })).toBeFocused();
+      // Invoke the cancel button
+      await page.keyboard.press('Space');
+      await expect(page.getByText('1 item selected')).not.toBeVisible();
+      // Every checkbox should no longer be checked
+      for (const checkbox of await page.getByRole('checkbox').all()) {
+        await expect(checkbox).not.toBeChecked();
+      }
+    });
+  });
+
+  test.describe('expansion', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-expansion--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-expansion--default'
+      );
+    });
+    test('batch expansion has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-expansion--batch-expansion',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-expansion--batch-expansion'
+      );
+    });
+  });
+
+  test.describe('filtering', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-filtering--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-filtering--default'
+      );
+    });
+  });
+
+  test.describe('selection', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-selection--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-selection--default'
+      );
+    });
+    test('with-radio-expansion has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-selection--with-radio-expansion',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-selection--with-radio-expansion'
+      );
+    });
+    test('with-selection-and-sorting has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-selection--with-selection-and-sorting',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-selection--with-selection-and-sorting'
+      );
+    });
+  });
+
+  test.describe('skeleton', () => {
+    test('skeleton has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-skeleton--skeleton',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-skeleton--skeleton'
+      );
+    });
+  });
+
+  test.describe('sorting', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-sorting--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-sorting--default'
+      );
+    });
+  });
+
+  test.describe('toolbar', () => {
+    test('default has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-toolbar--default',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-toolbar--default'
+      );
+    });
+    test('persistent-toolbar has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-toolbar--persistent-toolbar',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-toolbar--persistent-toolbar'
+      );
+    });
+    test('small-persistent-toolbar has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-toolbar--small-persistent-toolbar',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-toolbar--small-persistent-toolbar'
+      );
+    });
+    test('with-overflow-menu has no accessibility-checker violations', async ({
+      page,
+    }) => {
+      await visitStory(page, {
+        component: 'DataTable',
+        id: 'components-datatable-toolbar--with-overflow-menu',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'components-datatable-toolbar--with-overflow-menu'
+      );
+    });
+  });
+});