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

1. Unit Tests
In
Tappero Gregory
2016 - WyzAnt.

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