This repository has been archived by the owner on Jun 1, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 244
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b987a0c
commit 8351c62
Showing
6 changed files
with
1,043 additions
and
951 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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('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('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('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() | ||
| }) | ||
| }) | ||
|
|
||
| }) |
Oops, something went wrong.