From c6a3ab3bb1ff604d2b68507fd9fda93fec6c1ff3 Mon Sep 17 00:00:00 2001
From: Kshitij Thareja <kshitijthareja03@gmail.com>
Date: Wed, 31 Jul 2024 18:24:05 +0530
Subject: [PATCH 1/8] Add support for default slots rendering

---
 docs/pages/testing-playground.vue             | 29 +++++-
 jest.conf/visual.testUtils.js                 | 29 +++++-
 .../__tests__/KButton.spec.js                 | 99 ++++++++++++++++++-
 3 files changed, 149 insertions(+), 8 deletions(-)

diff --git a/docs/pages/testing-playground.vue b/docs/pages/testing-playground.vue
index cb06c9f80..181908cec 100644
--- a/docs/pages/testing-playground.vue
+++ b/docs/pages/testing-playground.vue
@@ -7,7 +7,17 @@
     Please do not modify the contents of this file.
   -->
   <div id="testing-playground" style="padding: 24px">
-    <component :is="component" v-bind="componentProps" />
+    <component :is="component" v-bind="componentProps">
+      <!-- Render default slot if provided -->
+      <template v-if="slots.default">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="slots.default"></span>
+      </template>
+      <!-- Render named slots passed to the component -->
+      <template v-for="(slot, name) in namedSlots" #[name]>
+        <component :is="slot.content" v-bind="slot.props" :key="name" />
+      </template>
+    </component>
   </div>
 
 </template>
@@ -32,9 +42,25 @@
          * @type {Object} The props to be passed to the dynamically rendered component.
          */
         componentProps: {},
+        /**
+         * @type {Object} The slots to be passed to the dynamically rendered component.
+         */
+        slots: {},
       };
     },
 
