diff --git a/apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts b/apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts
index 6e44b045ab..ef2f657de0 100644
--- a/apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts
+++ b/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}">`;
};
-/**
- * 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`
Item ${i}`);
- }
-
- return html`
- Test Page
- Test copy
- `;
-};
-
-const ScrollablePageStoryTemplate = (props: CookieBannerProps) => html`
- ${BaseStoryTemplate(props)}
- ${createScrollablePageHTML()}`;
-
export const Default = createStory(BaseStoryTemplate, defaultArgs)();
-export const ScrollablePage = createStory(ScrollablePageStoryTemplate, defaultArgs)();
diff --git a/packages/components/pie-cookie-banner/playwright-lit-visual.config.ts b/packages/components/pie-cookie-banner/playwright-lit-visual.config.ts
index 437f457a26..2fd82d7d5f 100644
--- a/packages/components/pie-cookie-banner/playwright-lit-visual.config.ts
+++ b/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());
diff --git a/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts b/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts
index a30bd496e2..02ea6332bf 100644
--- a/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts
+++ b/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}`);
});
diff --git a/packages/components/pie-cookie-banner/turbo.json b/packages/components/pie-cookie-banner/turbo.json
new file mode 100644
index 0000000000..650d4d58b7
--- /dev/null
+++ b/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": []
+ }
+ }
+ }
\ No newline at end of file