-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[unit-test] Add tests for vue components and mixins
- Loading branch information
1 parent
eda8c79
commit 1e8131f
Showing
12 changed files
with
1,537 additions
and
5,951 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,7 +1,67 @@ | ||
| /* eslint-disable no-unused-expressions, max-nested-callbacks */ | ||
|
|
||
| import { createLocalVue, shallowMount } from '@vue/test-utils'; | ||
| import { expect } from 'chai'; | ||
| import { Modal } from '../../../'; | ||
| import Vuex from 'vuex'; | ||
| import cloneDeep from 'lodash.clonedeep'; | ||
| import overalyModule from '../../modules/overlay'; | ||
|
|
||
| const localVue = createLocalVue(); | ||
|
|
||
| localVue.use(Vuex); | ||
|
|
||
| describe('Modal spec', () => { | ||
| it('The modal is a valid vue component', () => { | ||
| expect(true).to.be.equal(true); | ||
| function getDummyModalComponentOptions(customOptions = {}) { | ||
| const store = new Vuex.Store({ | ||
| modules: { | ||
| overlay: cloneDeep(overalyModule), | ||
| }, | ||
| }); | ||
|
|
||
| return { | ||
| store, | ||
| localVue, | ||
| ...customOptions, | ||
| }; | ||
| } | ||
|
|
||
| it('The modal is an object', () => { | ||
| expect(Modal).to.be.an('object'); | ||
| expect(Modal).to.be.not.empty; | ||
| }); | ||
|
|
||
| it('It can be properly created without slots', () => { | ||
| const wrapper = shallowMount(Modal, getDummyModalComponentOptions()); | ||
|
|
||
| expect(wrapper.find('.modal').exists()).to.be.ok; | ||
| }); | ||
|
|
||
| it('Slots markup will not be rendered if not needed', () => { | ||
| const wrapper = shallowMount(Modal, getDummyModalComponentOptions()); | ||
|
|
||
| expect(wrapper.find('.modal--header').exists()).to.be.not.ok; | ||
| expect(wrapper.find('.modal--body').exists()).to.be.not.ok; | ||
| expect(wrapper.find('.modal--footer').exists()).to.be.not.ok; | ||
| }); | ||
|
|
||
| it('Slots markup rendered if needed', () => { | ||
| const wrapper = shallowMount(Modal, getDummyModalComponentOptions({ | ||
| slots: { | ||
| default: '<div>Default</div>', | ||
| header: '<div>Header</div>', | ||
| footer: '<div>Footer</div>', | ||
| }, | ||
| })); | ||
|
|
||
| expect(wrapper.find('.modal--header').exists()).to.be.ok; | ||
| expect(wrapper.find('.modal--body').exists()).to.be.ok; | ||
| expect(wrapper.find('.modal--footer').exists()).to.be.ok; | ||
| }); | ||
|
|
||
| it('It has the close method', () => { | ||
| const { vm } = shallowMount(Modal, getDummyModalComponentOptions()); | ||
| expect(vm.closeOverlay).to.be.a('function'); | ||
| expect(vm.closeOverlay()).to.not.throw; | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /* eslint-disable no-unused-expressions, max-nested-callbacks */ | ||
|
|
||
| import { createLocalVue, shallowMount } from '@vue/test-utils'; | ||
| import { expect } from 'chai'; | ||
| import { Overlay } from '../../../'; | ||
| import Vuex from 'vuex'; | ||
| import cloneDeep from 'lodash.clonedeep'; | ||
| import overalyModule from '../../modules/overlay'; | ||
|
|
||
| const localVue = createLocalVue(); | ||
|
|
||
| localVue.use(Vuex); | ||
|
|
||
|
|
||
| describe('Overlay spec', () => { | ||
| function getDummyOverlayComponentOptions(customOptions = {}) { | ||
| const store = new Vuex.Store({ | ||
| modules: { | ||
| overlay: cloneDeep(overalyModule), | ||
| }, | ||
| }); | ||
|
|
||
| return { | ||
| store, | ||
| localVue, | ||
| propsData: { | ||
| id: 'foo', | ||
| }, | ||
| ...customOptions, | ||
| }; | ||
| } | ||
|
|
||
| it('The overlay is an object', () => { | ||
| expect(Overlay).to.be.an('object'); | ||
| expect(Overlay).to.be.not.empty; | ||
| }); | ||
|
|
||
| it('It can be properly created without slots', () => { | ||
| const wrapper = shallowMount(Overlay, getDummyOverlayComponentOptions()); | ||
|
|
||
| expect(wrapper.find('.overlay').exists()).to.be.ok; | ||
| }); | ||
|
|
||
| it('It has the close method', () => { | ||
| const { vm } = shallowMount(Overlay, getDummyOverlayComponentOptions()); | ||
|
|
||
| expect(vm.closeOverlay).to.be.a('function'); | ||
| expect(vm.closeOverlay()).to.not.throw; | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /* eslint-disable max-nested-callbacks */ | ||
|
|
||
| import { expect } from 'chai'; | ||
| import { createLocalVue } from '@vue/test-utils'; | ||
| import { DEFAULT_OPTIONS } from './helpers'; | ||
| import bemMixin from './'; | ||
|
|
||
| const ROOT_CLASS = 'root'; | ||
| const localVue = createLocalVue(); | ||
|
|
||
| describe('Bem Mixin', () => { | ||
| describe('Computed properties', () => { | ||
| it('It returns the bemRoot class properly', () => { | ||
| localVue.mixin(bemMixin(ROOT_CLASS)); | ||
| const vm = new localVue(); | ||
|
|
||
| expect(vm.bemRoot).to.be.equal(ROOT_CLASS); | ||
| }); | ||
|
|
||
| it('It returns the bem facets properly', () => { | ||
| localVue.mixin(bemMixin(ROOT_CLASS)); | ||
| const vm = new localVue(); | ||
|
|
||
| expect(vm.bemFacets).to.be.an('array'); | ||
| expect(vm.bemFacets).to.include(`${ ROOT_CLASS }${ DEFAULT_OPTIONS.bemModifierMarker }${ DEFAULT_OPTIONS.defaultFacet }`); | ||
| }); | ||
|
|
||
| it('Custom bem mixin options have also an impact on the computed pros', () => { | ||
| const customOptions = { | ||
| bemModifierMarker: '$$', | ||
| defaultFacet: 'foo', | ||
| bemElementMarker: '??', | ||
| }; | ||
| localVue.mixin(bemMixin(ROOT_CLASS, customOptions)); | ||
| const vm = new localVue(); | ||
|
|
||
| expect(vm.bemFacets).to.be.an('array'); | ||
| expect(vm.bemFacets).to.include(`${ ROOT_CLASS }${ customOptions.bemModifierMarker }${ customOptions.defaultFacet }`); | ||
| }); | ||
| }); | ||
| describe('Methods', () => { | ||
| it('Simple custom facets can be easily added', () => { | ||
| localVue.mixin(bemMixin(ROOT_CLASS)); | ||
| const vm = new localVue(); | ||
| const customFacet = 'foo'; | ||
|
|
||
| expect(vm.bemAdd(customFacet)).to.be.equal(`${ ROOT_CLASS }${ DEFAULT_OPTIONS.bemModifierMarker }${ customFacet }`); | ||
| }); | ||
|
|
||
| it('Complex custom facets can be easily added', () => { | ||
| localVue.mixin(bemMixin(ROOT_CLASS)); | ||
| const vm = new localVue(); | ||
| const rootName = 'I'; | ||
| const elementName = 'like'; | ||
| const customFacet = 'pizzas'; | ||
|
|
||
| expect(vm.bemAdd(customFacet, elementName, rootName)).to.be.equal(`${ rootName }${ DEFAULT_OPTIONS.bemElementMarker }${ elementName }${ DEFAULT_OPTIONS.bemModifierMarker }${ customFacet }`); | ||
| }); | ||
|
|
||
| it('Bem classes can be properly switched conditionally', () => { | ||
| localVue.mixin(bemMixin(ROOT_CLASS)); | ||
| const vm = new localVue(); | ||
| const trueModifier = 'jep'; | ||
| const falseModifier = 'nope'; | ||
|
|
||
| expect(vm.bemIf(true, trueModifier, falseModifier)).to.be.equal(`${ ROOT_CLASS }${ DEFAULT_OPTIONS.bemModifierMarker }${ trueModifier }`); | ||
| expect(vm.bemIf(false, trueModifier, falseModifier)).to.be.equal(`${ ROOT_CLASS }${ DEFAULT_OPTIONS.bemModifierMarker }${ falseModifier }`); | ||
| }); | ||
| }); | ||
| }); |
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
Oops, something went wrong.