Inisital Asset Commit
This commit is contained in:
Hickmeister
677
assets/plugins/bs-stepper/js/index.spec.js
Normal file
677
assets/plugins/bs-stepper/js/index.spec.js
Normal file
@@ -0,0 +1,677 @@
|
||||
/* 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()
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user