Add basic unit tests with avoriaz

build/webpack.test.conf.js

@@ -11,6 +11,13 @@ var webpackConfig = merge(baseConfig, {
     rules: utils.styleLoaders()
   },
   devtool: '#inline-source-map',
+  resolveLoader: {
+    alias: {
+      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
+      // see discussion at https://github.com/vuejs/vue-loader/issues/724
+      'scss-loader': 'sass-loader'
+    }
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/test.env')

package.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
+    "avoriaz": "^4.1.0",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
@@ -44,7 +45,7 @@
     "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^3.1.4",
+    "cross-env": "^5.0.5",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.26.1",
     "eslint": "^3.14.1",
@@ -84,7 +85,7 @@
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "sinon": "^2.1.0",
+    "sinon": "^3.2.1",
     "sinon-chai": "^2.8.0",
     "stats-webpack-plugin": "^0.6.0",
     "url-loader": "^0.5.8",

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 VueFormWizard from './../../../src/index'
-import TabContent from './../../../src/components/TabContent.vue'
+import {TabContent as WizardTab, WizardStep, FormWizard} from './../../../src/index'
+import {mount} from 'avoriaz'
+import sinon from 'sinon'
 
-function init () {
+Vue.use(VueFormWizard)
-  Vue.component('form-wizard', VueFormWizard)
+const startIndex = 0
-  Vue.component('tab-content', TabContent)
+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(() => {
+  it('contains wizard class', () => {
-    init()
+    const wizard = mount(twoStepWizard)
+    wizard.hasClass('vue-form-wizard')
   })
-  it('should render correct contents', (done) => {
+  it('renders steps', (done) => {
-    const vm = new Vue({
+    const wizard = mount(twoStepWizard)
-      template: `<form-wizard ref="wizard">
+    Vue.nextTick(() => {
-                   <tab-content>First</tab-content> 
+      const steps = wizard.find(WizardStep)
-                   <tab-content>Second</tab-content> 
+      const firsStep = steps[0]
-                </form-wizard>`
+      expect(steps.length).to.equal(3)
-    }).$mount()
+      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]
+      inactiveTabs.forEach((tab) => {
-    let wizardComp = vm.$refs.wizard
+        expect(tab.hasStyle('display', 'none')).to.equal(true)
-    expect(wizard.$children.length).to.equal(2)
+      })
-    expect(wizardComp.activeTabIndex).to.equal(0)
+      done()
-    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()
+    })
+  })
+
 })