diff --git a/package.json b/package.json
index a6555fd..6cc3e18 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.1.0",
"phantomjs-polyfill": "^0.0.2",
+ "phantomjs-polyfill-find": "^0.0.1",
"phantomjs-polyfill-find-index": "^1.0.1",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^2.6.0",
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 98fecee..84c064a 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -264,6 +264,12 @@
})
this.navigateToTab(0)
},
+ activateAll () {
+ this.maxStep = this.tabs.length - 1
+ this.tabs.forEach((tab) => {
+ tab.checked = true
+ })
+ },
navigateToTab (index) {
let validate = index > this.activeTabIndex
if (index <= this.maxStep) {
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index c9af4a9..70d3175 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -15,7 +15,9 @@ module.exports = function (config) {
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim', 'polyfill'],
polyfill: ['findIndex'],
reporters: ['spec','progress', 'coverage'],
- files: ['./index.js', './../../node_modules/phantomjs-polyfill-find-index/findIndex-polyfill.js',],
+ files: ['./index.js',
+ './../../node_modules/phantomjs-polyfill-find-index/findIndex-polyfill.js',
+ './../../node_modules/phantomjs-polyfill-find/find-polyfill.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
diff --git a/test/unit/specs/FormWizard.spec.js b/test/unit/specs/FormWizard.spec.js
index 7307b23..eece905 100644
--- a/test/unit/specs/FormWizard.spec.js
+++ b/test/unit/specs/FormWizard.spec.js
@@ -2,9 +2,25 @@ import VueFormWizard, {TabContent as WizardTab, WizardStep, FormWizard} from './
import {mount, createLocalVue} from 'vue-test-utils'
import sinon from 'sinon'
import Vue from 'vue'
+import VueRouter from 'vue-router'
const localVue = createLocalVue()
localVue.use(VueFormWizard)
+localVue.use(VueRouter)
+
+const First = {template: '
First page
'}
+const Second = {template: 'Second page
'}
+const Third = {template: 'Third page
'}
+
+const router = new VueRouter({
+ routes: [
+ {path: '/first', component: First},
+ {path: '/second', component: Second},
+ {path: '/third', component: Third}
+ ]
+})
+
+
const startIndex = 0
let validationMethod = sinon.stub()
validationMethod.returns(true)
@@ -16,6 +32,7 @@ let initialWizard = {
My first tab content
My second tab content
@@ -27,12 +44,31 @@ let initialWizard = {
data () {
return {
startIndex: startIndex,
- showLastStep: true
+ showLastStep: true,
+ showSecondStep: true
}
}
}
let threeStepWizard = initialWizard
+let routerWizard = {
+ template: `
+
+
+
+
+
+
+
+ `
+}
+
const divSlot = `
@@ -108,6 +144,25 @@ describe('FormWizard.vue', () => {
done()
})
})
+ it('tabs in the same order when a tab before the active tab is removed', (done) => {
+ const wizard = mount(threeStepWizard, {localVue})
+ const wizardInstance = wizard.find(FormWizard)
+ const tabs = wizard.findAll(WizardTab)
+ expect(tabs.length).to.equal(3)
+ // navigate to last step
+ wizardInstance.vm.nextTab()
+ wizardInstance.vm.nextTab()
+ // remove second step
+ wizard.setData({showSecondStep: false})
+ Vue.nextTick(() => {
+ const newTabs = wizard.findAll(WizardTab)
+ expect(newTabs.length).to.equal(2)
+ const lastTab = newTabs.at(1)
+ expect(lastTab.vm.active).to.equal(true)
+ expect(lastTab.vm.title).to.equal('Last step')
+ done()
+ })
+ })
})
it('warns when start index is incorrect', () => {
@@ -137,6 +192,25 @@ describe('FormWizard.vue', () => {
expect(wizardInstance.vm.activeTabIndex).to.equal(0)
})
+ it('activates all steps', (done) => {
+ const wizard = mount(threeStepWizard, {localVue})
+ const wizardInstance = wizard.find(FormWizard)
+ let tabs = wizard.findAll(WizardTab)
+ let maxStepIndex = tabs.length - 1
+ wizardInstance.vm.activateAll()
+
+ Vue.nextTick(() => {
+ expect(wizardInstance.vm.activeTabIndex).to.equal(0)
+ expect(wizardInstance.vm.maxStep).to.equal(maxStepIndex)
+ // direct navigation should be available
+ wizardInstance.vm.navigateToTab(maxStepIndex)
+ expect(wizardInstance.vm.activeTabIndex).to.equal(maxStepIndex)
+ let steps = wizardInstance.findAll('.wizard-icon-circle')
+ expect(steps.hasClass('checked')).to.equal(true)
+ done()
+ })
+ })
+
describe('navigation', () => {
it('next tab is called', () => {
const wizard = mount(threeStepWizard, {localVue})
@@ -194,7 +268,7 @@ describe('FormWizard.vue', () => {
it('active tab is prev when current active tab is removed', (done) => {
const wizard = mount(threeStepWizard, {localVue})
const wizardInstance = wizard.find(FormWizard)
- //navigate to last tab
+ // navigate to last tab
wizardInstance.vm.nextTab()
wizardInstance.vm.nextTab()
const tabs = wizard.findAll(WizardTab)
@@ -218,8 +292,8 @@ describe('FormWizard.vue', () => {
wizard.trigger('keyup.left')
expect(wizardInstance.vm.activeTabIndex).to.equal(2)
})
-
})
+
describe('emits', () => {
it('on-complete upon last step', () => {
const wizard = mount(threeStepWizard, {localVue})
@@ -232,8 +306,6 @@ describe('FormWizard.vue', () => {
expect(wizardInstance.emitted()['on-complete'].length).to.equal(1)
})
})
-
-
describe('validation with', () => {
beforeEach(() => {
threeStepWizard = {
@@ -314,6 +386,30 @@ describe('FormWizard.vue', () => {
})
})
})
+ describe('with vue-router', ()=> {
+ it('renders correct tab contents', () => {
+ const wizard = mount(routerWizard, {localVue, router})
+ const wizardInstance = wizard.find(FormWizard)
+ let tabs = wizardInstance.findAll(WizardTab)
+ let firstTab = tabs.at(0)
+ expect(tabs.length).to.equal(3)
+ expect(firstTab.vm.route).to.equal(wizardInstance.vm.$route.path)
+ })
+
+ it('adapts to valid route changes when steps are visited', (done) => {
+ const wizard = mount(routerWizard, {localVue, router})
+ const wizardInstance = wizard.find(FormWizard)
+ let tabs = wizardInstance.findAll(WizardTab)
+ wizardInstance.vm.activateAll()
+ wizardInstance.vm.$router.push('/second')
+ Vue.nextTick(()=> {
+ let secondTab = tabs.at(1)
+ expect(secondTab.vm.route).to.equal(wizardInstance.vm.$route.path)
+ expect(secondTab.vm.active).to.equal(true)
+ done()
+ })
+ })
+ })
})
diff --git a/yarn.lock b/yarn.lock
index a5c7b57..0152dd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4783,6 +4783,10 @@ phantomjs-polyfill-find-index@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/phantomjs-polyfill-find-index/-/phantomjs-polyfill-find-index-1.0.1.tgz#ffd8d636abc27e87fec57d47033b687967810c37"
+phantomjs-polyfill-find@^0.0.1:
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/phantomjs-polyfill-find/-/phantomjs-polyfill-find-0.0.1.tgz#e5ba611361ecb4a969ffd5137638c811c9797be2"
+
phantomjs-polyfill@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/phantomjs-polyfill/-/phantomjs-polyfill-0.0.2.tgz#8c6a7163e9bc8fd9ffdbe7d605cb5352f9fb891e"