Add option to specify custom dimensions for snapshots

learningequality · Aug 6, 2024 · fe94675 · fe94675
1 parent c6a3ab3
commit fe94675
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git 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
@@ -79,64 +79,64 @@ 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', {
         text: 'Raised Button',
         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: '<span>Default Slot</span>',
         }
       );
-      await takeSnapshot('KButton - With Default Slot');
+      await takeSnapshot('KButton - With Default Slot', { widths: [400], minHeight: 512 });
     });
   });
 });