From 1a1b34ca1079e4d7152f1170a21f10e8ddc3537c Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Mon, 9 Oct 2023 08:49:20 -0300 Subject: [PATCH] [AVT] - Added Keyboard Nav AVT test for Contained List (#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 --- .../ContainedList-test.avt.e2e.js | 323 ++++++++++++++++++ .../ContainedList/ContainedList-test.e2e.js | 15 +- .../ContainedList/ContainedList.stories.js | 1 + 3 files changed, 326 insertions(+), 13 deletions(-) create mode 100644 e2e/components/ContainedList/ContainedList-test.avt.e2e.js diff --git a/e2e/components/ContainedList/ContainedList-test.avt.e2e.js b/e2e/components/ContainedList/ContainedList-test.avt.e2e.js new file mode 100644 index 000000000000..da1af05ba32b --- /dev/null +++ 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 index 0eda9c820256..0e49ff450879 100644 --- 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 index 4646e6d2f014..b694673f4f67 100644 --- 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) => ( {listItem}