From e225b64421bd8ce082944a2157f16c45bf3b556c Mon Sep 17 00:00:00 2001 From: Josh Ng Date: Wed, 6 Nov 2024 15:30:25 +0000 Subject: [PATCH] test(pie-divider): DSW-2277 added divider stories and supporting visual test code --- .percy.yml | 2 + .../stories/pie-divider-vt.stories.ts | 69 ++++++++++++++++++ packages/components/pie-divider/package.json | 2 +- .../helpers/page-object/pie-divider.page.ts | 22 ++++++ .../test/helpers/page-object/selectors.ts | 11 +++ .../test/visual/pie-divider.spec.ts | 71 ++++--------------- .../src/helpers/page-object/base-page.ts | 7 +- 7 files changed, 122 insertions(+), 62 deletions(-) create mode 100644 apps/pie-storybook/stories/pie-divider-vt.stories.ts create mode 100644 packages/components/pie-divider/test/helpers/page-object/pie-divider.page.ts create mode 100644 packages/components/pie-divider/test/helpers/page-object/selectors.ts diff --git a/.percy.yml b/.percy.yml index 12e00cfeda..675d5a4bb9 100644 --- a/.percy.yml +++ b/.percy.yml @@ -2,3 +2,5 @@ version: 2 discovery: disallowedHostnames: - unpkg.com + allowedHostnames: + - cloudfront.net \ No newline at end of file diff --git a/apps/pie-storybook/stories/pie-divider-vt.stories.ts b/apps/pie-storybook/stories/pie-divider-vt.stories.ts new file mode 100644 index 0000000000..a404061758 --- /dev/null +++ b/apps/pie-storybook/stories/pie-divider-vt.stories.ts @@ -0,0 +1,69 @@ +import { html } from 'lit'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts'; + +import { + type DividerProps, defaultProps, orientations, variants, +} from '@justeattakeaway/pie-divider'; + +import { getAllPropCombinations } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos'; + +const props = { + orientation: orientations, + label: ['', 'Label', 'Lorem ipsum dolor sit amet consectetur'], +}; + +type DividerStoryMeta = Meta; + +const defaultArgs: DividerProps = { ...defaultProps }; + +const visualTestStoryMeta: DividerStoryMeta = { + title: 'Divider/Visual Test', + component: 'pie-divider', + args: defaultArgs, + parameters: { + controls: { hideNoControlsWarning: true }, + }, +}; + +export default visualTestStoryMeta; + +const generatePropKeyValues = (props: DividerProps) => `orientation: ${props.orientation}, label: ${props.label || '-'}`; + +const propCombinations = getAllPropCombinations(props); + +export const Default = () => html` + ${propCombinations.map(({ variant, orientation, label }) => { + const propKeyValues = generatePropKeyValues({ variant, orientation, label }); + + return html` + +
+ + +
+ + `; +})} +`; + +export const Inverse = () => html` + ${propCombinations.map(({ variant, orientation, label }) => { + const propKeyValues = generatePropKeyValues({ variant, orientation, label }); + + return html` + +
+ + +
+ + `; +})} +`; diff --git a/packages/components/pie-divider/package.json b/packages/components/pie-divider/package.json index 1fc6427d9c..24bffda0f7 100644 --- a/packages/components/pie-divider/package.json +++ b/packages/components/pie-divider/package.json @@ -29,7 +29,7 @@ "test:browsers-setup": "npx playwright-lit-setup", "test:browsers": "npx playwright test -c ./playwright-lit.config.ts", "test:browsers:ci": "yarn test:browsers", - "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_DIVIDER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts", + "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_DIVIDER} percy exec -- npx playwright test -c ./playwright-lit-visual.config.ts", "test:visual:ci": "yarn test:visual" }, "author": "Just Eat Takeaway.com - Design System Team", diff --git a/packages/components/pie-divider/test/helpers/page-object/pie-divider.page.ts b/packages/components/pie-divider/test/helpers/page-object/pie-divider.page.ts new file mode 100644 index 0000000000..966aa81eda --- /dev/null +++ b/packages/components/pie-divider/test/helpers/page-object/pie-divider.page.ts @@ -0,0 +1,22 @@ +import { type Locator, type Page } from '@playwright/test'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; +import { divider } from './selectors'; + +export class DividerComponent extends BasePage { + private readonly componentLocator: Locator; + + constructor (page: Page) { + super(page, 'divider'); + this.componentLocator = page.getByTestId(divider.selectors.container.dataTestId); + } + + /** + * Checks whether the cookie banner is currently visible on the page. + * + * @returns {Promise} A Promise that resolves to a boolean value indicating + * whether the cookie banner is visible (`true`) or not (`false`). + */ + async isDividerVisible () : Promise { + return this.componentLocator.isVisible(); + } +} diff --git a/packages/components/pie-divider/test/helpers/page-object/selectors.ts b/packages/components/pie-divider/test/helpers/page-object/selectors.ts new file mode 100644 index 0000000000..c23b79ff3d --- /dev/null +++ b/packages/components/pie-divider/test/helpers/page-object/selectors.ts @@ -0,0 +1,11 @@ +const divider = { + selectors: { + container: { + description: 'The selector for the divider', + dataTestId: 'pie-divider', + }, + }, +}; +export { + divider, +}; diff --git a/packages/components/pie-divider/test/visual/pie-divider.spec.ts b/packages/components/pie-divider/test/visual/pie-divider.spec.ts index 3afff5cef4..27a0ed8f6d 100644 --- a/packages/components/pie-divider/test/visual/pie-divider.spec.ts +++ b/packages/components/pie-divider/test/visual/pie-divider.spec.ts @@ -1,66 +1,19 @@ -import { test } from '@sand4rt/experimental-ct-web'; +import { test } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts'; import percySnapshot from '@percy/playwright'; -import { - type PropObject, type WebComponentPropValues, type WebComponentTestInput, -} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts'; -import { - getAllPropCombinations, splitCombinationsByPropertyValue, -} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts'; -import { - createTestWebComponent, -} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts'; -import { - WebComponentTestWrapper, -} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts'; +import { DividerComponent } from 'test/helpers/page-object/pie-divider.page.ts'; import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts'; -import { variants, orientations, type DividerProps } from '../../src/defs.ts'; -import { PieDivider } from '../../src/index.ts'; +import { variants } from '../../src/defs.ts'; -const props: PropObject = { - variant: variants, - orientation: orientations, - label: ['', 'Label', 'Lorem ipsum dolor sit amet consectetur'], -}; +let pieDividerComponent: DividerComponent; -const renderTestPieDivider = (propVals: WebComponentPropValues) => { - const { variant, orientation, label } = propVals; - if (orientation === 'vertical') { - return ` -
- -
- `; - } - return ``; -}; +test.describe('PieDivider - Visual tests', () => { + test.beforeEach(async ({ page }) => { + pieDividerComponent = new DividerComponent(page); + }); -const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props); -const componentPropsMatrixByVariant: Record = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant'); -const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant); + variants.forEach((variant) => test(`should render all prop variations for variant: ${variant} `, async ({ page }) => { + await pieDividerComponent.load({}, variant); -test.beforeEach(async ({ mount }) => { - const component = await mount(PieDivider); - await component.unmount(); + await percySnapshot(page, `PIE Divider - variant: ${variant}`, percyWidths); + })); }); - -componentVariants.forEach((variant) => test(`should render all prop variations for variant: ${variant} `, async ({ - page, - mount, -}) => { - for (const combo of componentPropsMatrixByVariant[variant]) { - const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieDivider); - const propKeyValues = `orientation: ${testComponent.propValues.orientation}, label: ${testComponent.propValues.label || '-'}`; - - await mount( - WebComponentTestWrapper, - { - props: { propKeyValues, darkMode: variant === 'inverse' }, - slots: { - component: testComponent.renderedString.trim(), - }, - }, - ); - } - - await percySnapshot(page, `PIE Divider - variant: ${variant}`, percyWidths); -})); diff --git a/packages/components/pie-webc-testing/src/helpers/page-object/base-page.ts b/packages/components/pie-webc-testing/src/helpers/page-object/base-page.ts index a28a74bf68..c9d8c8e4fb 100644 --- a/packages/components/pie-webc-testing/src/helpers/page-object/base-page.ts +++ b/packages/components/pie-webc-testing/src/helpers/page-object/base-page.ts @@ -20,13 +20,16 @@ export class BasePage { this.args = ''; } - async load (queries: Record = {}) { - const pageUrl = buildUrl(this.componentName, this.composePath(queries), this.args); + async load (queries: Record = {}, variant?: string) { + const path = variant ? `-visual-test--${variant}` : this.composePath(queries); + + const pageUrl = buildUrl(this.componentName, path, this.args); await this.open(pageUrl); } async open (url: string) { await this.page.goto(url, { waitUntil: 'networkidle' }); + await this.page.evaluate(() => document.fonts.ready); return this; }