https://myhla.homelifeacademy.com/_content/MightyOwl.Components/li…/js/tests/unit/button.spec.iexz854q79.js

1import Button from '../../src/button.js'
2import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'
3
4describe('Button', () => {
5  let fixtureEl
6
7  beforeAll(() => {
8    fixtureEl = getFixture()
9  })
10
11  afterEach(() => {
12    clearFixture()
13  })
14
15  it('should take care of element either passed as a CSS selector or DOM element', () => {
16    fixtureEl.innerHTML = '<button data-bs-toggle="button">Placeholder</button>'
17    const buttonEl = fixtureEl.querySelector('[data-bs-toggle="button"]')
18    const buttonBySelector = new Button('[data-bs-toggle="button"]')
19    const buttonByElement = new Button(buttonEl)
20
21    expect(buttonBySelector._element).toEqual(buttonEl)
22    expect(buttonByElement._element).toEqual(buttonEl)
23  })
24
25  describe('VERSION', () => {
26    it('should return plugin version', () => {
27      expect(Button.VERSION).toEqual(jasmine.any(String))
28    })
29  })
30
31  describe('DATA_KEY', () => {
32    it('should return plugin data key', () => {
33      expect(Button.DATA_KEY).toEqual('bs.button')
34    })
35  })
36
37  describe('data-api', () => {
38    it('should toggle active class on click', () => {
39      fixtureEl.innerHTML = [
40        '<button class="btn" data-bs-toggle="button">btn</button>',
41        '<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>'
42      ].join('')
43
44      const btn = fixtureEl.querySelector('.btn')
45      const divTest = fixtureEl.querySelector('.test')
46      const btnTestParent = fixtureEl.querySelector('.testParent')
47
48      expect(btn).not.toHaveClass('active')
49
50      btn.click()
51
52      expect(btn).toHaveClass('active')
53
54      btn.click()
55
56      expect(btn).not.toHaveClass('active')
57
58      divTest.click()
59
60      expect(btnTestParent).toHaveClass('active')
61    })
62  })
63
64  describe('toggle', () => {
65    it('should toggle aria-pressed', () => {
66      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>'
67
68      const btnEl = fixtureEl.querySelector('.btn')
69      const button = new Button(btnEl)
70
71      expect(btnEl.getAttribute('aria-pressed')).toEqual('false')
72      expect(btnEl).not.toHaveClass('active')
73
74      button.toggle()
75
76      expect(btnEl.getAttribute('aria-pressed')).toEqual('true')
77      expect(btnEl).toHaveClass('active')
78    })
79  })
80
81  describe('dispose', () => {
82    it('should dispose a button', () => {
83      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
84
85      const btnEl = fixtureEl.querySelector('.btn')
86      const button = new Button(btnEl)
87
88      expect(Button.getInstance(btnEl)).not.toBeNull()
89
90      button.dispose()
91
92      expect(Button.getInstance(btnEl)).toBeNull()
93    })
94  })
95
96  describe('jQueryInterface', () => {
97    it('should handle config passed and toggle existing button', () => {
98      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
99
100      const btnEl = fixtureEl.querySelector('.btn')
101      const button = new Button(btnEl)
102
103      const spy = spyOn(button, 'toggle')
104
105      jQueryMock.fn.button = Button.jQueryInterface
106      jQueryMock.elements = [btnEl]
107
108      jQueryMock.fn.button.call(jQueryMock, 'toggle')
109
110      expect(spy).toHaveBeenCalled()
111    })
112
113    it('should create new button instance and call toggle', () => {
114      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
115
116      const btnEl = fixtureEl.querySelector('.btn')
117
118      jQueryMock.fn.button = Button.jQueryInterface
119      jQueryMock.elements = [btnEl]
120
121      jQueryMock.fn.button.call(jQueryMock, 'toggle')
122
123      expect(Button.getInstance(btnEl)).not.toBeNull()
124      expect(btnEl).toHaveClass('active')
125    })
126
127    it('should just create a button instance without calling toggle', () => {
128      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
129
130      const btnEl = fixtureEl.querySelector('.btn')
131
132      jQueryMock.fn.button = Button.jQueryInterface
133      jQueryMock.elements = [btnEl]
134
135      jQueryMock.fn.button.call(jQueryMock)
136
137      expect(Button.getInstance(btnEl)).not.toBeNull()
138      expect(btnEl).not.toHaveClass('active')
139    })
140  })
141
142  describe('getInstance', () => {
143    it('should return button instance', () => {
144      fixtureEl.innerHTML = '<div></div>'
145
146      const div = fixtureEl.querySelector('div')
147      const button = new Button(div)
148
149      expect(Button.getInstance(div)).toEqual(button)
150      expect(Button.getInstance(div)).toBeInstanceOf(Button)
151    })
152
153    it('should return null when there is no button instance', () => {
154      fixtureEl.innerHTML = '<div></div>'
155
156      const div = fixtureEl.querySelector('div')
157
158      expect(Button.getInstance(div)).toBeNull()
159    })
160  })
161
162  describe('getOrCreateInstance', () => {
163    it('should return button instance', () => {
164      fixtureEl.innerHTML = '<div></div>'
165
166      const div = fixtureEl.querySelector('div')
167      const button = new Button(div)
168
169      expect(Button.getOrCreateInstance(div)).toEqual(button)
170      expect(Button.getInstance(div)).toEqual(Button.getOrCreateInstance(div, {}))
171      expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)
172    })
173
174    it('should return new instance when there is no button instance', () => {
175      fixtureEl.innerHTML = '<div></div>'
176
177      const div = fixtureEl.querySelector('div')
178
179      expect(Button.getInstance(div)).toBeNull()
180      expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)
181    })
182  })
183})