+    /**
+     * Computed property that filters out the default slot from the slots object,
+     * returning only the named slots.
+     */
+    computed: {
+      namedSlots() {
+        // eslint-disable-next-line no-unused-vars
+        const { default: defaultSlot, ...rest } = this.slots;
+        return rest;
+      },
+    },
+
     /**
      * Adds an event listener for messages from the test runner.
      * This listener will trigger the `handleMessage` method.
@@ -59,6 +85,7 @@
         if (event.data.type === 'RENDER_COMPONENT') {
           this.component = event.data.component;
           this.componentProps = event.data.props;
+          this.slots = event.data.slots || {};
         }
       },
     },
diff --git a/jest.conf/visual.testUtils.js b/jest.conf/visual.testUtils.js
index d7b87db37..b3c2a97c2 100644
--- a/jest.conf/visual.testUtils.js
+++ b/jest.conf/visual.testUtils.js
@@ -1,23 +1,24 @@
 import percySnapshot from '@percy/puppeteer';
 
-export async function renderComponent(component, props) {
+export async function renderComponent(component, props, slots = {}) {
   const beforeRenderState = await page.evaluate(() => {
     const testing_playground = document.querySelector('#testing-playground');
     return testing_playground ? testing_playground.innerHTML : '';
   });
 
   await page.evaluate(
-    ({ component, props }) => {
+    ({ component, props, slots }) => {
       window.postMessage(
         {
           type: 'RENDER_COMPONENT',
           component: component,
           props: props,
+          slots: slots,
         },
         '*'
       );
     },
-    { component, props }
+    { component, props, slots }
   );
   await page.waitForSelector('#testing-playground');
 
@@ -45,3 +46,25 @@ export async function takeSnapshot(name) {
     await percySnapshot(page, name);
   }
 }
+
+export async function delay(time) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, time);
+  });
+}
+
+export const click = async selector => {
+  await page.locator(selector).click();
+};
+
+export const hover = async selector => {
+  await page.locator(selector).hover();
+};
+
+export const scrollToPos = async (selector, scrollOptions) => {
+  await page.locator(selector).scroll(scrollOptions);
+};
+
+export const waitFor = async selector => {
+  await page.locator(selector).wait();
+};
diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js
index cd359f727..c8cb555f2 100644
--- a/lib/buttons-and-links/__tests__/KButton.spec.js
+++ b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -1,6 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
 import KButton from '../KButton.vue';
-import { renderComponent, takeSnapshot } from '../../../jest.conf/visual.testUtils';
+import {
+  renderComponent,
+  takeSnapshot,
+  delay,
+  click,
+  hover,
+} from '../../../jest.conf/visual.testUtils';
 
 describe('KButton', () => {
   describe('icon related props', () => {
@@ -67,9 +73,94 @@ describe('KButton', () => {
   });
 
   describe.visual('KButton Visual Tests', () => {
-    it('renders correctly with default props', async () => {
-      await renderComponent('KButton', { text: 'Test Button' });
-      await takeSnapshot('KButton - Default');
+    it('renders correctly with different appearances', async () => {
+      await renderComponent('KButton', {
+        text: 'Raised Button',
+        primary: true,
+        appearance: 'raised-button',
+      });
+      await takeSnapshot('KButton - Primary Raised Button');
+
+      await renderComponent('KButton', {
+        text: 'Raised Button',
+        primary: false,
+        appearance: 'raised-button',
+      });
+      await takeSnapshot('KButton - Secondary Raised Button');
+
+      await renderComponent('KButton', {
+        text: 'Flat Button',
+        primary: true,
+        appearance: 'flat-button',
+      });
+      await takeSnapshot('KButton - Primary Flat Button');
+
+      await renderComponent('KButton', {
+        text: 'Flat Button',
+        primary: false,
+        appearance: 'flat-button',
+      });
+      await takeSnapshot('KButton - Secondary Flat Button');
+
+      await renderComponent('KButton', { text: 'Basic Link', appearance: 'basic-link' });
+      await takeSnapshot('KButton - Basic Link');
+    });
+    it('renders correctly when disabled', async () => {
+      await renderComponent('KButton', {
+        text: 'Raised Button',
+        disabled: true,
+        appearance: 'raised-button',
+      });
+      await takeSnapshot('KButton - Disabled Raised Button');
+
+      await renderComponent('KButton', {
+        text: 'Flat Button',
+        disabled: true,
+        appearance: 'flat-button',
+      });
+      await takeSnapshot('KButton - Disabled Flat Button');
+    });
+    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 renderComponent('KButton', { text: 'Flat Button', appearance: 'flat-button' });
+      await hover('button');
+      await delay(4000);
+      await takeSnapshot('KButton - Flat Button Hover');
+    });
+    it('renders correctly with icon and iconAfter', async () => {
+      await renderComponent('KButton', { text: 'Icon Button', icon: 'add' });
+      await takeSnapshot('KButton - With Icons');
+
+      await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' });
+      await takeSnapshot('KButton - With Icons After');
+    });
+    it('renders correctly with KDropdownMenu slot and shows options on click', async () => {
+      await renderComponent(
+        'KButton',
+        { text: 'Button with Dropdown' },
+        {
+          menu: {
+            content: 'KDropdownMenu',
+            props: { options: ['Option 1', 'Option 2'] },
+          },
+        }
+      );
+      await click('button');
+      await takeSnapshot('KButton - Dropdown Opened');
+    });
+    it('should render the slot when the slot has content', async () => {
+      await renderComponent(
+        'KButton',
+        { text: 'Button' },
+        {
+          default: '<span>Default Slot</span>',
+        }
+      );
+      await takeSnapshot('KButton - With Default Slot');
     });
   });
 });

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 2/8] 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 });
     });
   });
 });

From 05809decaea9355e8b816dfcfd79dc0970484666 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 14 Aug 2024 08:06:12 -0500
Subject: [PATCH 3/8] Update jsdoc

---
 docs/pages/testing-playground.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/testing-playground.vue b/docs/pages/testing-playground.vue
index 181908cec..d538954f5 100644
--- a/docs/pages/testing-playground.vue
+++ b/docs/pages/testing-playground.vue
@@ -79,7 +79,7 @@
     methods: {
       /**
        * Handles messages received from the test runner to render a specified component.
-       * @param {MessageEvent} event - The message event containing the component and its props.
+       * @param {MessageEvent} event -  The message event containing the component and its props.
        */
       handleMessage(event) {
         if (event.data.type === 'RENDER_COMPONENT') {

From 798dd243e00194bd6e3db53d15fd8d08b1aff514 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 15 Aug 2024 13:09:25 +0530
Subject: [PATCH 4/8] Modify testing playground to render named and default
 slots in a single template

---
 docs/pages/testing-playground.vue             |  30 ++--
 .../__tests__/KButton.spec.js                 | 136 +++++++++---------
 2 files changed, 79 insertions(+), 87 deletions(-)

diff --git a/docs/pages/testing-playground.vue b/docs/pages/testing-playground.vue
index 181908cec..98127afd7 100644
--- a/docs/pages/testing-playground.vue
+++ b/docs/pages/testing-playground.vue
@@ -8,14 +8,16 @@
   -->
   <div id="testing-playground" style="padding: 24px">
     <component :is="component" v-bind="componentProps">
-      <!-- Render default slot if provided -->
-      <template v-if="slots.default">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="slots.default"></span>
-      </template>
-      <!-- Render named slots passed to the component -->
-      <template v-for="(slot, name) in namedSlots" #[name]>
-        <component :is="slot.content" v-bind="slot.props" :key="name" />
+      <!-- Render slots if provided -->
+      <template v-for="(slot, name) in slots">
+        <!-- eslint-disable vue/no-v-html -->
+        <component
+          :is="slot.element"
+          v-if="slot.element"
+          v-bind="slot.elementProps"
+          :key="name"
+          v-html="slot.innerHTML"
+        />
       </template>
     </component>
   </div>
@@ -49,18 +51,6 @@
       };
     },
 
