Skip to content

Commit 9f209be

Browse files
author
Ben Siggery
committed
chip visual test to use storybook
1 parent 83fc529 commit 9f209be

File tree

7 files changed

+66
-71
lines changed

7 files changed

+66
-71
lines changed

‎apps/pie-storybook/.storybook/styles/component-status.scss

+4
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,7 @@
1919
.c-componentStatus--top {
2020
inset-block-start: var(--dt-spacing-c);
2121
}
22+
23+
.percyHidden {
24+
display: none;
25+
}

‎apps/pie-storybook/decorators/component-status.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const ComponentStatus = (story: () => TemplateResult, storybookContext: S
2626
<div class="pie-sb-status-wrapper">
2727
${story()}
2828
29-
<div class="${`c-componentStatus ${positionClass}`}">
29+
<div class="${`c-componentStatus ${positionClass} percyHidden`}">
3030
<pie-tag variant="${tagVariant}">
3131
Status: ${componentStatus}
3232
<a

‎apps/pie-storybook/stories/pie-chip.stories.ts

+19-3
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,7 @@ export const Outline = createChipStory({ variant: 'outline' });
128128
export const Ghost = createChipStory({ variant: 'ghost' });
129129

130130
// Define the prop options for the matrix
131-
const propOptions = {
132-
variant: [...variants],
131+
const sharedPropOptions = {
133132
disabled: [true, false],
134133
isSelected: [true, false],
135134
isLoading: [true, false],
@@ -139,4 +138,21 @@ const propOptions = {
139138
slot: ['Hello World'],
140139
};
141140

142-
export const AllPropVariations = createVariantStory<ChipProps>(Template, propOptions);
141+
const defaultPropOptions = {
142+
...sharedPropOptions,
143+
variant: ['default'],
144+
};
145+
146+
const ghostPropOptions = {
147+
...sharedPropOptions,
148+
variant: ['ghost'],
149+
};
150+
151+
const outlinePropOptions = {
152+
...sharedPropOptions,
153+
variant: ['outline'],
154+
};
155+
156+
export const DefaultPropVariations = createVariantStory<ChipProps>(Template, defaultPropOptions);
157+
export const GhostPropVariations = createVariantStory<ChipProps>(Template, ghostPropOptions);
158+
export const OutlinePropVariations = createVariantStory<ChipProps>(Template, outlinePropOptions);

‎apps/pie-storybook/utilities/index.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,18 @@ export const createVariantStory = <T>(
122122
backgrounds: {
123123
...(storyOpts?.bgColor ? { default: storyOpts.bgColor } : {}),
124124
},
125-
controls: { ...(storyOpts?.controls ? storyOpts.controls : {}) },
126-
...(storyOpts?.layout ? { layout: storyOpts?.layout || 'centered' } : {}),
125+
controls: {
126+
disable: true,
127+
},
128+
design: {
129+
disable: true,
130+
},
131+
actions: {
132+
disable: true,
133+
},
134+
a11y: {
135+
disable: true,
136+
},
127137
},
128-
...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}),
138+
// ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}),
129139
});

‎packages/components/pie-chip/test/visual/pie-chip.spec.ts

+5-62
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,13 @@
1-
import { test } from '@sand4rt/experimental-ct-web';
1+
import { test } from '@playwright/test';
22
import percySnapshot from '@percy/playwright';
3-
import type {
4-
PropObject, WebComponentPropValues, WebComponentTestInput,
5-
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
6-
import {
7-
getAllPropCombinations, splitCombinationsByPropertyValue,
8-
} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
9-
import {
10-
createTestWebComponent,
11-
} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
12-
import {
13-
WebComponentTestWrapper,
14-
} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
153
import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts';
16-
import { IconHeartFilled } from '@justeattakeaway/pie-icons-webc';
174
import { variants } from '../../src/defs.ts';
18-
import { PieChip } from '../../src/index.ts';
5+
import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
196

20-
const props: PropObject = {
21-
variant: variants,
22-
disabled: [true, false],
23-
isSelected: [true, false],
24-
isLoading: [true, false],
25-
isDismissible: [true, false],
26-
iconSlot: ['', '<icon-heart-filled slot="icon"></icon-heart-filled>'],
27-
};
7+
variants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page }) => {
8+
let basePage = new BasePage(page, `chip--${variant}-prop-variations`);
289

29-
// Renders a <pie-chip> HTML string with the given prop values
30-
const renderTestPieChip = (propVals: WebComponentPropValues) => `<pie-chip variant="${propVals.variant}" ${propVals.isDismissible ? 'isDismissible' : ''} ${propVals.isLoading ? 'isLoading' : ''} ${propVals.isSelected ? 'isSelected' : ''} ${propVals.disabled ? 'disabled' : ''}>${propVals.iconSlot} Hello world</pie-chip>`;
31-
32-
const componentPropsMatrix: WebComponentPropValues[] = getAllPropCombinations(props);
33-
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
34-
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
35-
36-
test.beforeEach(async ({ mount }, testInfo) => {
37-
testInfo.setTimeout(testInfo.timeout + 40000);
38-
39-
// This ensures the chip and icon components are registered in the DOM for each test.
40-
// It appears to add them to a Playwright cache which we understand is required for the tests to work correctly.
41-
const chipComponent = await mount(PieChip);
42-
await chipComponent.unmount();
43-
const iconComponent = await mount(IconHeartFilled);
44-
await iconComponent.unmount();
45-
});
46-
47-
componentVariants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
48-
for (const combo of componentPropsMatrixByVariant[variant]) {
49-
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieChip);
50-
const propKeyValues = `
51-
variant: ${testComponent.propValues.variant},
52-
isSelected: ${testComponent.propValues.isSelected},
53-
isLoading: ${testComponent.propValues.isLoading},
54-
isDismissible: ${testComponent.propValues.isDismissible},
55-
disabled: ${testComponent.propValues.disabled},
56-
iconSlot: ${testComponent.propValues.iconSlot ? 'with icon' : 'no icon'}`;
57-
58-
await mount(
59-
WebComponentTestWrapper,
60-
{
61-
props: { propKeyValues },
62-
slots: {
63-
component: testComponent.renderedString.trim(),
64-
},
65-
},
66-
);
67-
}
10+
basePage.load();
6811

6912
// Follow up to remove in Jan
7013
await page.waitForTimeout(5000);

‎packages/components/pie-chip/turbo.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://turborepo.org/schema.json",
3+
"extends": [
4+
"//"
5+
],
6+
"pipeline": {
7+
"test:visual": {
8+
"cache": false,
9+
"dependsOn": []
10+
},
11+
"test:visual:ci": {
12+
"cache": false,
13+
"dependsOn": []
14+
}
15+
}
16+
}

‎packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
export const buildUrl = (componentName: string, path: string, args: string) => {
22
const prNumber = process.env.PR_NUMBER;
3-
const baseURL = process.env.CI ? `https://pr${prNumber}-storybook.pie.design` : 'http://localhost:6006';
3+
const branch = process.env.GITHUB_REF;
4+
5+
const baseURL = process.env.CI
6+
? branch === 'refs/heads/main'
7+
? 'https://webc-testing.pie.design'
8+
: `https://pr${prNumber}-storybook-testing.pie.design`
9+
: 'http://localhost:6006';
410

5-
let url = `${baseURL}/iframe.html?id=${componentName}${path}`;
11+
let url = `${baseURL}/iframe.html?id=${componentName}${path ? path : ''}`;
612

713
if (args) {
814
url += `&args=${args}`;

0 commit comments

Comments
 (0)