test(pie-thumbnail): DSW-2580 update visual tests

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

@@ -1,34 +1,46 @@
 import { html } from 'lit';
-import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-thumbnail';
 import { type ThumbnailProps } from '@justeattakeaway/pie-thumbnail';
 
-import { createStory } from '../../utilities';
+import { type Meta } from '@storybook/web-components';
+import { createVariantStory, type TemplateFunction } from '../../utilities';
 
 type ThumbnailStoryMeta = Meta<ThumbnailProps>;
 
-const defaultArgs: ThumbnailProps = {};
-
 const thumbnailStoryMeta: ThumbnailStoryMeta = {
     title: 'Thumbnail',
     component: 'pie-thumbnail',
-    argTypes: {},
-    args: defaultArgs,
-    parameters: {
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
 };
 
 export default thumbnailStoryMeta;
 
-// TODO: remove the eslint-disable rule when props are added
-// eslint-disable-next-line no-empty-pattern
-const Template = ({}: ThumbnailProps) => html`
-    <pie-thumbnail></pie-thumbnail>
-`;
+const Template: TemplateFunction<ThumbnailProps> = ({
+    variant,
+    src,
+    alt,
+}) => html`
+    <pie-thumbnail
+        variant="${variant}"
+        src="${src}"
+        alt="${alt}">
+    </pie-thumbnail>`;
+
+// Define the prop options for the matrix
+const sharedPropOptions = {
+    src: ['https://www.takeaway.com/consumer-web/images/takeaway-brand.61e55e0b.svg'],
+    alt: ['JET logo'],
+};
+
+const defaultPropOptions = {
+    ...sharedPropOptions,
+    variant: ['default'],
+};
+
+const outlinePropOptions = {
+    ...sharedPropOptions,
+    variant: ['outline'],
+};
 
-export const Default = createStory<ThumbnailProps>(Template, defaultArgs)();
+export const DefaultPropVariations = createVariantStory<ThumbnailProps>(Template, defaultPropOptions);
+export const OutlinePropVariations = createVariantStory<ThumbnailProps>(Template, outlinePropOptions);

packages/components/pie-thumbnail/src/thumbnail.scss

@@ -10,7 +10,7 @@
   --tn-border-color: var(--dt-color-border-default);
 
   // ************************
-  // Button Variant Modifiers
+  // Thumbnail Variant Modifiers
   // ************************
   &.o-tn--default, &.o-tn--outline {
     // as default state properties apply for all other states, should we have only sizing classes and

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

@@ -1,60 +1,15 @@
-import { test } from '@sand4rt/experimental-ct-web';
+import { test } from '@playwright/test';
 import percySnapshot from '@percy/playwright';
-import { type PropObject, type WebComponentPropValues } 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 } from '@justeattakeaway/pie-thumbnail/src';
-import { PieThumbnail } 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 = {
-    variant: variants,
-    src: 'https://www.takeaway.com/consumer-web/images/takeaway-brand.61e55e0b.svg',
-    alt: 'JET logo',
-};
+variants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page }) => {
+    const basePage = new BasePage(page, `thumbnail--${variant}-prop-variations`);
 
-// Renders a <pie-thumbnail> HTML string with the given prop values
-const renderTestPieThumbnail = (propVals: WebComponentPropValues) => `<pie-thumbnail variant="${propVals.variant}" src="${propVals.src}" alt="${propVals.alt}"></pie-thumbnail>`;
+    basePage.load();
 
-const componentPropsMatrix = getAllPropCombinations(props);
-const componentPropsMatrixByVariant = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
-const componentVariants = Object.keys(componentPropsMatrixByVariant);
+    await page.waitForTimeout(5000);
 
-// This ensures the component is registered in the DOM for each test
-// This is not required if your tests mount the web component directly in the tests
-test.beforeEach(async ({ mount }, testInfo) => {
-    testInfo.setTimeout(testInfo.timeout + 40000);
-
-    const component = await mount(PieThumbnail);
-    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 = createTestWebComponent(combo, renderTestPieThumbnail);
-        const propKeyValues = `
-            variant: ${testComponent.propValues.variant},
-            src: ${testComponent.propValues.src},
-            alt: ${testComponent.propValues.alt}
-        `;
-
-        await mount(
-            WebComponentTestWrapper,
-            {
-                props: { propKeyValues },
-                slots: {
-                    component: testComponent.renderedString.trim(),
-                },
-            },
-        );
-    }
-
-    await percySnapshot(page, `PieThumbnail - Variant: ${variant}`, percyWidths);
+    await percySnapshot(page, `PIE Thumbnail - Variant: ${variant}`, percyWidths);
 }));