Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vuejs testing

15,706 views

Published on

Unit tests with VueJS.
This summaries the not so obvious parts of testing a VueJS application.

Published in: Software

Vuejs testing

  1. 1. Unit Tests In Tappero Gregory 2016 - WyzAnt.
  2. 2. Tooling. { "karma-mocha": "^0.2.1", "karma-chai": "^0.1.0", "karma-chai-as-promised": "^0.1.2", "karma-sinon": "^1.0.4", "karma-sinon-chai": "^1.2.0", "karma-sinon-stub-promise": "^1.0.0", "whatwg-fetch": "^0.11.0" "fetch-mock": "^4.1.0", }
  3. 3. Testing a filter. import { prettybytes } from 'src/filters'; describe('Filter "prettybytes".', () => { it('Prettybytes shows the right KB, MB, GB, TB unit.', () => { expect(prettybytes(1024)).to.equal('1 KB'); expect(prettybytes(1048576)).to.equal('1 MB'); expect(prettybytes(1048576*1024)).to.equal('1 GB'); expect(prettybytes(1048576*1048576)).to.equal('1 TB'); expect(prettybytes(230)).to.equal('230 Bytes'); }); });
  4. 4. Testing an API call, mocking fetch. import { authentify } from 'src/store/actions/auth'; import fetchMock from 'fetch-mock'; import { fetchUserToken } from 'src/api/web'; describe('Authentify action', () => { let sandbox; beforeEach(() => { sandbox = sinon.sandbox.create(); }); afterEach(() => { sandbox.restore(); fetchMock.restore(); }); it('FetchUserToken should eventually resolve with a token.', () => { fetchMock.mock('/login/getaccesstoken/', { Model: ' ' }); return fetchUserToken().should.eventually.equal(' '); }); });
  5. 5. Testing a component (1/2). import Vue from 'vue'; import FinalCountdown from 'src/components/workflow/FinalCountdown'; describe('workflow/FinalCountDown component.', () => { const getComponent = (date) => { let vm = new Vue({ template: '<div><final-countdown v-ref:component :date="date"></final-countdown></div>', components: { FinalCountdown }, data: { date } }); return vm; }; ...
  6. 6. Testing a component (2/2). it('Should render correctly with a date in the future.', () => { const tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); const vm = getComponent(tomorrow).$mount(); expect(vm.$el).to.be.ok; // Counter should show 23:59:59 // timeUntilExpiration is a component method. expect(vm.$refs.component.timeUntilExpiration()).to.equal('23:59:59'); // Priority should be normal. expect(vm.$refs.component.priorityLevel()).to.equal('normal'); });
  7. 7. Testing a component property change. it('Should be valid only when a radio option is selected.', () => { const vm = getComponent('Bob').$mount(); const component = vm.$refs.component; expect(component.isFormValid).to.be.false; component.picked = 3; component.$nextTick(() => { expect(component.isFormValid).to.be.true; }); });
  8. 8. Testing a component event. it('Send should dispatch "declinedWorkflowTask" with the choice payload.', () => { const vm = getComponent('Bob').$mount(); const component = vm.$refs.component; let spy = sinon.spy(); vm.$on('declinedWorkflowTask', spy); component.sendReply(); expect(spy).to.have.been.calledWith({ choice: null, text: '' }); });
  9. 9. Testing a component ready() hook. it('Should focus on textarea when ready.', (done) => { const vm = getComponent(); const component = vm.$refs.component; // Action triggered by Message Template child component. fetchMock.mock('/tutor/templates', [{ title: 'template A', body: 'AAA' }, { title: 'template B', body: 'BBB' }]); // Triggers ready() on our component. vm.$appendTo(document.body); component.$nextTick(() => { expect(document.activeElement).to.equal(component.$els.textarea); done(); }) });
  10. 10. Testing with a Vuex store. import store from 'src/store'; describe('workflow/WorkflowAccept component.', () => { // Update store states here or import from fixtures. store.state.availability = { … }; const getComponent = () => { let vm = new Vue({ template: '<div><workflow-accept v-ref:component></workflow-accept></div>', components: { WorkflowAccept }, // Inject store here. store: store }); return vm.$mount(); };
  11. 11. Testing a Vuex action (1/2). import { sendInitialDirectContactResponse } from 'src/store/actions/workflow'; import store from 'src/store'; const state = store.state; import { testAction } from './helper'; describe('sendInitialDirectContactResponse action.', () => { beforeEach(() => { state.workflow.workflowTask = { id: 1, conversationThread: { id: 2, }, initialDirectContact: { id: 3, }, }; ... });
  12. 12. Testing a Vuex action (2/2). it('Should dispatch the right mutations.', (done) => { testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [ { name: 'DELETE_WORKFLOW_TASK', payload: [1] }, { name: 'ADD_CONVERSATION_THREAD_TO_TOP' }, { name: 'UPDATE_CONVERSATION_THREAD' }, ], done); }); it('Should not dispatch ADD_CONVERSATION_THREAD_TO_TOP if ...', (done) => { state.app.menuSelection = 'archived'; testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [ { name: 'DELETE_WORKFLOW_TASK', payload: [1] }, ], done); });
  13. 13. Testing a Vuex action - testaction.js (1/2). // Helper for testing action with expected mutations. export function testAction(action, args, state, expectedMutations, done) { let count = 0; // mock dispatch const dispatch = (name, ...payload) => { const mutation = expectedMutations[count]; expect(mutation.name).to.equal(name); // if our mutation has a payload and our expected mutation // wants us to assert this payload. if (payload && mutation.payload) { expect(mutation.payload).to.deep.equal(payload); } count++; if (count === expectedMutations.length) { done(); }
  14. 14. Testing a Vuex action - testaction.js (2/2) // ... if (count > expectedMutations.length) { // Missing non expected mutations. // List all expected mutations! expect(count).to.equal(expectedMutations.length); } } // call the action with mocked store and arguments action({ dispatch, state }, ...args); // check if no mutations should have been dispatched if (count === 0) { expect(expectedMutations.length).to.equal(0); done(); } };

×