kongponents/src/components/KToaster/KToaster.cy.ts at 6c4141fb68aea256d981203252b3a1f775c4b45d · Kong/kongponents · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import KToaster from '@/components/KToaster/KToaster.vue'

const toastersContainerId = 'kongponents-toaster-container'

describe('KToaster', () => {
  it('renders toaster', () => {
    const toasts = []
    toasts.push({ title: 'I have a toast', message: 'hey toasty' })
    toasts.push({ title: 'I have a toast', appearance: 'success', message: 'hey toasty' })
    toasts.push({ title: 'I have a toast', appearance: 'danger', message: 'hey toasty' })
    toasts.push({ title: 'I have a toast', appearance: 'danger', message: 'hey toasty' })

    cy.mount(KToaster, {
      props: {
        toasterState: toasts,
      },
    })

    cy.get('.k-toaster').should('exist')
    cy.get('.k-toaster').find('div[role="alert"].danger').its('length').should('eq', 2)
    cy.get('.k-toaster').find('.toaster .toaster-message').its('length').should('eq', 4)
  })

  it('renders all elements in toaster correctly - message passed', () => {
    const title = 'I have a toast'
    const message = 'hey toasty'

    cy.mount(KToaster, {
      props: {
        toasterState: [{ title, message }],
      },
    })

    cy.get('.toaster .toaster-icon').should('be.visible')
    cy.get('.toaster .toaster-title').contains(title)
    cy.get('.toaster .toaster-message').contains(message)
    cy.get('.toaster .toaster-close-icon').should('be.visible')
  })

  it('renders all elements in toaster correctly - message not passed', () => {
    const title = 'I have a toast'

    cy.mount(KToaster, {
      props: {
        toasterState: [{ title }],
      },
    })

    cy.get('.toaster .toaster-icon').should('be.visible')
    cy.get('.toaster .toaster-title').contains(title)
    cy.get('.toaster .toaster-message').should('not.exist')
    cy.get('.toaster .toaster-close-icon').should('be.visible')
  })

  it('shows close button even if content is long', () => {
    const longTitle = 'title'.repeat(20)
    const longMessage = 'message'.repeat(20)
    cy.mount(KToaster, {
      props: {
        toasterState: [{ title: longTitle, message: longMessage }],
      },
    })
    cy.get('.toaster .toaster-close-icon').should('be.visible')
  })
})