feat: avt tests Tabs (#14436)

carbon-design-system · Aug 16, 2023 · 1557895 · 1557895
1 parent 37f4a70
commit 1557895
Show file tree

Hide file tree

Showing 2 changed files with 186 additions and 13 deletions.
diff --git a/e2e/components/Tabs/Tabs-test.avt.e2e.js b/e2e/components/Tabs/Tabs-test.avt.e2e.js
@@ -0,0 +1,184 @@
+/**
+ * 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('Tabs @avt', () => {
+  test('accessibility-checker @avt - Tabs default state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs');
+  });
+
+  test('accessibility-checker tabs contained', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--contained',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs-contained');
+  });
+
+  test('accessibility-checker tabs contained with icons', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--contained-with-icons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs-contained-with-icons');
+  });
+
+  test('accessibility-checker tabs contained with secondary labels', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-tabs--contained-with-secondary-labels',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Tabs-contained-with-secondary-labels'
+    );
+  });
+
+  test('accessibility-checker tabs dismissable with icons', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--dismissable-with-icons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs--dismissable-with-icons');
+  });
+
+  test('accessibility-checker tabs icon 20 only', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--icon-20-only',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs--icon-20-only');
+  });
+
+  test('accessibility-checker tabs manual', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-tabs--manual',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs--manual');
+  });
+
+  test('accessibility-checker tabs skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs-skeleton');
+  });
+
+  test.slow('default state - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Focus on the first tab via keyboard navigation
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeVisible();
+
+    // Focus should be on content within the first Tab
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('tabpanel', { name: 'Tab Panel 1' })
+    ).toBeFocused();
+
+    // Moving back one tab stop we should back on Tab label 1
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeFocused();
+
+    // Nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowRight');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeVisible();
+
+    // Move through the actions in the second tab
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('checkbox')).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('textbox')).toBeVisible();
+
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeFocused();
+
+    // Continue to nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowRight');
+    await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
+  });
+
+  test.slow('dismissable state - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--dismissable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button')).toBeVisible();
+
+    // Focus on the first tab via keyboard navigation
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeVisible();
+
+    // Arrow right to Tab 2
+    await page.keyboard.press('ArrowRight');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeFocused();
+
+    // Arrow right to Tab 4
+    await page.keyboard.press('ArrowRight');
+    await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
+
+    // Pressing delete should delete the dismissable tab
+    await page.keyboard.press('Delete');
+    await expect(
+      page.getByRole('tab', { name: 'Tab label 4' })
+    ).not.toBeVisible();
+  });
+});
diff --git a/e2e/components/Tabs/Tabs-test.e2e.js b/e2e/components/Tabs/Tabs-test.e2e.js
@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('Tabs', () => {
   themes.forEach((theme) => {
@@ -113,15 +113,4 @@ test.describe('Tabs', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Tabs',
-      id: 'components-tabs--line',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('Tabs');
-  });
 });