678 lines
23 KiB
JavaScript
678 lines
23 KiB
JavaScript
/* eslint-env jasmine */
|
|
import Stepper from './index'
|
|
|
|
describe('Stepper', () => {
|
|
let fixture
|
|
|
|
beforeAll(() => {
|
|
const fixureNode = document.createElement('div')
|
|
fixureNode.setAttribute('id', 'fixture')
|
|
|
|
document.body.appendChild(fixureNode)
|
|
fixture = document.getElementById('fixture')
|
|
})
|
|
|
|
afterEach(() => {
|
|
fixture.innerHTML = ''
|
|
})
|
|
|
|
describe('constructor', () => {
|
|
it('should create a stepper', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger" id="trigger1">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger" id="trigger2">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
expect(stepperNode.classList.contains('linear')).toBe(true)
|
|
expect(stepper._steps.length).toEqual(2)
|
|
expect(stepperNode['bsStepper']).toEqual(stepper)
|
|
expect(document.querySelector('.step').classList.contains('active')).toBe(true)
|
|
expect(document.getElementById('trigger1').getAttribute('aria-selected')).toEqual('true')
|
|
expect(document.getElementById('trigger2').getAttribute('aria-selected')).toEqual('false')
|
|
expect(stepper.options).toEqual({
|
|
linear: true,
|
|
animation: false,
|
|
selectors: {
|
|
steps: '.step',
|
|
trigger: '.step-trigger',
|
|
stepper: '.bs-stepper'
|
|
}
|
|
})
|
|
})
|
|
|
|
it('should do nothing if there is no step', () => {
|
|
fixture.innerHTML = '<div id="myStepper" class="bs-stepper"></div>'
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
expect(stepperNode.classList.contains('linear')).toBe(true)
|
|
expect(stepper._steps.length).toEqual(0)
|
|
expect(stepperNode['bsStepper']).toEqual(stepper)
|
|
})
|
|
|
|
it('should create a non linear stepper', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, {
|
|
linear: false
|
|
})
|
|
|
|
expect(stepperNode.classList.contains('linear')).toBe(false)
|
|
expect(stepper._steps.length).toEqual(2)
|
|
expect(document.querySelector('.step').classList.contains('active')).toBe(true)
|
|
expect(stepperNode['bsStepper']).toEqual(stepper)
|
|
expect(stepper._clickStepLinearListener).toBeUndefined()
|
|
expect(stepper._clickStepNonLinearListener).toBeTruthy()
|
|
expect(stepper.options).toEqual({
|
|
linear: false,
|
|
animation: false,
|
|
selectors: {
|
|
steps: '.step',
|
|
trigger: '.step-trigger',
|
|
stepper: '.bs-stepper'
|
|
}
|
|
})
|
|
})
|
|
|
|
it('should go to the next step when user click on a step for non linear stepper', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button id="trigger1" class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button id="trigger2" class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, {
|
|
linear: false
|
|
})
|
|
|
|
const trigger2 = document.querySelector('#trigger2')
|
|
trigger2.click()
|
|
|
|
expect(document.querySelector('#test1').classList.contains('active')).toBe(false)
|
|
expect(document.querySelector('#test2').classList.contains('active')).toBe(true)
|
|
expect(document.getElementById('trigger1').getAttribute('aria-selected')).toEqual('false')
|
|
expect(document.getElementById('trigger2').getAttribute('aria-selected')).toEqual('true')
|
|
expect(stepper._currentIndex).toEqual(1)
|
|
})
|
|
|
|
it('should call preventDefault when user click on a step for linear stepper', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button id="trigger2" class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
const trigger2 = document.querySelector('#trigger2')
|
|
trigger2.removeAttribute('disabled')
|
|
const clickEvent = document.createEvent('Event')
|
|
clickEvent.initEvent('click', true, true)
|
|
|
|
spyOn(clickEvent, 'preventDefault')
|
|
|
|
trigger2.dispatchEvent(clickEvent)
|
|
|
|
expect(clickEvent.preventDefault).toHaveBeenCalled()
|
|
expect(stepper._currentIndex).toEqual(0)
|
|
})
|
|
|
|
it('should create a stepper with fade animation', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, {
|
|
animation: true
|
|
})
|
|
|
|
setTimeout(() => {
|
|
expect(stepper.options).toEqual({
|
|
linear: true,
|
|
animation: true,
|
|
selectors: {
|
|
steps: '.step',
|
|
trigger: '.step-trigger',
|
|
stepper: '.bs-stepper'
|
|
}
|
|
})
|
|
expect(document.querySelector('#test1').classList.contains('fade')).toBe(true)
|
|
expect(document.querySelector('#test2').classList.contains('fade')).toBe(true)
|
|
done()
|
|
}, 10)
|
|
})
|
|
|
|
it('should add event listeners on triggers', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button id="trigger1" class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button id="trigger2" class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const trigger1 = document.querySelector('#trigger1')
|
|
const trigger2 = document.querySelector('#trigger2')
|
|
|
|
spyOn(trigger1, 'addEventListener')
|
|
spyOn(trigger2, 'addEventListener')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
expect(trigger1.addEventListener).toHaveBeenCalled()
|
|
expect(trigger2.addEventListener).toHaveBeenCalled()
|
|
expect(stepperNode['bsStepper']).toEqual(stepper)
|
|
})
|
|
|
|
it('should allow css selector configuration', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="custom-bs-stepper">',
|
|
' <div class="custom-step" data-target="#test1">',
|
|
' <button id="trigger1" class="custom-step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="custom-step" data-target="#test2">',
|
|
' <button id="trigger2" class="custom-step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, {
|
|
selectors: {
|
|
steps: '.custom-step',
|
|
trigger: '.custom-step-trigger',
|
|
stepper: '.custom-bs-stepper'
|
|
}
|
|
})
|
|
|
|
expect(stepper.options).toEqual({
|
|
linear: true,
|
|
animation: false,
|
|
selectors: {
|
|
steps: '.custom-step',
|
|
trigger: '.custom-step-trigger',
|
|
stepper: '.custom-bs-stepper'
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('next', () => {
|
|
it('should go to the next step', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
stepperNode.addEventListener('show.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
expect(event.detail.to).toEqual(1)
|
|
expect(event.detail.from).toEqual(0)
|
|
})
|
|
stepperNode.addEventListener('shown.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
expect(event.detail.to).toEqual(1)
|
|
expect(event.detail.from).toEqual(0)
|
|
expect(document.querySelector('#test1').classList.contains('active')).toBe(false)
|
|
expect(document.querySelector('#test2').classList.contains('active')).toBe(true)
|
|
done()
|
|
})
|
|
|
|
stepper.next()
|
|
})
|
|
|
|
it('should go to the next step with css selector configuration', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="custom-bs-stepper">',
|
|
' <div class="custom-step" data-target="#test1">',
|
|
' <button id="trigger1" class="custom-step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="custom-step" data-target="#test2">',
|
|
' <button id="trigger2" class="custom-step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, {
|
|
selectors: {
|
|
steps: '.custom-step',
|
|
trigger: '.custom-step-trigger',
|
|
stepper: '.custom-bs-stepper'
|
|
}
|
|
})
|
|
|
|
expect(stepper.options).toEqual({
|
|
linear: true,
|
|
animation: false,
|
|
selectors: {
|
|
steps: '.custom-step',
|
|
trigger: '.custom-step-trigger',
|
|
stepper: '.custom-bs-stepper'
|
|
}
|
|
})
|
|
|
|
stepperNode.addEventListener('show.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
})
|
|
stepperNode.addEventListener('shown.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
expect(document.querySelector('#test1').classList.contains('active')).toBe(false)
|
|
expect(document.querySelector('#test2').classList.contains('active')).toBe(true)
|
|
done()
|
|
})
|
|
|
|
stepper.next()
|
|
})
|
|
|
|
it('should not go to the next step if the show event is default prevented', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
const listeners = {
|
|
show (event) {
|
|
event.preventDefault()
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
|
|
setTimeout(() => {
|
|
expect(listeners.shown).not.toHaveBeenCalled()
|
|
expect(stepper._currentIndex).toEqual(0)
|
|
done()
|
|
}, 10)
|
|
},
|
|
shown () {
|
|
console.warn('shown called but it should not be the case')
|
|
}
|
|
}
|
|
|
|
spyOn(listeners, 'shown')
|
|
|
|
stepperNode.addEventListener('show.bs-stepper', listeners.show)
|
|
stepperNode.addEventListener('shown.bs-stepper', listeners.shown)
|
|
|
|
stepper.next()
|
|
})
|
|
|
|
it('should stay at the end if we call next', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
stepper.next()
|
|
stepper.next()
|
|
|
|
expect(document.querySelector('#test1').classList.contains('active')).toBe(false)
|
|
expect(document.querySelector('#test2').classList.contains('active')).toBe(true)
|
|
})
|
|
|
|
it('should keep block class on previous steps for vertical stepper without fade', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper vertical">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
stepper.next()
|
|
|
|
expect(document.querySelector('#test2').classList.contains('active')).toBe(true)
|
|
expect(document.querySelector('#test2').classList.contains('dstepper-block')).toBe(true)
|
|
})
|
|
})
|
|
|
|
describe('previous', () => {
|
|
it('should return to the previous step', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
const test1 = document.querySelector('#test1')
|
|
const test2 = document.querySelector('#test2')
|
|
|
|
stepper.next()
|
|
|
|
expect(test1.classList.contains('active')).toBe(false)
|
|
expect(test2.classList.contains('active')).toBe(true)
|
|
|
|
stepperNode.addEventListener('show.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(0)
|
|
expect(event.detail.to).toEqual(0)
|
|
expect(event.detail.from).toEqual(1)
|
|
})
|
|
|
|
stepperNode.addEventListener('shown.bs-stepper', function (event) {
|
|
expect(event.detail.indexStep).toEqual(0)
|
|
expect(event.detail.to).toEqual(0)
|
|
expect(event.detail.from).toEqual(1)
|
|
expect(test1.classList.contains('active')).toBe(true)
|
|
expect(test2.classList.contains('active')).toBe(false)
|
|
done()
|
|
})
|
|
|
|
stepper.previous()
|
|
})
|
|
|
|
it('should stay at the first step if previous called', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const test1 = document.querySelector('#test1')
|
|
const test2 = document.querySelector('#test2')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
stepper.previous()
|
|
|
|
expect(test1.classList.contains('active')).toBe(true)
|
|
expect(test2.classList.contains('active')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('to', () => {
|
|
it('should go to the step number', done => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
const test1 = document.querySelector('#test1')
|
|
const test2 = document.querySelector('#test2')
|
|
|
|
stepperNode.addEventListener('show.bs-stepper', event => {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
expect(event.detail.to).toEqual(1)
|
|
expect(event.detail.from).toEqual(0)
|
|
})
|
|
|
|
stepperNode.addEventListener('shown.bs-stepper', event => {
|
|
expect(event.detail.indexStep).toEqual(1)
|
|
expect(event.detail.to).toEqual(1)
|
|
expect(event.detail.from).toEqual(0)
|
|
expect(test1.classList.contains('active')).toBe(false)
|
|
expect(test2.classList.contains('active')).toBe(true)
|
|
done()
|
|
})
|
|
|
|
stepper.to(2)
|
|
})
|
|
|
|
it('should handle wrong inputs', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test3">',
|
|
' <button class="step-trigger">3</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
' <div id="test3">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
const test1 = document.querySelector('#test1')
|
|
const test2 = document.querySelector('#test2')
|
|
const test3 = document.querySelector('#test3')
|
|
|
|
stepper.to(-5)
|
|
|
|
expect(test1.classList.contains('active')).toBe(true)
|
|
expect(test2.classList.contains('active')).toBe(false)
|
|
expect(test3.classList.contains('active')).toBe(false)
|
|
|
|
stepper.to(2)
|
|
|
|
expect(test1.classList.contains('active')).toBe(false)
|
|
expect(test2.classList.contains('active')).toBe(true)
|
|
expect(test3.classList.contains('active')).toBe(false)
|
|
|
|
stepper.to(stepper._steps.length + 1)
|
|
|
|
expect(test1.classList.contains('active')).toBe(true)
|
|
expect(test2.classList.contains('active')).toBe(false)
|
|
expect(test3.classList.contains('active')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('reset', () => {
|
|
it('should return to the first step', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
const test1 = document.querySelector('#test1')
|
|
const test2 = document.querySelector('#test2')
|
|
|
|
stepper.next()
|
|
|
|
expect(test1.classList.contains('active')).toBe(false)
|
|
expect(test2.classList.contains('active')).toBe(true)
|
|
|
|
stepper.reset()
|
|
|
|
expect(test1.classList.contains('active')).toBe(true)
|
|
expect(test2.classList.contains('active')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('destroy', () => {
|
|
it('should clear properties', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode)
|
|
|
|
expect(stepperNode['bsStepper']).toEqual(stepper)
|
|
expect(stepper._element).toEqual(stepperNode)
|
|
expect(stepper._currentIndex).toEqual(0)
|
|
expect(stepper._steps.length).toEqual(2)
|
|
expect(stepper._stepsContents.length).toEqual(2)
|
|
expect(stepper._clickStepLinearListener).toBeTruthy()
|
|
expect(stepper._clickStepNonLinearListener).toBeUndefined()
|
|
|
|
stepper.destroy()
|
|
|
|
expect(stepperNode.bsStepper).toBeUndefined()
|
|
expect(stepper._element).toBeUndefined()
|
|
expect(stepper._currentIndex).toBeUndefined()
|
|
expect(stepper._steps).toBeUndefined()
|
|
expect(stepper._stepsContents).toBeUndefined()
|
|
expect(stepper._clickStepLinearListener).toBeUndefined()
|
|
expect(stepper._clickStepNonLinearListener).toBeUndefined()
|
|
})
|
|
|
|
it('should remove event listeners on triggers', () => {
|
|
fixture.innerHTML = [
|
|
'<div id="myStepper" class="bs-stepper">',
|
|
' <div class="step" data-target="#test1">',
|
|
' <button id="trigger1" class="step-trigger">1</button>',
|
|
' </div>',
|
|
' <div class="step" data-target="#test2">',
|
|
' <button id="trigger2" class="step-trigger">2</button>',
|
|
' </div>',
|
|
' <div id="test1">1</div>',
|
|
' <div id="test2">2</div>',
|
|
'</div>'
|
|
].join('')
|
|
|
|
const stepperNode = document.getElementById('myStepper')
|
|
const stepper = new Stepper(stepperNode, { linear: false })
|
|
|
|
const trigger1 = document.querySelector('#trigger1')
|
|
const trigger2 = document.querySelector('#trigger2')
|
|
|
|
spyOn(trigger1, 'removeEventListener')
|
|
spyOn(trigger2, 'removeEventListener')
|
|
|
|
stepper.destroy()
|
|
|
|
expect(trigger1.removeEventListener).toHaveBeenCalled()
|
|
expect(trigger2.removeEventListener).toHaveBeenCalled()
|
|
})
|
|
})
|
|
})
|