[AVT] - Added Keyboard Nav AVT test for Contained List (carbon-design…

…-system#14748) * test: spl it files and added tests * fix: added test * test: fixed ac violation * test: added slow to the test --------- Co-authored-by: Andrea N. Cardona <[email protected]>
guidari · Oct 9, 2023 · 1a1b34c · 1a1b34c
1 parent 36150dd
commit 1a1b34c
Show file tree

Hide file tree

Showing 3 changed files with 326 additions and 13 deletions.
diff --git a/e2e/components/ContainedList/ContainedList-test.avt.e2e.js b/e2e/components/ContainedList/ContainedList-test.avt.e2e.js
@@ -0,0 +1,323 @@
+/**
+ * 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';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('ContainedList @avt', () => {
+  test('@avt-default-state ContainedList', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList');
+  });
+
+  test('@avt-advanced-state ContainedList Usage examples', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--usage-examples',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList-usage-examples');
+  });
+
+  test('@avt-advanced-state ContainedList Disclosed', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--disclosed',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList-disclosed');
+  });
+
+  test('@avt-advanced-state ContainedList With actions', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-actions',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList-with-actions');
+  });
+
+  test.slow(
+    '@avt-advanced-state ContainedList With expandable search',
+    async ({ page }) => {
+      await visitStory(page, {
+        component: 'ContainedList',
+        id: 'components-containedlist--with-expandable-search',
+        globals: {
+          theme: 'white',
+        },
+      });
+      await expect(page).toHaveNoACViolations(
+        'ContainedList-with-expandable-search'
+      );
+    }
+  );
+
+  test('@avt-advanced-state ContainedList With icons', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-icons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList-with-icons');
+  });
+
+  test('@avt-advanced-state ContainedList With interactive items', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-interactive-items',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ContainedList-with-interactive-items'
+    );
+  });
+
+  test('@avt-advanced-state ContainedList With interactive items and actions', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-interactive-items-and-actions',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ContainedList-with-interactive-items-and-actions'
+    );
+  });
+
+  test('@avt-advanced-state ContainedList With Layer', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-layer',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ContainedList-with-layer');
+  });
+
+  test('@avt-advanced-state ContainedList With list title decorators', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-list-title-decorators',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ContainedList-with-list-title-decorators'
+    );
+  });
+
+  test('@avt-advanced-state ContainedList With persistent search', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-persistent-search',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ContainedList-with-persistent-search'
+    );
+  });
+
+  test('@avt-keyboard-state ContainedList Usage examples', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--usage-examples',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Checking Add button
+    await expect(
+      page.locator('button.cds--btn--primary').first()
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+
+    // Interacting with options menu
+    await expect(
+      page.locator('button.cds--overflow-menu').first()
+    ).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('menuitem', { name: 'View details' })
+    ).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    await expect(page.getByText('Remove')).not.toBeVisible();
+  });
+
+  test('@avt-keyboard-state ContainedList With actions', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-actions',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Testing the first element focus and popover
+    await expect(
+      page.locator('button.cds--btn--icon-only').first()
+    ).toBeFocused();
+    await expect(page.getByText('Dismiss').first()).toBeVisible();
+    await page.keyboard.press('Enter');
+    await expect(page.getByText('Dismiss').first()).not.toBeVisible();
+
+    //navigating to the last element
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(
+      page.locator('button.cds--btn--icon-only').last()
+    ).toBeFocused();
+  });
+
+  test('@avt-keyboard-state ContainedList With expandable search', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-expandable-search',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Testing search input
+    await expect(page.locator('.cds--search-magnifier')).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('search')).toHaveClass(/cds--search--expanded/);
+    page.getByRole('searchbox').fill('List item 3');
+    await expect(page.getByText('List item 3')).toBeVisible();
+    await expect(page.getByText('List item 1')).not.toBeVisible();
+
+    // Close search
+    await page.keyboard.press('Escape');
+    await expect(page.getByText('List item 1')).toBeVisible();
+  });
+
+  test('@avt-keyboard-state ContainedList With interactive items', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-interactive-items',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Testing tab navigation
+    await expect(
+      page.locator('button.cds--contained-list-item__content').first()
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(
+      page.locator('button.cds--contained-list-item__content').last()
+    ).toBeFocused();
+  });
+
+  test('@avt-keyboard-state ContainedList With interactive items and actions', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-interactive-items-and-action',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Testing tab navigation with interactive item dismiss
+    await expect(
+      page.locator('button.cds--contained-list-item__content').first()
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(
+      page.locator('button.cds--btn--icon-only').first()
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(
+      page.locator('button.cds--contained-list-item__content').last()
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(
+      page.locator('button.cds--btn--icon-only').last()
+    ).toBeFocused();
+  });
+
+  test('@avt-keyboard-state ContainedList With persistent search', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ContainedList',
+      id: 'components-containedlist--with-persistent-search',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('List title').first()).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Testing search input
+    await expect(page.getByRole('searchbox')).toBeFocused();
+    page.getByRole('searchbox').fill('List item 3');
+    await expect(page.getByText('List item 3')).toBeVisible();
+    await expect(page.getByText('List item 1')).not.toBeVisible();
+
+    // Close search
+    await page.keyboard.press('Escape');
+    await expect(page.getByText('List item 1')).toBeVisible();
+  });
+});
diff --git a/e2e/components/ContainedList/ContainedList-test.e2e.js b/e2e/components/ContainedList/ContainedList-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('ContainedList', () => {
   themes.forEach((theme) => {
@@ -103,15 +103,4 @@ test.describe('ContainedList', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'ContainedList',
-      id: 'components-containedlist--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('ContainedList');
-  });
 });
diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -201,6 +201,7 @@ export const WithPersistentSearch = () => {
         onChange={handleChange}
         closeButtonLabelText="Clear search input"
         size="lg"
+        labelText="Filter search"
       />
       {searchResults.map((listItem, key) => (
         <ContainedListItem key={key}>{listItem}</ContainedListItem>