diff --git a/jest.conf/visual.testUtils.js b/jest.conf/visual.testUtils.js index b3c2a97c2..1ed0dbde4 100644 --- a/jest.conf/visual.testUtils.js +++ b/jest.conf/visual.testUtils.js @@ -41,9 +41,9 @@ export async function renderComponent(component, props, slots = {}) { global.expect(isComponentRendered).toBe(true); } -export async function takeSnapshot(name) { +export async function takeSnapshot(name, options = {}) { if (process.env.TEST_TYPE == 'visual') { - await percySnapshot(page, name); + await percySnapshot(page, name, options); } } diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js index c8cb555f2..826833106 100644 --- a/lib/buttons-and-links/__tests__/KButton.spec.js +++ b/lib/buttons-and-links/__tests__/KButton.spec.js @@ -79,31 +79,31 @@ describe('KButton', () => { primary: true, appearance: 'raised-button', }); - await takeSnapshot('KButton - Primary Raised Button'); + await takeSnapshot('KButton - Primary Raised Button', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Raised Button', primary: false, appearance: 'raised-button', }); - await takeSnapshot('KButton - Secondary Raised Button'); + await takeSnapshot('KButton - Secondary Raised Button', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Flat Button', primary: true, appearance: 'flat-button', }); - await takeSnapshot('KButton - Primary Flat Button'); + await takeSnapshot('KButton - Primary Flat Button', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Flat Button', primary: false, appearance: 'flat-button', }); - await takeSnapshot('KButton - Secondary Flat Button'); + await takeSnapshot('KButton - Secondary Flat Button', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Basic Link', appearance: 'basic-link' }); - await takeSnapshot('KButton - Basic Link'); + await takeSnapshot('KButton - Basic Link', { widths: [400], minHeight: 512 }); }); it('renders correctly when disabled', async () => { await renderComponent('KButton', { @@ -111,32 +111,32 @@ describe('KButton', () => { disabled: true, appearance: 'raised-button', }); - await takeSnapshot('KButton - Disabled Raised Button'); + await takeSnapshot('KButton - Disabled Raised Button', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Flat Button', disabled: true, appearance: 'flat-button', }); - await takeSnapshot('KButton - Disabled Flat Button'); + await takeSnapshot('KButton - Disabled Flat Button', { widths: [400], minHeight: 512 }); }); it('renders with hover state', async () => { await renderComponent('KButton', { text: 'Raised Button', appearance: 'raised-button' }); await hover('button'); await delay(4000); - await takeSnapshot('KButton - Raised Button Hover'); + await takeSnapshot('KButton - Raised Button Hover', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Flat Button', appearance: 'flat-button' }); await hover('button'); await delay(4000); - await takeSnapshot('KButton - Flat Button Hover'); + await takeSnapshot('KButton - Flat Button Hover', { widths: [400], minHeight: 512 }); }); it('renders correctly with icon and iconAfter', async () => { await renderComponent('KButton', { text: 'Icon Button', icon: 'add' }); - await takeSnapshot('KButton - With Icons'); + await takeSnapshot('KButton - With Icons', { widths: [400], minHeight: 512 }); await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' }); - await takeSnapshot('KButton - With Icons After'); + await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 }); }); it('renders correctly with KDropdownMenu slot and shows options on click', async () => { await renderComponent( @@ -150,7 +150,7 @@ describe('KButton', () => { } ); await click('button'); - await takeSnapshot('KButton - Dropdown Opened'); + await takeSnapshot('KButton - Dropdown Opened', { widths: [400], minHeight: 512 }); }); it('should render the slot when the slot has content', async () => { await renderComponent( @@ -160,7 +160,7 @@ describe('KButton', () => { default: 'Default Slot', } ); - await takeSnapshot('KButton - With Default Slot'); + await takeSnapshot('KButton - With Default Slot', { widths: [400], minHeight: 512 }); }); }); });