test(pie-divider): DSW-2277 Divider visual test refactor

.percy.yml

@@ -2,3 +2,5 @@ version: 2
 discovery:
   disallowedHostnames:
     - unpkg.com
+  allowedHostnames:
+    - cloudfront.net

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<DividerProps>;
+
+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`
+        <web-component-test-wrapper propKeyValues="${propKeyValues}">
+            <div style="${orientation === 'vertical' ? 'height: 250px;' : ''}" slot="component">
+                <pie-divider
+                    variant="default"
+                    orientation="${orientation}" 
+                    label="${label}">
+                </pie-divider>
+            </div>
+        </web-component-test-wrapper>
+      `;
+})}
+`;
+
+export const Inverse = () => html`
+    ${propCombinations.map(({ variant, orientation, label }) => {
+    const propKeyValues = generatePropKeyValues({ variant, orientation, label });
+
+    return html`
+        <web-component-test-wrapper propKeyValues="${propKeyValues}" darkMode="${variant === 'inverse'}">
+            <div style="${orientation === 'vertical' ? 'height: 250px;' : ''}" slot="component">
+                <pie-divider
+                    variant="inverse"
+                    orientation="${orientation}" 
+                    label="${label}">
+                </pie-divider>
+            </div>
+        </web-component-test-wrapper>
+      `;
+})}
+`;

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",

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<boolean>} A Promise that resolves to a boolean value indicating
+     *                             whether the cookie banner is visible (`true`) or not (`false`).
+     */
+    async isDividerVisible () : Promise<boolean> {
+        return this.componentLocator.isVisible();
+    }
+}

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,
+};

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<DividerProps> = {
-    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 `
-            <div style="height: 250px">
-                <pie-divider variant="${variant}" orientation="${orientation}" label="${label}"></pie-divider>
-            </div>
-        `;
-    }
-    return `<pie-divider variant="${variant}" orientation="${orientation}" label="${label}"></pie-divider>`;
-};
+test.describe('PieDivider - Visual tests', () => {
+    test.beforeEach(async ({ page }) => {
+        pieDividerComponent = new DividerComponent(page);
+    });
 
-const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = 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);
-}));

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<string, unknown> = {}) {
-        const pageUrl = buildUrl(this.componentName, this.composePath(queries), this.args);
+    async load (queries: Record<string, unknown> = {}, 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;
     }