From c6a3ab3bb1ff604d2b68507fd9fda93fec6c1ff3 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Wed, 31 Jul 2024 18:24:05 +0530 Subject: [PATCH] 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. -->
- + + + + + +
@@ -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: 'Default Slot', + } + ); + await takeSnapshot('KButton - With Default Slot'); }); }); });