From fff7f65456f02ba18ab46fc09c9a6de8717f6b7c Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 29 Aug 2024 10:57:01 +0200 Subject: [PATCH] Preparatory refactor for snapshot testing for #4794 (#4886) * refactor snapshot tests with scenarios * remove feature flag for main --- e2e/components/SelectPanel.test.ts | 470 +++-------------------------- 1 file changed, 49 insertions(+), 421 deletions(-) diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts index 50c7cb5a457..88d2e69c111 100644 --- a/e2e/components/SelectPanel.test.ts +++ b/e2e/components/SelectPanel.test.ts @@ -1,432 +1,60 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' +import {matrix} from '../test-helpers/matrix' + +const scenarios = matrix({ + theme: themes, + story: [ + {id: 'components-selectpanel--default', name: 'Default'}, + {id: 'components-selectpanel-features--single-select', name: 'Single Select'}, + {id: 'components-selectpanel-features--with-external-anchor', name: 'External Anchor'}, + {id: 'components-selectpanel-features--with-footer', name: 'With Footer'}, + {id: 'components-selectpanel-features--with-groups', name: 'With Groups'}, + {id: 'components-selectpanel-features--with-item-dividers', name: 'With Item Dividers'}, + { + id: 'components-selectpanel-features--with-placeholder-for-seach-input', + name: 'With Placeholder for Search Input', + }, + {id: 'components-selectpanel-features--with-placeholder-select', name: 'With Placeholder Select'}, + {id: 'components-selectpanel-examples--above-tall-body', name: 'Above Tall Body'}, + {id: 'components-selectpanel-examples--height-variantions-and-scroll', name: 'Height Variantions and Scroll'}, + { + id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', + name: 'Height Initial with Overflowing Items', + }, + { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', + name: 'Height Initial with Underflowing Items', + }, + { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', + name: 'Height Initial with Underflowing Items After Fetch', + }, + ], +}) test.describe('SelectPanel', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel--default', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Single Select', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--single-select', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Single Select.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--single-select', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('With External Anchor', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-external-anchor', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.External Anchor.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-external-anchor', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) + for (const scenario of scenarios) { + const name = scenario.story.name + const theme = scenario.theme - test.describe('With Footer', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-footer', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.With Footer.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-footer', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('With Groups', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-groups', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.With Groups.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-groups', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) + const globals = { + colorScheme: scenario.theme, } - }) - test.describe('With Item Dividers', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-item-dividers', - globals: { - colorScheme: theme, - }, - }) + test(`${name} @vrt ${theme}`, async ({page}) => { + await visit(page, {id: scenario.story.id, globals}) - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.With Item Dividers.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-item-dividers', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('With Placeholder for Search Input', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-placeholder-for-seach-input', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.With Placeholder for Search Input.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-placeholder-for-seach-input', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}.png`) + }) - test.describe('With Placeholder Select', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-placeholder-select', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.With Placeholder Select.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-features--with-placeholder-select', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Above Tall Body', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--above-tall-body', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Above Tall Body.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--above-tall-body', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Height Variantions and Scroll', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-variantions-and-scroll', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Height Variantions and Scroll.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-variantions-and-scroll', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Height Initial with Overflowing Items', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Height Initial with Overflowing Items.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Height Initial with Underflowing Items', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Height Initial with Underflowing Items.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Height Initial with Underflowing Items After Fetch', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', - globals: { - colorScheme: theme, - }, - }) - - // Open select panel - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `SelectPanel.Height Initial with Underflowing Items After Fetch.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) + test(`${name} axe @aat ${theme}`, async ({page}) => { + await visit(page, {id: scenario.story.id, globals}) + await expect(page).toHaveNoViolations() + }) + } })