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 1/3] 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 2/3] 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 3/3] 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(