diff --git a/src/components/KAlert/KAlert.cy.ts b/src/components/KAlert/KAlert.cy.ts index ef497d4653..a85cd6e0b4 100644 --- a/src/components/KAlert/KAlert.cy.ts +++ b/src/components/KAlert/KAlert.cy.ts @@ -1,8 +1,9 @@ +import { h } from 'vue' import { mount } from 'cypress/vue' import KAlert from '@/components/KAlert/KAlert.vue' import { AlertAppearances } from '@/types' -const rendersCorrectVariant = (variant) => { +const rendersCorrectVariant = (variant: string) => { it(`renders ${variant} variant`, () => { mount(KAlert, { props: { @@ -85,7 +86,7 @@ describe('KAlert', () => { message, }, slots: { - default: `${defaultSlotContent}`, + default: h('span', {}, defaultSlotContent), }, }) @@ -93,13 +94,17 @@ describe('KAlert', () => { }) it('displays icon passed through icon slot', () => { + const iconSlotContent = 'icon slot content' + const testId = 'slotted-icon' + mount(KAlert, { slots: { - icon: '', + icon: h('div', { 'data-testid': testId }, iconSlotContent), }, }) - cy.get('.alert-icon-container').findTestId('slotted-icon').should('be.visible') + cy.get('.alert-icon-container').findTestId(testId).should('be.visible') + cy.get('.alert-icon-container').findTestId(testId).should('contain.text', iconSlotContent) }) it('emits dismiss event when dismiss button is clicked', () => { diff --git a/src/components/KEmptyState/KEmptyState.cy.ts b/src/components/KEmptyState/KEmptyState.cy.ts index ccf53c6848..850206528c 100644 --- a/src/components/KEmptyState/KEmptyState.cy.ts +++ b/src/components/KEmptyState/KEmptyState.cy.ts @@ -1,3 +1,4 @@ +import { h } from 'vue' import { mount } from 'cypress/vue' import KEmptyState from '@/components/KEmptyState/KEmptyState.vue' @@ -73,27 +74,32 @@ describe('KEmptyState', () => { it('displays content passed through default slot correctly', () => { const content = 'Content' + const testId = 'slotted-message' mount(KEmptyState, { props: { message: 'Message', }, slots: { - default: `${content}`, + default: h('span', { 'data-testid': testId }, content), }, }) - cy.get('.empty-state-message').findTestId('slotted-message').should('be.visible').should('contain', content) + cy.get('.empty-state-message').findTestId(testId).should('be.visible').should('contain', content) }) it('displays icon passed through icon slot', () => { + const iconSlotContent = 'icon slot content' + const testId = 'slotted-icon' + mount(KEmptyState, { slots: { - icon: '', + icon: h('div', { 'data-testid': testId }, iconSlotContent), }, }) - cy.get('.empty-state-icon').findTestId('slotted-icon').should('be.visible') + cy.get('.empty-state-icon').findTestId(testId).should('be.visible') + cy.get('.empty-state-icon').findTestId(testId).should('contain.text', iconSlotContent) }) it('emits event when action button is clicked', () => {