test(pie-button): DSW-2226 Split PIE Button visual tests by sizes (#1950

) * test(pie-button): DSW-2226 split visual tests by sizes * chore(pie-button): DSW-2226 removed changeset file
justeattakeaway · Sep 30, 2024 · b34181e · b34181e
1 parent d7fcd61
commit b34181e
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/packages/components/pie-button/test/visual/pie-button.spec.ts b/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);
+        });
+    });
+});