kongponents/src/components/KToaster/ToastManager.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import ToastManager from './ToastManager'

const toastersContainerId = 'kongponents-toaster-container'
const containerInstanceCountAttribute = 'data-instance-count'
const toasterWrapperPrefix = 'kongponents-toaster-wrapper'

describe('ToastManager', () => {
  afterEach(() => {
    // Cleanup: remove any lingering containers/wrappers after each test
    const container = document.getElementById(toastersContainerId)
    if (container) {
      container.remove()
    }
  })

  it('should create a toasters container when initialized and remove it when destroy is called', () => {
    const toastManager = new ToastManager()

    // Verify shared container exists
    const container = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(container).to.exist
    expect(container!.getAttribute(containerInstanceCountAttribute)).to.equal('1')

    // Verify instance wrapper exists
    const wrappers = document.querySelectorAll(`[id^="${toasterWrapperPrefix}-"]`)
    expect(wrappers.length).to.equal(1)

    // Destroy instance
    toastManager.destroy()

    // Verify container is removed (since it was the only instance)
    const containerAfterDestroy = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(containerAfterDestroy).to.not.exist
  })

  it('should not remove the toasters container if destroy is called and instance count is > 1', () => {
    const toastManager1 = new ToastManager()
    const toastManager2 = new ToastManager()

    // Verify shared container exists with count = 2
    let container = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(container).to.not.be.null
    expect(container!.getAttribute(containerInstanceCountAttribute)).to.equal('2')

    // Verify both instance wrappers exist
    let wrappers = document.querySelectorAll(`[id^="${toasterWrapperPrefix}-"]`)
    expect(wrappers.length).to.equal(2)

    // Destroy first instance
    toastManager1.destroy()

    // Verify container still exists with count = 1
    container = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(container).to.not.be.null
    expect(container!.getAttribute(containerInstanceCountAttribute)).to.equal('1')

    // Verify only one wrapper remains
    wrappers = document.querySelectorAll(`[id^="${toasterWrapperPrefix}-"]`)
    expect(wrappers.length).to.equal(1)

    // Destroy second instance
    toastManager2.destroy()

    // Verify container is now removed
    const containerAfterDestroy = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(containerAfterDestroy).to.be.null
  })

  it('should not create a duplicate toasters container if one already exists', () => {
    const toastManager1 = new ToastManager()
    const toastManager2 = new ToastManager()
    const toastManager3 = new ToastManager()

    // Verify only ONE shared container exists
    const containers = document.querySelectorAll(`#${toastersContainerId}`)
    expect(containers.length).to.equal(1)

    // Verify container has correct reference count
    const container = document.getElementById(toastersContainerId)
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    expect(container).to.not.be.null
    expect(container!.getAttribute(containerInstanceCountAttribute)).to.equal('3')

    // Verify three separate instance wrappers exist
    const wrappers = document.querySelectorAll(`[id^="${toasterWrapperPrefix}-"]`)
    expect(wrappers.length).to.equal(3)

    // Cleanup
    toastManager1.destroy()
    toastManager2.destroy()
    toastManager3.destroy()
  })

  it('creates toasters container with correct default z-index', () => {
    const toastManager = new ToastManager()
    const container = document.getElementById(toastersContainerId)
    expect(container).to.have.css('z-index', '10000')

    // Cleanup
    toastManager.destroy()
  })

  it('creates toasters container with correct z-index when provided', () => {
    const zIndex = 9999
    const toastManager = new ToastManager({ zIndex })
    const container = document.getElementById(toastersContainerId)
    expect(container).to.have.css('z-index', String(zIndex))

    // Cleanup
    toastManager.destroy()
  })
})