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