O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Vuejs testing

16.976 visualizações

Publicada em

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

Publicada em: Software
  • Entre para ver os comentários

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(); } };

×