test(pie-divider): DSW-2374 Refactored pie-divider to use page object TEST

apps/pie-storybook/stories/testing/pie-divider.test.stories.ts

@@ -0,0 +1,93 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-divider';
+import {
+    type DividerProps, variants, orientations, defaultProps,
+} from '@justeattakeaway/pie-divider';
+
+import { createStory, createVariantStory, type TemplateFunction } from '../../utilities';
+
+type DividerStoryMeta = Meta<DividerProps>;
+
+const defaultArgs: DividerProps = { ...defaultProps };
+
+const dividerStoryMeta: DividerStoryMeta = {
+    title: 'Divider',
+    component: 'pie-divider',
+    argTypes: {
+        variant: {
+            description: 'Set the variant of the divider. To change this, view the other story.',
+            control: { disable: true },
+            options: variants,
+            defaultValue: {
+                summary: defaultProps.variant,
+            },
+        },
+        label: {
+            description: 'The label text for the divider.',
+            control: {
+                type: 'text',
+                defaultValue: {
+                    summary: 'Label',
+                },
+            },
+        },
+        orientation: {
+            description: 'Set the orientation of the divider.',
+            control: 'select',
+            options: orientations,
+            defaultValue: {
+                summary: defaultProps.orientation,
+            },
+        },
+    },
+    args: defaultArgs,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?node-id=876-1227&node-type=CANVAS&t=v6qypWzZqWE6lPxm-0',
+        },
+    },
+};
+
+export default dividerStoryMeta;
+
+const Template : TemplateFunction<DividerProps> = ({ variant, label, orientation }) => html`
+            <div style="${orientation === 'horizontal' ? 'width' : 'height'}: 400px">
+                <pie-divider variant="${ifDefined(variant)}" orientation="${ifDefined(orientation)}" label="${ifDefined(label)}"></pie-divider>
+            </div>
+        `;
+
+const createDividerStory = createStory<DividerProps>(Template, defaultArgs);
+
+export const Default = createDividerStory();
+export const Inverse = createDividerStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' });
+export const Labelled = createDividerStory({ label: 'Label' });
+export const LargeTextContent = createDividerStory({ label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quas inventore quasi ullam, sed ab odio dicta, tempore' });
+
+const VariantsTemplate : TemplateFunction<DividerProps> = ({ variant, label, orientation }) => html`
+            <div style="${orientation === 'horizontal' ? 'width: auto' : 'height: 400px'}">
+                <pie-divider variant="${ifDefined(variant)}" orientation="${ifDefined(orientation)}" label="${ifDefined(label)}"></pie-divider>
+            </div>
+        `;
+
+const sharedPropOptions = {
+    orientation: ['horizontal', 'vertical'],
+    label: ['', 'Label', 'Lorem ipsum dolor sit amet consectetur'],
+};
+
+const defaultPropOptions = {
+    ...sharedPropOptions,
+    variant: ['default'],
+};
+
+const inversePropOptions = {
+    ...sharedPropOptions,
+    variant: ['inverse'],
+    darkBackground: ['true'],
+};
+
+export const DefaultPropVariations = createVariantStory(VariantsTemplate, defaultPropOptions);
+export const InversePropVariations = createVariantStory(VariantsTemplate, inversePropOptions);

apps/pie-storybook/utilities/index.ts

@@ -102,19 +102,33 @@ export const createVariantStory = <T>(
             const propCombinations = generateCombinations(propOptions);
 
             return html`
-          <div style="display: block; width: 100%;">
-              ${propCombinations.map((props) => html`
-                      <div style="border: 1px solid black; padding: 16px; margin-bottom: 16px; width: 100%; box-sizing: border-box;">
-                          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: monospace; background-color: #f9f9f9; padding: 8px; border-radius: 4px;">
-                              ${Object.entries(props as Record<string, unknown>).map(([key, value]) => html`
-                                      <div><strong>${key}:</strong> ${JSON.stringify(value)}</div>
-                                  `)}
-                          </div>
-                          <div style="margin-top: 16px; border: 2px dashed #aaa; padding: 8px; border-radius: 4px;">
-                              ${template({ ...props })}
-                          </div>
-                      </div>
-                  `)}
+            <div style="display: block; width: 100%;">
+                ${propCombinations.map((props) => {
+                // Type assertion to ensure darkBackground is recognized
+                const typedProps = props as T & { darkBackground?: boolean };
+
+                return html`
+                    <div style="border: 1px solid black; padding: 16px; margin-bottom: 16px; width: 100%; box-sizing: border-box;">
+                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: monospace; background-color: #f9f9f9; padding: 8px; border-radius: 4px;">
+                            ${Object.entries(typedProps).map(([key, value]) => html`
+                                <div><strong>${key}:</strong> ${JSON.stringify(value)}</div>
+                            `)}
+                        </div>
+                        <div
+                          style="
+                            margin-top: 16px;
+                            border: 2px dashed #aaa;
+                            padding: 8px;
+                            border-radius: 4px;
+                            background-color: ${typedProps.darkBackground ? '#333' : '#fff'};
+                            color: ${typedProps.darkBackground ? '#fff' : '#000'};
+                          "
+                        >
+                            ${template({ ...typedProps })}
+                        </div>
+                    </div>
+                  `;
+            })}
           </div>
         `;
         },
@@ -135,5 +149,5 @@ export const createVariantStory = <T>(
                 disable: true,
             },
         },
-        ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}),
+        ...(storyOpts?.argTypes ? { argTypes: storyOpts.argTypes } : {}),
     });

