Add basic unit tests with avoriaz

test/unit/index.js

@@ -9,5 +9,5 @@ testsContext.keys().forEach(testsContext)
 // require all src files except main.js for coverage.
 // you can also change this to match only the subset of files that
 // you want coverage for.
-const srcContext = require.context('../../src', true, /^\.\/(?!main\.js$).+\.(js|vue)$/i)
+const srcContext = require.context('../../src', true, /^\.\/(?!index\.js$).+\.(js|vue)$/i)
 srcContext.keys().forEach(srcContext)

test/unit/karma.conf.js

@@ -13,7 +13,7 @@ module.exports = function (config) {
     // 2. add it to the `browsers` array below.
     browsers: ['PhantomJS'],
     frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
-    reporters: ['spec', 'coverage'],
+    reporters: ['spec','progress', 'coverage'],
     files: ['./index.js'],
     preprocessors: {
       './index.js': ['webpack', 'sourcemap']

test/unit/specs/FormWizard.spec.js

@@ -1,28 +1,95 @@
 import Vue from 'vue'
-import VueFormWizard from './../../../src/components/FormWizard.vue'
-import TabContent from './../../../src/components/TabContent.vue'
+import VueFormWizard from './../../../src/index'
+import {TabContent as WizardTab, WizardStep, FormWizard} from './../../../src/index'
+import {mount} from 'avoriaz'
+import sinon from 'sinon'
 
-function init () {
-  Vue.component('form-wizard', VueFormWizard)
-  Vue.component('tab-content', TabContent)
+Vue.use(VueFormWizard)
+const startIndex = 0
+const twoStepWizard = {
+  template: `<form-wizard :start-index="startIndex">
+              <tab-content title="Personal details"
+                           icon="ti-user">
+                My first tab content
+              </tab-content>
+              <tab-content title="Additional Info"
+                           icon="ti-settings">
+                My second tab content
+              </tab-content>
+              <tab-content title="Last step"
+                           icon="ti-settings">
+                My third tab content
+              </tab-content>
+          </form-wizard>`,
+  data () {
+    return {
+      startIndex: startIndex
+    }
+  }
 }
-
 describe('FormWizard.vue', () => {
-  beforeEach(() => {
-    init()
+  it('contains wizard class', () => {
+    const wizard = mount(twoStepWizard)
+    wizard.hasClass('vue-form-wizard')
   })
-  it('should render correct contents', (done) => {
-    const vm = new Vue({
-      template: `<form-wizard ref="wizard">
-                   <tab-content>First</tab-content> 
-                   <tab-content>Second</tab-content> 
-                </form-wizard>`
-    }).$mount()
+  it('renders steps', (done) => {
+    const wizard = mount(twoStepWizard)
+    Vue.nextTick(() => {
+      const steps = wizard.find(WizardStep)
+      const firsStep = steps[0]
+      expect(steps.length).to.equal(3)
+      expect(firsStep.hasClass('active'))
+      const stepTitle = firsStep.find('.stepTitle')[0]
+      expect(stepTitle.is('span')).to.equal(true)
+      const stepText = stepTitle.text().trim()
+      expect(stepText).to.equal('Personal details')
+      done()
+    })
+  })
+  it('renders tabs', (done) => {
+    const wizard = mount(twoStepWizard)
+    Vue.nextTick(() => {
+      const tabs = wizard.find(WizardTab)
+      expect(tabs.length).to.equal(3)
+      done()
+    })
+  })
+  it('displays only one tab', (done) => {
+    const wizard = mount(twoStepWizard)
+    Vue.nextTick(() => {
+      const tabs = wizard.find(WizardTab)
+      const activeTabs = tabs.filter((tab) => tab.data().active)
+      const inactiveTabs = tabs.filter((tab) => !tab.data().active)
+      expect(activeTabs.length).to.equal(1)
 
-    let wizard = vm.$children[0]
-    let wizardComp = vm.$refs.wizard
-    expect(wizard.$children.length).to.equal(2)
-    expect(wizardComp.activeTabIndex).to.equal(0)
-    done()
+      inactiveTabs.forEach((tab) => {
+        expect(tab.hasStyle('display', 'none')).to.equal(true)
+      })
+      done()
+    })
   })
+  it('starts at a given index', (done) => {
+    const wizard = mount(twoStepWizard)
+    Vue.nextTick(() => {
+      const tabs = wizard.find(WizardTab)
+      const activeTab = tabs[startIndex]
+      expect(activeTab.data().active).to.equal(true)
+      const formWizard = wizard.find(FormWizard)[0]
+      expect(formWizard.data().activeTabIndex).to.equal(startIndex)
+      done()
+    })
+  })
+  it('next tab is called', (done) => {
+    const wizard = mount(twoStepWizard)
+    const nextTabHandler = sinon.stub()
+    const formWizard = wizard.find(FormWizard)[0]
+    formWizard.setMethods({nextTab: nextTabHandler})
+    Vue.nextTick(() => {
+      const nextButton = wizard.find('.wizard-footer-right span')[0]
+      nextButton.trigger('click')
+      expect(nextTabHandler.called).to.equal(true)
+      done()
+    })
+  })
+
 })