Add Keyboard Nav AVT test for MenuButton (carbon-design-system#14842)

* test: added avt file * test: added keyboard nav test
guidari · Oct 16, 2023 · 95250c2 · 95250c2
1 parent de89214
commit 95250c2
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 13 deletions.
diff --git a/e2e/components/MenuButton/MenuButton-test.avt.e2e.js b/e2e/components/MenuButton/MenuButton-test.avt.e2e.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright IBM Corp. 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('MenuButton @avt', () => {
+  test('@avt-default-state MenuButton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton');
+  });
+
+  test('@avt-advanced-states MenuButton with danger', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-danger',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton-with-danger');
+  });
+
+  test('@avt-advanced-states MenuButton with dividers', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-dividers',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton-with-dividers');
+  });
+
+  test('@avt-keyboard-nav MenuButton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').nth(1)).toBeFocused();
+    // Skip the disabled item and come back to the first item
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+
+  test('@avt-keyboard-nav MenuButton with danger', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-danger',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+
+    // Validate danger button
+    await expect(page.getByRole('menuitem').last()).toBeFocused();
+    await expect(page.getByText('Danger action')).toBeVisible();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+
+  test('@avt-keyboard-nav MenuButton with dividers', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-dividers',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').last()).toBeFocused();
+    expect(page.getByRole('separator')).toBeTruthy();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+});
diff --git a/e2e/components/MenuButton/MenuButton-test.e2e.js b/e2e/components/MenuButton/MenuButton-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('MenuButton', () => {
   themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('MenuButton', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'MenuButton',
-      id: 'components-menubutton--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('MenuButton');
-  });
 });