diff --git a/packages/components/pie-link/test/visual/pie-link.spec.ts b/packages/components/pie-link/test/visual/pie-link.spec.ts index d80a144aa4..06360ef871 100644 --- a/packages/components/pie-link/test/visual/pie-link.spec.ts +++ b/packages/components/pie-link/test/visual/pie-link.spec.ts @@ -28,7 +28,7 @@ const props: PropObject = { isBold: [true, false], isStandalone: [true, false], hasVisited: [true, false], - iconPlacement: [undefined, ...iconPlacements], + iconPlacement: iconPlacements, }; const renderTestPieLink = (propVals: WebComponentPropValues) => `${propVals.iconPlacement ? '' : ''} Link`; @@ -48,24 +48,36 @@ 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 = createTestWebComponent(combo, renderTestPieLink); - const propKeyValues = ` - tag: ${testComponent.propValues.tag}, - size: ${testComponent.propValues.size}, - iconPlacement: ${testComponent.propValues.iconPlacement}, - isBold: ${testComponent.propValues.isBold}, - isStandalone: ${testComponent.propValues.isStandalone}, - href: ${testComponent.propValues.href}`; +componentVariants.forEach((variant) => { + const componentPropsMatrixBySize = splitCombinationsByPropertyValue(componentPropsMatrixByVariant[variant], 'size'); + const componentSizes: string[] = Object.keys(componentPropsMatrixBySize); - await mount(WebComponentTestWrapper, { - props: { propKeyValues, darkMode: variant === 'inverse' }, - 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]; + + for (const combo of combos) { + const testComponent = createTestWebComponent(combo, renderTestPieLink); + const propKeyValues = ` + tag: ${testComponent.propValues.tag}, + size: ${testComponent.propValues.size}, + iconPlacement: ${testComponent.propValues.iconPlacement}, + isBold: ${testComponent.propValues.isBold}, + isStandalone: ${testComponent.propValues.isStandalone}, + href: ${testComponent.propValues.href}`; + + await mount(WebComponentTestWrapper, { + props: { propKeyValues, darkMode: variant === 'inverse' }, + slots: { + component: testComponent.renderedString.trim(), + }, + }); + } - await percySnapshot(page, `PIE Link - Variant: ${variant}`, percyWidths); -})); + await page.waitForLoadState('domcontentloaded'); + + const snapshotName = `PIE Link - Variant: ${variant} - Size: ${size}`; + await percySnapshot(page, snapshotName, percyWidths); + }); + }); +});