test(pie-cookie-banner): DSW-2387 updated visual test refactors

apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts

@@ -17,9 +17,9 @@ const defaultArgs: CookieBannerProps = {
     cookieTechnologiesLink: `${Language.ENGLISH}/technologies`,
     cookieStatementLink: `${Language.ENGLISH}/cookiestatement`,
     defaultPreferences: {
-        functional: true,
-        personalized: true,
-        analytical: true,
+        functional: false,
+        personalized: false,
+        analytical: false,
     },
 };
 
@@ -92,24 +92,4 @@ const BaseStoryTemplate = (props: CookieBannerProps) => {
             @pie-cookie-banner-prefs-saved="${prefsSavedAction}"></pie-cookie-banner>`;
 };
 
-/**
- * Creates a 'page' of scrollable HTML. Useful for testing scroll behaviours in a Story.
- */
-const createScrollablePageHTML = () => {
-    const items = [];
-    for (let i = 0; i < 200; i++) {
-        items.push(html`<li>Item ${i}</li>`);
-    }
-
-    return html`
-        <h1>Test Page</h1>
-        <p>Test copy</p>
-        <ul>${items}</ul>`;
-};
-
-const ScrollablePageStoryTemplate = (props: CookieBannerProps) => html`
-    ${BaseStoryTemplate(props)}
-    ${createScrollablePageHTML()}`;
-
 export const Default = createStory<CookieBannerProps>(BaseStoryTemplate, defaultArgs)();
-export const ScrollablePage = createStory<CookieBannerProps>(ScrollablePageStoryTemplate, defaultArgs)();

packages/components/pie-cookie-banner/playwright-lit-visual.config.ts

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

packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts

@@ -1,30 +1,36 @@
-import { test } from '@sand4rt/experimental-ct-web';
+import { test } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
+import { CookieBannerComponent } from 'test/helpers/page-object/pie-cookie-banner.page.ts';
 import percySnapshot from '@percy/playwright';
 
-import { PieCookieBanner, type CookieBannerProps } from '../../src/index.ts';
-
-const managePrefsSelector = '[data-test-id="actions-manage-prefs"]';
+let pieCookieBannerComponent: CookieBannerComponent;
 
 test.describe('PieCookieBanner - Visual tests`', () => {
-    test('should display the PieCookieBanner component successfully', async ({ page, mount }) => {
-        await mount(PieCookieBanner);
+    test.beforeEach(async ({ page }) => {
+        pieCookieBannerComponent = new CookieBannerComponent(page);
+    });
+
+    test('should display the PieCookieBanner component successfully', async ({ page }) => {
+        await pieCookieBannerComponent.load();
 
         await percySnapshot(page, 'PieCookieBanner - Visual Test');
     });
 
-    test('should display the manage preferences modal after clicking `"Manage preferences"`', async ({ page, mount }) => {
-        await mount(PieCookieBanner);
+    test('should display the manage preferences modal after clicking `"Manage preferences"`', async ({ page }) => {
+        await pieCookieBannerComponent.load();
 
-        await page.click(managePrefsSelector);
+        await pieCookieBannerComponent.clickManagePreferencesAction();
+
+        // This fixes modal being pushed down in screenshots
+        await page.$eval('dialog', (el) => {
+            el.style.top = '20px';
+        });
 
         await percySnapshot(page, 'PieCookieBanner Manage preferences - Visual Test');
     });
 
     [true, false].forEach((hasPrimaryActionsOnly) => {
-        test(`should display the correct button variants for hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`, async ({ mount, page }) => {
-            await mount(PieCookieBanner, {
-                props: { hasPrimaryActionsOnly } as CookieBannerProps,
-            });
+        test(`should display the correct button variants for hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`, async ({ page }) => {
+            await pieCookieBannerComponent.load({ hasPrimaryActionsOnly });
 
             await percySnapshot(page, `PieCookieBanner hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`);
         });

packages/components/pie-cookie-banner/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": []
+      }
+    }
+  }