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"