Skip to content

Commit

Permalink
test(pie-link): DSW-2229 updated visual tests to split by size (#1952)
Browse files Browse the repository at this point in the history
* test(pie-link): DSW-2229 updated visual tests to split by size

* chore(pie-link): DSW-2229 removed changeset
  • Loading branch information
JoshuaNg2332 authored Oct 1, 2024
1 parent 3bb5cfd commit 8710b68
Showing 1 changed file with 32 additions and 20 deletions.
52 changes: 32 additions & 20 deletions packages/components/pie-link/test/visual/pie-link.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const props: PropObject<LinkProps> = {
isBold: [true, false],
isStandalone: [true, false],
hasVisited: [true, false],
iconPlacement: [undefined, ...iconPlacements],
iconPlacement: iconPlacements,
};

const renderTestPieLink = (propVals: WebComponentPropValues) => `<pie-link tag="${propVals.tag}" variant="${propVals.variant}" size="${propVals.size}" underline="${propVals.underline}" iconPlacement="${propVals.iconPlacement}" href="${propVals.href}" ${propVals.isBold ? 'isBold' : ''} ${propVals.hasVisited ? 'hasVisited' : ''} ${propVals.isStandalone ? 'isStandalone' : ''}>${propVals.iconPlacement ? '<icon-heart-filled slot="icon"></icon-heart-filled>' : ''} Link</pie-link>`;
Expand All @@ -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);
});
});
});

0 comments on commit 8710b68

Please sign in to comment.