packages/components/pie-divider/playwright-lit-visual.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightVisualConfig());
+export default defineConfig(getPlaywrightNativeVisualConfig());

packages/components/pie-divider/playwright-lit.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightConfig());
+export default defineConfig(getPlaywrightNativeConfig());

packages/components/pie-divider/test/accessibility/pie-divider.spec.ts

@@ -1,9 +1,11 @@
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieDivider } from '../../src/index.ts';
+import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
+import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
 
 test.describe('PieDivider - Accessibility tests', () => {
-    test('a11y - should test the PieDivider component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
-        await mount(PieDivider);
+    test('a11y - should test the PieDivider component WCAG compliance', async ({ makeAxeBuilder, page }) => {
+        const dividerPage = new BasePage(page, 'divider');
+
+        await dividerPage.load();
 
         const results = await makeAxeBuilder().analyze();
 

packages/components/pie-divider/test/component/pie-divider.spec.ts

@@ -1,12 +1,14 @@
-import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieDivider, type DividerProps } from '../../src/index.ts';
+import { test, expect } from '@playwright/test';
+import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
 
 const componentSelector = '[data-test-id="pie-divider"]';
 
 test.describe('PieDivider - Component tests', () => {
-    test('should render successfully', async ({ mount, page }) => {
+    test('should render successfully', async ({ page }) => {
         // Arrange
-        await mount(PieDivider);
+        const dividerPage = new BasePage(page, 'divider');
+
+        await dividerPage.load();
 
         // Act
         const divider = page.locator(componentSelector);
@@ -15,33 +17,27 @@ test.describe('PieDivider - Component tests', () => {
         expect(divider).toBeVisible();
     });
 
-    test('should render the `label` if it is provided', async ({ mount }) => {
+    test('should render the `label` if it is provided', async ({ page }) => {
         // Arrange
-        const component = await mount(PieDivider, {
-            props: {
-                label: 'foo label',
-                orientation: 'horizontal',
-            } as DividerProps,
-        });
+        const dividerPage = new BasePage(page, 'divider');
+
+        await dividerPage.load({ label: 'foo label', orientation: 'horizontal' });
 
         // Act
-        const label = component.getByText('foo label');
+        const label = page.getByText('foo label');
 
         // Assert
         expect(label).toBeVisible();
     });
 
-    test('should NOT render the `label` if divider orientation is vertical', async ({ mount }) => {
+    test('should NOT render the `label` if divider orientation is vertical', async ({ page }) => {
         // Arrange
-        const component = await mount(PieDivider, {
-            props: {
-                label: 'foo label',
-                orientation: 'vertical',
-            } as DividerProps,
-        });
+        const dividerPage = new BasePage(page, 'divider');
+
+        await dividerPage.load({ label: 'foo label', orientation: 'vertical' });
 
         // Act
-        const label = component.getByText('foo label');
+        const label = page.getByText('foo label');
 
         // Assert
         expect(label).not.toBeVisible();

packages/components/pie-divider/test/visual/pie-divider.spec.ts

@@ -1,66 +1,13 @@
-import { test } from '@sand4rt/experimental-ct-web';
+import { test } from '@playwright/test';
 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 { 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 { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
+import { variants } from '../../src/defs.ts';
 
-const props: PropObject<DividerProps> = {
-    variant: variants,
-    orientation: orientations,
-    label: ['', 'Label', 'Lorem ipsum dolor sit amet consectetur'],
-};
+variants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page }) => {
+    const basePage = new BasePage(page, `divider--${variant}-prop-variations`);
 
-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>`;
-};
+    await basePage.load();
 
-const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
-const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
-
-test.beforeEach(async ({ mount }) => {
-    const component = await mount(PieDivider);
-    await component.unmount();
-});
-
-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);
+    await percySnapshot(page, `PIE Divider - Variant: ${variant}`, percyWidths);
 }));

packages/components/pie-divider/turbo.json

@@ -0,0 +1,24 @@
+{
+    "$schema": "https://turborepo.org/schema.json",
+    "extends": [
+      "//"
+    ],
+    "pipeline": {
+      "test:browsers": {
+        "cache": true,
+        "dependsOn": []
+      },
+      "test:browsers:ci": {
+        "cache": true,
+        "dependsOn": []
+    },
+    "test:visual": {
+        "cache": false,
+        "dependsOn": []
+      },
+      "test:visual:ci": {
+        "cache": false,
+        "dependsOn": []
+      }
+    }
+  }