From fe946757eb8506664a8d600150eba60395bf14f4 Mon Sep 17 00:00:00 2001
From: Kshitij Thareja <kshitijthareja03@gmail.com>
Date: Tue, 6 Aug 2024 20:26:07 +0530
Subject: [PATCH] Add option to specify custom dimensions for snapshots

---
 jest.conf/visual.testUtils.js                 |  4 +--
 .../__tests__/KButton.spec.js                 | 26 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

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: '<span>Default Slot</span>',
         }
       );
-      await takeSnapshot('KButton - With Default Slot');
+      await takeSnapshot('KButton - With Default Slot', { widths: [400], minHeight: 512 });
     });
   });
 });