ci(pie-monorepo): DSW-2362 updated button test and ci percy debug

.github/workflows/ci.yml

@@ -46,9 +46,11 @@ env:
   PERCY_TOKEN_PIE_TEXTAREA: ${{ secrets.PERCY_TOKEN_PIE_TEXTAREA }}
   PERCY_TOKEN_PIE_TOAST: ${{ secrets.PERCY_TOKEN_PIE_TOAST }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  PERCY_DEBUG: "*"
+  LOG_LEVEL: debug
   PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS: true
-  PERCY_PAGE_LOAD_TIMEOUT: 60000
-  PERCY_NETWORK_IDLE_WAIT_TIMEOUT: 60000
+  PERCY_PAGE_LOAD_TIMEOUT: ${{ vars.PERCY_PAGE_LOAD_TIMEOUT }}
+  PERCY_NETWORK_IDLE_WAIT_TIMEOUT: ${{ vars.PERCY_NETWORK_IDLE_WAIT_TIMEOUT }}
 
 jobs:
   dependency-changeset:

.percy.yml

@@ -0,0 +1,4 @@
+version: 2
+discovery:
+  disallowedHostnames:
+    - unpkg.com

package.json

@@ -79,8 +79,8 @@
     "@justeattakeaway/pie-webc-testing": "0.13.3",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "@justeattakeaway/stylelint-config-pie": "0.7.0",
-    "@percy/cli": "1.28.8",
-    "@percy/playwright": "1.0.5",
+    "@percy/cli": "1.29.3",
+    "@percy/playwright": "1.0.6",
     "@playwright/experimental-ct-react": "1.41.0",
     "@playwright/test": "1.41.0",
     "@rollup/plugin-node-resolve": "15.1.0",

packages/components/pie-button/test/component/pie-button.spec.ts

@@ -15,7 +15,7 @@ const sizes: Array<SizeResponsiveSize> = [
     { sizeName: 'large', responsiveSize: '--btn-height--large' },
 ];
 
-test('should correctly work with native click events', async ({ mount }) => {
+test('should correctly work with native click event', async ({ mount }) => {
     const messages: string[] = [];
     const expectedEventMessage = 'Native event dispatched';
     const component = await mount(

packages/components/pie-button/test/visual/pie-button.spec.ts

@@ -26,7 +26,7 @@ const props: PropObject<ButtonProps> = {
     isFullWidth: [true, false],
     disabled: [true, false],
     isLoading: [true, false],
-    iconPlacement: [undefined, ...iconPlacements],
+    iconPlacement: iconPlacements,
 };
 
 // Renders a <pie-button> HTML string with the given prop values
@@ -47,25 +47,34 @@ test.beforeEach(async ({ mount }, testInfo) => {
     await iconComponent.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, renderTestPieButton);
-        const propKeyValues = `size: ${testComponent.propValues.size}, iconPlacement: ${testComponent.propValues.iconPlacement}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}, isLoading: ${testComponent.propValues.isLoading}`;
-        const darkMode = ['inverse', 'ghost-inverse', 'outline-inverse'].includes(variant);
+componentVariants.forEach((variant) => {
+    const componentPropsMatrixBySize = splitCombinationsByPropertyValue(componentPropsMatrixByVariant[variant], 'size');
+    const componentSizes: string[] = Object.keys(componentPropsMatrixBySize);
 
-        await mount(
-            WebComponentTestWrapper,
-            {
-                props: { propKeyValues, darkMode },
-                slots: {
-                    component: testComponent.renderedString.trim(),
-                },
-            },
-        );
-    }
+    componentSizes.forEach((size) => {
+        test(`should render all prop variations for Variant: ${variant} and Size: ${size}`, async ({ page, mount }) => {
+            const combos = componentPropsMatrixBySize[size];
 
-    // Follow up to remove in Jan
-    await page.waitForTimeout(2500);
+            for (const combo of combos) {
+                const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieButton);
+                const propKeyValues = `size: ${testComponent.propValues.size}, iconPlacement: ${testComponent.propValues.iconPlacement}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}, isLoading: ${testComponent.propValues.isLoading}`;
+                const darkMode = ['inverse', 'ghost-inverse', 'outline-inverse'].includes(variant);
 
-    await percySnapshot(page, `PIE Button - Variant: ${variant}`, percyWidths);
-}));
+                await mount(
+                    WebComponentTestWrapper,
+                    {
+                        props: { propKeyValues, darkMode },
+                        slots: {
+                            component: testComponent.renderedString.trim(),
+                        },
+                    },
+                );
+            }
+
+            await page.waitForLoadState('domcontentloaded');
+
+            const snapshotName = `PIE Button - Variant: ${variant} - Size: ${size}`;
+            await percySnapshot(page, snapshotName, percyWidths);
+        });
+    });
+});