From 277d1af3009e9254323282d7d990934be3895773 Mon Sep 17 00:00:00 2001 From: Josh Ng Date: Thu, 2 Jan 2025 16:35:40 +0000 Subject: [PATCH] chore(pie-divider): DSW-2374 reset head --- .../testing/pie-divider.test.stories.ts | 93 +++++++++++++++++++ apps/pie-storybook/utilities/index.ts | 42 ++++++--- .../playwright-lit-visual.config.ts | 6 +- .../pie-divider/playwright-lit.config.ts | 6 +- .../test/accessibility/pie-divider.spec.ts | 10 +- .../test/component/pie-divider.spec.ts | 36 ++++--- .../test/visual/pie-divider.spec.ts | 67 ++----------- packages/components/pie-divider/turbo.json | 24 +++++ 8 files changed, 180 insertions(+), 104 deletions(-) create mode 100644 apps/pie-storybook/stories/testing/pie-divider.test.stories.ts create mode 100644 packages/components/pie-divider/turbo.json diff --git a/apps/pie-storybook/stories/testing/pie-divider.test.stories.ts b/apps/pie-storybook/stories/testing/pie-divider.test.stories.ts new file mode 100644 index 0000000000..db7208cf14 --- /dev/null +++ b/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; + +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 = ({ variant, label, orientation }) => html` +
+ +
+ `; + +const createDividerStory = createStory(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 = ({ variant, label, orientation }) => html` +
+ +
+ `; + +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); diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index c973c46033..de67e4d65e 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -102,19 +102,33 @@ export const createVariantStory = ( const propCombinations = generateCombinations(propOptions); return html` -
- ${propCombinations.map((props) => html` -
-
- ${Object.entries(props as Record).map(([key, value]) => html` -
${key}: ${JSON.stringify(value)}
- `)} -
-
- ${template({ ...props })} -
-
- `)} +
+ ${propCombinations.map((props) => { + // Type assertion to ensure darkBackground is recognized + const typedProps = props as T & { darkBackground?: boolean }; + + return html` +
+
+ ${Object.entries(typedProps).map(([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ `)} +
+
+ ${template({ ...typedProps })} +
+
+ `; + })}
`; }, @@ -135,5 +149,5 @@ export const createVariantStory = ( disable: true, }, }, - ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), + ...(storyOpts?.argTypes ? { argTypes: storyOpts.argTypes } : {}), }); diff --git a/packages/components/pie-divider/playwright-lit-visual.config.ts b/packages/components/pie-divider/playwright-lit-visual.config.ts index fb0f14c480..2fd82d7d5f 100644 --- a/packages/components/pie-divider/playwright-lit-visual.config.ts +++ b/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()); diff --git a/packages/components/pie-divider/playwright-lit.config.ts b/packages/components/pie-divider/playwright-lit.config.ts index e50b9373b3..6dcc0f833d 100644 --- a/packages/components/pie-divider/playwright-lit.config.ts +++ b/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()); diff --git a/packages/components/pie-divider/test/accessibility/pie-divider.spec.ts b/packages/components/pie-divider/test/accessibility/pie-divider.spec.ts index be8bab5fad..e55be07836 100644 --- a/packages/components/pie-divider/test/accessibility/pie-divider.spec.ts +++ b/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(); diff --git a/packages/components/pie-divider/test/component/pie-divider.spec.ts b/packages/components/pie-divider/test/component/pie-divider.spec.ts index d294f1454d..bfcef499fd 100644 --- a/packages/components/pie-divider/test/component/pie-divider.spec.ts +++ b/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(); diff --git a/packages/components/pie-divider/test/visual/pie-divider.spec.ts b/packages/components/pie-divider/test/visual/pie-divider.spec.ts index 3afff5cef4..72344ce3c4 100644 --- a/packages/components/pie-divider/test/visual/pie-divider.spec.ts +++ b/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 = { - 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 ` -
- -
- `; - } - return ``; -}; + await basePage.load(); -const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props); -const componentPropsMatrixByVariant: Record = 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); })); diff --git a/packages/components/pie-divider/turbo.json b/packages/components/pie-divider/turbo.json new file mode 100644 index 0000000000..650d4d58b7 --- /dev/null +++ b/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": [] + } + } + } \ No newline at end of file