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', () => {