/* 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()
    })
  })
})