Test changes

KshitijThareja · Aug 15, 2024 · a0c207b · a0c207b
2 parents a0305f7 + 384e593
commit a0c207b
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 78 deletions.
diff --git a/docs/pages/testing-playground.vue b/docs/pages/testing-playground.vue
@@ -8,13 +8,14 @@
   -->
   <div id="testing-playground" style="padding: 24px">
     <component :is="component" v-bind="componentProps">
+      <!-- Render slots if provided -->
       <template v-for="(slot, name) in slots">
         <!-- eslint-disable vue/no-v-html -->
         <component
-          :key="name"
-          v-if="slot.element"
           :is="slot.element"
+          v-if="slot.element"
           v-bind="slot.elementProps"
+          :key="name"
           v-html="slot.innerHTML"
         />
       </template>
@@ -50,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/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);

diff --git a/lib/buttons-and-links/__tests__/KButton.spec.js b/lib/buttons-and-links/__tests__/KButton.spec.js
@@ -1,12 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import KButton from '../KButton.vue';
-import {
-  renderComponent,
-  takeSnapshot,
-  delay,
-  click,
-  hover,
-} from '../../../jest.conf/visual.testUtils';
+import { renderComponent, takeSnapshot, click } from '../../../jest.conf/visual.testUtils';
 
 describe('KButton', () => {
   describe('icon related props', () => {
@@ -73,70 +67,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',
+    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 });
       });
-      await takeSnapshot('KButton - Primary Raised Button', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Raised Button',
-        primary: false,
-        appearance: 'raised-button',
+      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 });
       });
-      await takeSnapshot('KButton - Secondary Raised Button', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Flat Button',
-        primary: true,
-        appearance: 'flat-button',
+      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 });
       });
-      await takeSnapshot('KButton - Primary Flat Button', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Flat Button',
-        primary: false,
-        appearance: 'flat-button',
+      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 });
       });
-      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 });
     });
-    it('renders correctly when disabled', async () => {
-      await renderComponent('KButton', {
-        text: 'Raised Button',
-        disabled: true,
-        appearance: 'raised-button',
+    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 });
       });
-      await takeSnapshot('KButton - Disabled Raised Button', { widths: [400], minHeight: 512 });
-
-      await renderComponent('KButton', {
-        text: 'Flat Button',
-        disabled: true,
-        appearance: 'flat-button',
+      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 });
       });
-      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(
@@ -160,7 +155,7 @@ describe('KButton', () => {
         {
           default: {
             element: 'span',
-            innerHTML: 'Default Slot Content',
+            innerHTML: 'Default Slot',
           },
         }
       );