From d4fc1abba7a252f27530f4d7abf485e636ea42b1 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 3 Dec 2024 12:42:00 +0530 Subject: [PATCH 1/6] test(Tagset): add avt tests for complex states --- e2e/components/TagSet/TagSet-test.avt.e2e.js | 190 +++++++++++++++++++ 1 file changed, 190 insertions(+) diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js index d3d6b25324..3e00af1ccd 100644 --- a/e2e/components/TagSet/TagSet-test.avt.e2e.js +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -9,6 +9,7 @@ import { expect, test } from '@playwright/test'; import { visitStory } from '../../test-utils/storybook'; +import { carbon, pkg } from '../../../packages/ibm-products/src/settings'; test.describe('TagSet @avt', () => { test('@avt-default-state', async ({ page }) => { @@ -21,4 +22,193 @@ test.describe('TagSet @avt', () => { }); await expect(page).toHaveNoACViolations('TagSet @avt-default-state'); }); + test('@avt-many-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--many-tags', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('TagSet @avt-many-tags'); + }); + test('@avt-multiline-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--multiline-tags', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('TagSet @avt-multiline-tags'); + }); + test('@avt-hundreds-of-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--hundreds-of-tags', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('TagSet @avt-hundreds-of-tags'); + }); + test('@avt-with-close', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--with-close', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('TagSet @avt-with-close'); + }); + test('@avt-with-close-and-overflow-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--with-close-and-overflow-tags', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'TagSet @avt-with-close-and-overflow-tags' + ); + }); + + //open close popover + test('@avt-open-and-close-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--many-tags', + globals: { + carbonTheme: 'white', + }, + }); + const moreTagsButton = page.locator( + `.${pkg.prefix}--tag-set-overflow__popover-trigger` + ); + + moreTagsButton.click(); + await expect( + page.locator(`.${carbon.prefix}--popover--open`) + ).toBeVisible(); + + moreTagsButton.click(); + await expect(page.locator(`.${carbon.prefix}--popover--open`)).toBeHidden(); + }); + + //open close popover + test('@avt-open-and-close-all-tags-modal', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--many-tags', + globals: { + carbonTheme: 'white', + }, + }); + const moreTagsButton = page.locator( + `.${pkg.prefix}--tag-set-overflow__popover-trigger` + ); + const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); + + moreTagsButton.click(); + + await page + .locator(`.${pkg.prefix}--tag-set-overflow__show-all-tags-link`) + .click(); + + await modalElement.evaluate((element) => + Promise.all( + element.getAnimations().map((animation) => animation.finished) + ) + ); + + await expect(page.getByRole('heading', { name: 'All tags' })).toBeVisible(); + + //checking search funtionality + await expect(page.getByRole('searchbox')).toBeFocused(); + await expect(modalElement.getByText('Two')).toBeVisible(); + await page.getByRole('searchbox').fill('One'); + await expect(modalElement.getByText('Two')).toBeHidden(); + + await page.getByRole('button', { name: 'Close' }).click(); + await expect(page.locator(`.${carbon.prefix}--modal`)).toBeHidden(); + }); + + test('@avt-close-tags', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--with-close-and-overflow-tags', + globals: { + carbonTheme: 'white', + }, + }); + + await expect( + page.locator('.dev-prefix--c4p--tag-set__displayed-tag').getByText('One') + ).toBeVisible(); + await page.getByRole('button', { name: 'Dismiss' }).first().click(); + await expect( + page.locator('.dev-prefix--c4p--tag-set__displayed-tag').getByText('One') + ).toBeHidden(); + }); + + test('@avt-keyboard', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--with-close-and-overflow-tags', + globals: { + carbonTheme: 'white', + }, + }); + const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); + + await page.keyboard.press('Tab'); + await expect( + page.getByRole('button', { name: 'Dismiss' }).first() + ).toBeFocused(); + pressTabKey(page, 6); + + const moreTagsButton = page.locator( + `.${pkg.prefix}--tag-set-overflow__popover-trigger` + ); + await expect(moreTagsButton).toBeFocused(); + await page.keyboard.press('Enter'); + + await expect( + page.locator(`.${carbon.prefix}--popover--open`) + ).toBeVisible(); + + pressTabKey(page, 1); //first tag inside popover is focussed + await expect( + page + .locator(`.${pkg.prefix}--tag-set-overflow__tag-list`) + .getByRole('button', { name: 'Dismiss' }) + .first() + ).toBeFocused(); + + pressTabKey(page, 10); + + await expect( + page.locator(`.${pkg.prefix}--tag-set-overflow__show-all-tags-link`) + ).toBeFocused(); //view all tags modal link is focussed + + await page.keyboard.press('Enter'); + + await modalElement.evaluate((element) => + Promise.all( + element.getAnimations().map((animation) => animation.finished) + ) + ); + + await expect(page.getByRole('heading', { name: 'All tags' })).toBeVisible(); + pressTabKey(page, 1); + await page.keyboard.press('Enter'); + await expect(page.locator(`.${carbon.prefix}--modal`)).toBeHidden(); + }); }); +async function pressTabKey(page, number) { + for (let i = 0; i < number; i++) { + await page.keyboard.press('Tab'); + } +} From c9db30dc5b9d216acc071d9e84b184ab58053cce Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 3 Dec 2024 16:40:24 +0530 Subject: [PATCH 2/6] test: fix issue --- e2e/components/TagSet/TagSet-test.avt.e2e.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js index 3e00af1ccd..cc01971291 100644 --- a/e2e/components/TagSet/TagSet-test.avt.e2e.js +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -145,11 +145,15 @@ test.describe('TagSet @avt', () => { }); await expect( - page.locator('.dev-prefix--c4p--tag-set__displayed-tag').getByText('One') + page + .locator(`.${pkg.prefix}--c4p--tag-set__displayed-tag`) + .getByText('One') ).toBeVisible(); await page.getByRole('button', { name: 'Dismiss' }).first().click(); await expect( - page.locator('.dev-prefix--c4p--tag-set__displayed-tag').getByText('One') + page + .locator(`.${pkg.prefix}--c4p--tag-set__displayed-tag`) + .getByText('One') ).toBeHidden(); }); From 98dd940dd7fcbeca36990eb340edd8a3eb491774 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 3 Dec 2024 17:00:40 +0530 Subject: [PATCH 3/6] test: fix issue2 --- e2e/components/TagSet/TagSet-test.avt.e2e.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js index cc01971291..bc6a3c4f59 100644 --- a/e2e/components/TagSet/TagSet-test.avt.e2e.js +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -145,15 +145,11 @@ test.describe('TagSet @avt', () => { }); await expect( - page - .locator(`.${pkg.prefix}--c4p--tag-set__displayed-tag`) - .getByText('One') + page.locator(`.${pkg.prefix}--tag-set__displayed-tag`).getByText('One') ).toBeVisible(); await page.getByRole('button', { name: 'Dismiss' }).first().click(); await expect( - page - .locator(`.${pkg.prefix}--c4p--tag-set__displayed-tag`) - .getByText('One') + page.locator(`.${pkg.prefix}--tag-set__displayed-tag`).getByText('One') ).toBeHidden(); }); From c99059500c41172b84e6ab502158907d48ba6c99 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Wed, 4 Dec 2024 11:43:19 +0530 Subject: [PATCH 4/6] test: add a util method for keypress --- e2e/components/TagSet/TagSet-test.avt.e2e.js | 25 ++++++++++---------- e2e/test-utils/simulateKeyPress.ts | 15 ++++++++++++ 2 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 e2e/test-utils/simulateKeyPress.ts diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js index bc6a3c4f59..3ae3eb971f 100644 --- a/e2e/components/TagSet/TagSet-test.avt.e2e.js +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -10,6 +10,7 @@ import { expect, test } from '@playwright/test'; import { visitStory } from '../../test-utils/storybook'; import { carbon, pkg } from '../../../packages/ibm-products/src/settings'; +import { simulateKeyPress } from '../../test-utils/simulateKeyPress'; test.describe('TagSet @avt', () => { test('@avt-default-state', async ({ page }) => { @@ -163,23 +164,25 @@ test.describe('TagSet @avt', () => { }); const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); - await page.keyboard.press('Tab'); + simulateKeyPress(page, 'Tab'); + await expect( page.getByRole('button', { name: 'Dismiss' }).first() ).toBeFocused(); - pressTabKey(page, 6); + simulateKeyPress(page, 'Tab', 6); const moreTagsButton = page.locator( `.${pkg.prefix}--tag-set-overflow__popover-trigger` ); await expect(moreTagsButton).toBeFocused(); - await page.keyboard.press('Enter'); + simulateKeyPress(page, 'Enter'); await expect( page.locator(`.${carbon.prefix}--popover--open`) ).toBeVisible(); - pressTabKey(page, 1); //first tag inside popover is focussed + simulateKeyPress(page, 'Tab'); + //first tag inside popover is focussed await expect( page .locator(`.${pkg.prefix}--tag-set-overflow__tag-list`) @@ -187,13 +190,13 @@ test.describe('TagSet @avt', () => { .first() ).toBeFocused(); - pressTabKey(page, 10); + simulateKeyPress(page, 'Tab', 10); await expect( page.locator(`.${pkg.prefix}--tag-set-overflow__show-all-tags-link`) ).toBeFocused(); //view all tags modal link is focussed - await page.keyboard.press('Enter'); + simulateKeyPress(page, 'Enter'); await modalElement.evaluate((element) => Promise.all( @@ -202,13 +205,9 @@ test.describe('TagSet @avt', () => { ); await expect(page.getByRole('heading', { name: 'All tags' })).toBeVisible(); - pressTabKey(page, 1); - await page.keyboard.press('Enter'); + simulateKeyPress(page, 'Tab'); + + simulateKeyPress(page, 'Enter'); await expect(page.locator(`.${carbon.prefix}--modal`)).toBeHidden(); }); }); -async function pressTabKey(page, number) { - for (let i = 0; i < number; i++) { - await page.keyboard.press('Tab'); - } -} diff --git a/e2e/test-utils/simulateKeyPress.ts b/e2e/test-utils/simulateKeyPress.ts new file mode 100644 index 0000000000..7d48f2f020 --- /dev/null +++ b/e2e/test-utils/simulateKeyPress.ts @@ -0,0 +1,15 @@ +import { Page } from '@playwright/test'; + +export const simulateKeyPress = async ( + page: Page, + key: string, + count: number = 1, + waitDuration?: number +) => { + for (let i = 0; i < count; i++) { + await page.keyboard.press(key); + if (waitDuration && waitDuration > 0) { + await page.waitForTimeout(waitDuration); + } + } +}; From 7e06e15a23fa94265bd6f9b440afa0f20514f62a Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Wed, 4 Dec 2024 11:50:23 +0530 Subject: [PATCH 5/6] test: add a util method for keypress --- e2e/components/TagSet/TagSet-test.avt.e2e.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js index 3ae3eb971f..3473581541 100644 --- a/e2e/components/TagSet/TagSet-test.avt.e2e.js +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -164,24 +164,24 @@ test.describe('TagSet @avt', () => { }); const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); - simulateKeyPress(page, 'Tab'); + await simulateKeyPress(page, 'Tab'); await expect( page.getByRole('button', { name: 'Dismiss' }).first() ).toBeFocused(); - simulateKeyPress(page, 'Tab', 6); + await simulateKeyPress(page, 'Tab', 6); const moreTagsButton = page.locator( `.${pkg.prefix}--tag-set-overflow__popover-trigger` ); await expect(moreTagsButton).toBeFocused(); - simulateKeyPress(page, 'Enter'); + await simulateKeyPress(page, 'Enter'); await expect( page.locator(`.${carbon.prefix}--popover--open`) ).toBeVisible(); - simulateKeyPress(page, 'Tab'); + await simulateKeyPress(page, 'Tab'); //first tag inside popover is focussed await expect( page @@ -190,13 +190,13 @@ test.describe('TagSet @avt', () => { .first() ).toBeFocused(); - simulateKeyPress(page, 'Tab', 10); + await simulateKeyPress(page, 'Tab', 10); await expect( page.locator(`.${pkg.prefix}--tag-set-overflow__show-all-tags-link`) ).toBeFocused(); //view all tags modal link is focussed - simulateKeyPress(page, 'Enter'); + await simulateKeyPress(page, 'Enter'); await modalElement.evaluate((element) => Promise.all( @@ -205,9 +205,9 @@ test.describe('TagSet @avt', () => { ); await expect(page.getByRole('heading', { name: 'All tags' })).toBeVisible(); - simulateKeyPress(page, 'Tab'); + await simulateKeyPress(page, 'Tab'); - simulateKeyPress(page, 'Enter'); + await simulateKeyPress(page, 'Enter'); await expect(page.locator(`.${carbon.prefix}--modal`)).toBeHidden(); }); }); From 29679f751593ff2a533ac6cdfba38cfb3cd46132 Mon Sep 17 00:00:00 2001 From: Amal K Joy <153802538+amal-k-joy@users.noreply.github.com> Date: Thu, 5 Dec 2024 13:36:14 +0530 Subject: [PATCH 6/6] test: update copyright header --- e2e/test-utils/simulateKeyPress.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/e2e/test-utils/simulateKeyPress.ts b/e2e/test-utils/simulateKeyPress.ts index 7d48f2f020..9ccf0eb6c4 100644 --- a/e2e/test-utils/simulateKeyPress.ts +++ b/e2e/test-utils/simulateKeyPress.ts @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { Page } from '@playwright/test'; export const simulateKeyPress = async (