-    /**
-     * Computed property that filters out the default slot from the slots object,
-     * returning only the named slots.
-     */
-    computed: {
-      namedSlots() {
-        // eslint-disable-next-line no-unused-vars
-        const { default: defaultSlot, ...rest } = this.slots;
-        return rest;
-      },
-    },
-
     /**
      * Adds an event listener for messages from the test runner.
      * This listener will trigger the `handleMessage` method.
diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js
index 826833106..e14c41add 100644
--- a/lib/buttons-and-links/__tests__/KButton.spec.js
+++ b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -3,9 +3,7 @@ import KButton from '../KButton.vue';
 import {
   renderComponent,
   takeSnapshot,
-  delay,
   click,
-  hover,
 } from '../../../jest.conf/visual.testUtils';
 
 describe('KButton', () => {
@@ -73,70 +71,71 @@ describe('KButton', () => {
   });
 
   describe.visual('KButton Visual Tests', () => {
-    it('renders correctly with different appearances', async () => {
-      await renderComponent('KButton', {
-        text: 'Raised Button',
-        primary: true,
-        appearance: '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', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Flat Button',
-        primary: true,
-        appearance: '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', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', { text: 'Basic Link', appearance: 'basic-link' });
-      await takeSnapshot('KButton - Basic Link', { widths: [400], minHeight: 512 });
+    describe('renders correctly with different appearances', () => {
+      it('renders correctly as primary raised button', async () => {
+        await renderComponent('KButton', {
+          text: 'Raised Button',
+          primary: true,
+          appearance: 'raised-button',
+        });
+        await takeSnapshot('KButton - Primary Raised Button', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly as secondary raised button', async () => {
+        await renderComponent('KButton', {
+          text: 'Raised Button',
+          primary: false,
+          appearance: 'raised-button',
+        });
+        await takeSnapshot('KButton - Secondary Raised Button', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly as primary flat button', async () => {
+        await renderComponent('KButton', {
+          text: 'Flat Button',
+          primary: true,
+          appearance: 'flat-button',
+        });
+        await takeSnapshot('KButton - Primary Flat Button', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly as secondary flat button', async () => {
+        await renderComponent('KButton', {
+          text: 'Flat Button',
+          primary: false,
+          appearance: 'flat-button',
+        });
+        await takeSnapshot('KButton - Secondary Flat Button', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly as basic link', async () => {
+        await renderComponent('KButton', { text: 'Basic Link', appearance: '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', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Flat Button',
-        disabled: true,
-        appearance: 'flat-button',
-      });
-      await takeSnapshot('KButton - Disabled Flat Button', { widths: [400], minHeight: 512 });
+    describe('renders correctly when disabled', () => {
+      it('renders correctly as disabled raised button', async () => {
+        await renderComponent('KButton', {
+          text: 'Raised Button',
+          disabled: true,
+          appearance: 'raised-button',
+        });
+        await takeSnapshot('KButton - Disabled Raised Button', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly as disabled flat button', async () => {
+        await renderComponent('KButton', {
+          text: 'Flat Button',
+          disabled: true,
+          appearance: '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', { 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', { 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', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' });
-      await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 });
+    describe('renders correctly with icons', async () => {
+      it('renders correctly with icon on the left', async () => {
+        await renderComponent('KButton', { text: 'Icon Button', icon: 'add' });
+        await takeSnapshot('KButton - With Icons', { widths: [400], minHeight: 512 });
+      })
+      it('renders correctly with icon on the right', async () => {
+        await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' });
+        await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 });
+      })
     });
     it('renders correctly with KDropdownMenu slot and shows options on click', async () => {
       await renderComponent(
@@ -144,8 +143,8 @@ describe('KButton', () => {
         { text: 'Button with Dropdown' },
         {
           menu: {
-            content: 'KDropdownMenu',
-            props: { options: ['Option 1', 'Option 2'] },
+            element: 'KDropdownMenu',
+            elementProps: { options: ['Option 1', 'Option 2'] },
           },
         }
       );
@@ -157,7 +156,10 @@ describe('KButton', () => {
         'KButton',
         { text: 'Button' },
         {
-          default: '<span>Default Slot</span>',
+          default: {
+            element: 'span',
+            innerHTML: 'Default Slot',
+          },
         }
       );
       await takeSnapshot('KButton - With Default Slot', { widths: [400], minHeight: 512 });

From b84eafa63f0f8ec098cd20dac1601240d3b10f4c Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 15 Aug 2024 14:08:36 +0530
Subject: [PATCH 5/8] Add jsdocs for renderComponent and takeSnapshot functions

---
 jest.conf/visual.testUtils.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/jest.conf/visual.testUtils.js b/jest.conf/visual.testUtils.js
index 1ed0dbde4..216aa8aa4 100644
--- a/jest.conf/visual.testUtils.js
+++ b/jest.conf/visual.testUtils.js
@@ -1,5 +1,29 @@
 import percySnapshot from '@percy/puppeteer';
 
+/**
+ * Renders a Vue component within the VisualTestingPlayground.
+ *
+ * @param {string} component - The name of the Vue component to render.
+ * @param {Object} props - The props to pass to the component.
+ * @param {Object} [slots={}] - An object representing the slots to pass to the component. 
+ * The structure of the `slots` object should be as follows:
+ * 
+ * Example:
+ * {
+ *   default: {
+ *     element: "div", // or any Vue component like KIcon
+ *     elementProps: { class: "some-class" },
+ *     innerHTML: "<div> Some nested <a>content</a> </div>"
+ *   },
+ *   menu: {
+ *     element: "KDropdownMenu", // named slot content as a Vue component
+ *     elementProps: { options: ['Option 1', 'Option 2'] },
+ *   }
+ * }
+ *
+ * `default` is for the default slot content, which can be raw HTML or another component.
+ * Other keys correspond to named slots.
+ */
 export async function renderComponent(component, props, slots = {}) {
   const beforeRenderState = await page.evaluate(() => {
     const testing_playground = document.querySelector('#testing-playground');
@@ -41,6 +65,16 @@ export async function renderComponent(component, props, slots = {}) {
   global.expect(isComponentRendered).toBe(true);
 }
 
+/**
+ * Captures a visual snapshot of the current state of the page using Percy.
+ *
+ * @param {string} name - The name of the snapshot.
+ * @param {Object} [options={}] - Additional options to customize the snapshot. 
+ * This can include options such as `widths`, `minHeight`, and some other Percy specific options.
+ * 
+ * For a full list of available options, refer to the Percy documentation:
+ * @see https://www.browserstack.com/docs/percy/take-percy-snapshots/snapshots-via-scripts#per-snapshot-configuration
+  */
 export async function takeSnapshot(name, options = {}) {
   if (process.env.TEST_TYPE == 'visual') {
     await percySnapshot(page, name, options);

From 384e593a0ca7a237a6a47ba65895cbe068fddf10 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 15 Aug 2024 14:45:09 +0530
Subject: [PATCH 6/8] Fix lint error

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

diff --git a/jest.conf/visual.testUtils.js b/jest.conf/visual.testUtils.js
index 216aa8aa4..812e88264 100644
--- a/jest.conf/visual.testUtils.js
+++ b/jest.conf/visual.testUtils.js
@@ -5,9 +5,9 @@ import percySnapshot from '@percy/puppeteer';
  *
  * @param {string} component - The name of the Vue component to render.
  * @param {Object} props - The props to pass to the component.
- * @param {Object} [slots={}] - An object representing the slots to pass to the component. 
+ * @param {Object} [slots={}] - An object representing the slots to pass to the component.
  * The structure of the `slots` object should be as follows:
- * 
+ *
  * Example:
  * {
  *   default: {
@@ -69,12 +69,12 @@ export async function renderComponent(component, props, slots = {}) {
  * Captures a visual snapshot of the current state of the page using Percy.
  *
  * @param {string} name - The name of the snapshot.
- * @param {Object} [options={}] - Additional options to customize the snapshot. 
+ * @param {Object} [options={}] - Additional options to customize the snapshot.
  * This can include options such as `widths`, `minHeight`, and some other Percy specific options.
- * 
+ *
  * For a full list of available options, refer to the Percy documentation:
  * @see https://www.browserstack.com/docs/percy/take-percy-snapshots/snapshots-via-scripts#per-snapshot-configuration
-  */
+ */
 export async function takeSnapshot(name, options = {}) {
   if (process.env.TEST_TYPE == 'visual') {
     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 e14c41add..12783e818 100644
--- a/lib/buttons-and-links/__tests__/KButton.spec.js
+++ b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -1,10 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import KButton from '../KButton.vue';
-import {
-  renderComponent,
-  takeSnapshot,
-  click,
-} from '../../../jest.conf/visual.testUtils';
+import { renderComponent, takeSnapshot, click } from '../../../jest.conf/visual.testUtils';
 
 describe('KButton', () => {
   describe('icon related props', () => {
@@ -79,7 +75,7 @@ describe('KButton', () => {
           appearance: 'raised-button',
         });
         await takeSnapshot('KButton - Primary Raised Button', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly as secondary raised button', async () => {
         await renderComponent('KButton', {
           text: 'Raised Button',
@@ -87,7 +83,7 @@ describe('KButton', () => {
           appearance: 'raised-button',
         });
         await takeSnapshot('KButton - Secondary Raised Button', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly as primary flat button', async () => {
         await renderComponent('KButton', {
           text: 'Flat Button',
@@ -95,7 +91,7 @@ describe('KButton', () => {
           appearance: 'flat-button',
         });
         await takeSnapshot('KButton - Primary Flat Button', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly as secondary flat button', async () => {
         await renderComponent('KButton', {
           text: 'Flat Button',
@@ -103,11 +99,11 @@ describe('KButton', () => {
           appearance: 'flat-button',
         });
         await takeSnapshot('KButton - Secondary Flat Button', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly as basic link', async () => {
         await renderComponent('KButton', { text: 'Basic Link', appearance: 'basic-link' });
         await takeSnapshot('KButton - Basic Link', { widths: [400], minHeight: 512 });
-      })
+      });
     });
     describe('renders correctly when disabled', () => {
       it('renders correctly as disabled raised button', async () => {
@@ -117,7 +113,7 @@ describe('KButton', () => {
           appearance: 'raised-button',
         });
         await takeSnapshot('KButton - Disabled Raised Button', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly as disabled flat button', async () => {
         await renderComponent('KButton', {
           text: 'Flat Button',
@@ -125,17 +121,17 @@ describe('KButton', () => {
           appearance: 'flat-button',
         });
         await takeSnapshot('KButton - Disabled Flat Button', { widths: [400], minHeight: 512 });
-      })
+      });
     });
     describe('renders correctly with icons', async () => {
       it('renders correctly with icon on the left', async () => {
         await renderComponent('KButton', { text: 'Icon Button', icon: 'add' });
         await takeSnapshot('KButton - With Icons', { widths: [400], minHeight: 512 });
-      })
+      });
       it('renders correctly with icon on the right', async () => {
         await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' });
         await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 });
-      })
+      });
     });
     it('renders correctly with KDropdownMenu slot and shows options on click', async () => {
       await renderComponent(

From 9471e373732c0277bdf962d8d3b846d7d919304d Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 15 Aug 2024 15:09:53 +0530
Subject: [PATCH 7/8] Remove async from describe block

---
 lib/buttons-and-links/__tests__/KButton.spec.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js
index 12783e818..4feff221b 100644
--- a/lib/buttons-and-links/__tests__/KButton.spec.js
+++ b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -105,6 +105,7 @@ describe('KButton', () => {
         await takeSnapshot('KButton - Basic Link', { widths: [400], minHeight: 512 });
       });
     });
+
     describe('renders correctly when disabled', () => {
       it('renders correctly as disabled raised button', async () => {
         await renderComponent('KButton', {
@@ -123,7 +124,8 @@ describe('KButton', () => {
         await takeSnapshot('KButton - Disabled Flat Button', { widths: [400], minHeight: 512 });
       });
     });
-    describe('renders correctly with icons', async () => {
+
+    describe('renders correctly with icons', () => {
       it('renders correctly with icon on the left', async () => {
         await renderComponent('KButton', { text: 'Icon Button', icon: 'add' });
         await takeSnapshot('KButton - With Icons', { widths: [400], minHeight: 512 });
@@ -133,6 +135,7 @@ describe('KButton', () => {
         await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 });
       });
     });
+
     it('renders correctly with KDropdownMenu slot and shows options on click', async () => {
       await renderComponent(
         'KButton',
@@ -147,7 +150,8 @@ describe('KButton', () => {
       await click('button');
       await takeSnapshot('KButton - Dropdown Opened', { widths: [400], minHeight: 512 });
     });
-    it('should render the slot when the slot has content', async () => {
+
+    it('should render the default slot when provided', async () => {
       await renderComponent(
         'KButton',
         { text: 'Button' },

From 625cff0a11f9646bc4d6cf623689c25e6540536d Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Fri, 16 Aug 2024 22:40:57 +0530
Subject: [PATCH 8/8] Add snapshot options specifying test widths

---
 .../__tests__/KButton.spec.js                 | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js
index 4feff221b..39de3b7a8 100644
--- a/lib/buttons-and-links/__tests__/KButton.spec.js
+++ b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -67,6 +67,8 @@ describe('KButton', () => {
   });
 
   describe.visual('KButton Visual Tests', () => {
+    const snapshotOptions = { widths: [400], minHeight: 512 };
+
     describe('renders correctly with different appearances', () => {
       it('renders correctly as primary raised button', async () => {
         await renderComponent('KButton', {
@@ -74,7 +76,7 @@ describe('KButton', () => {
           primary: true,
           appearance: 'raised-button',
         });
-        await takeSnapshot('KButton - Primary Raised Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Primary Raised Button', snapshotOptions);
       });
       it('renders correctly as secondary raised button', async () => {
         await renderComponent('KButton', {
@@ -82,7 +84,7 @@ describe('KButton', () => {
           primary: false,
           appearance: 'raised-button',
         });
-        await takeSnapshot('KButton - Secondary Raised Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Secondary Raised Button', snapshotOptions);
       });
       it('renders correctly as primary flat button', async () => {
         await renderComponent('KButton', {
@@ -90,7 +92,7 @@ describe('KButton', () => {
           primary: true,
           appearance: 'flat-button',
         });
-        await takeSnapshot('KButton - Primary Flat Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Primary Flat Button', snapshotOptions);
       });
       it('renders correctly as secondary flat button', async () => {
         await renderComponent('KButton', {
@@ -98,11 +100,11 @@ describe('KButton', () => {
           primary: false,
           appearance: 'flat-button',
         });
-        await takeSnapshot('KButton - Secondary Flat Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Secondary Flat Button', snapshotOptions);
       });
       it('renders correctly as basic link', async () => {
         await renderComponent('KButton', { text: 'Basic Link', appearance: 'basic-link' });
-        await takeSnapshot('KButton - Basic Link', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Basic Link', snapshotOptions);
       });
     });
 
@@ -113,7 +115,7 @@ describe('KButton', () => {
           disabled: true,
           appearance: 'raised-button',
         });
-        await takeSnapshot('KButton - Disabled Raised Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Disabled Raised Button', snapshotOptions);
       });
       it('renders correctly as disabled flat button', async () => {
         await renderComponent('KButton', {
@@ -121,18 +123,18 @@ describe('KButton', () => {
           disabled: true,
           appearance: 'flat-button',
         });
-        await takeSnapshot('KButton - Disabled Flat Button', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - Disabled Flat Button', snapshotOptions);
       });
     });
 
     describe('renders correctly with icons', () => {
       it('renders correctly with icon on the left', async () => {
         await renderComponent('KButton', { text: 'Icon Button', icon: 'add' });
-        await takeSnapshot('KButton - With Icons', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - With Icons', snapshotOptions);
       });
       it('renders correctly with icon on the right', async () => {
         await renderComponent('KButton', { text: 'Icon After', iconAfter: 'video' });
-        await takeSnapshot('KButton - With Icons After', { widths: [400], minHeight: 512 });
+        await takeSnapshot('KButton - With Icons After', snapshotOptions);
       });
     });
 
@@ -148,7 +150,7 @@ describe('KButton', () => {
         }
       );
       await click('button');
-      await takeSnapshot('KButton - Dropdown Opened', { widths: [400], minHeight: 512 });
+      await takeSnapshot('KButton - Dropdown Opened', snapshotOptions);
     });
 
     it('should render the default slot when provided', async () => {
@@ -162,7 +164,7 @@ describe('KButton', () => {
           },
         }
       );
-      await takeSnapshot('KButton - With Default Slot', { widths: [400], minHeight: 512 });
+      await takeSnapshot('KButton - With Default Slot', snapshotOptions);
     });
   });
 });