Background information
As a developer I want to research and add the jest testing framework to the PIRS prototype so that I may write test cases.
Questions
- Can I test that a component will render.
test('tests activeStep data default is 1', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
expect(vm.activeStep).toBe(1)
});- Can I test that a component has data.
test('tests cards array not empty', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
expect(vm.cards.length).toBeGreaterThan(0)
});- Can I test a component method.
test('tests goToStep() method changes to 3', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
vm.goToStep(3)
expect(vm.activeStep).toBe(3)
});- What files are needed?
update extension.json to include the jest npm script, create and configure jest.config.js and jest.setup.js accordingly, I used the configuration from QuickSurveys as an example configuration setup.
Sample Test Suite Using Jest
const Main = require('../../resources/components/App');
const utils = require("@vue/test-utils");
describe('Main Component Test Suite', () => {
test('tests activeStep default is 1', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
expect(vm.activeStep).toBe(1)
});
test('tests goToStep() method changes to 3', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
vm.goToStep(3)
expect(vm.activeStep).toBe(3)
});
test('tests cards array not empty', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
expect(vm.cards.length).toBeGreaterThan(0)
});
test('tests cards 2 array not empty', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
expect(vm.cards2.length).toBeGreaterThan(0)
});
test('test addReason method', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
vm.addReason(1,'Someone is wikihounding me')
expect(vm.reason_1).toBe('Someone is wikihounding me')
});
test('test addReason method 2', () => {
const wrapper = utils.shallowMount(Main)
const vm = wrapper.vm
vm.addReason(2,'Threats or violence')
expect(vm.reason_2).toBe('Threats or violence')
});
});Sample Coverage Output
essexigyan@wmf2920 Pirs % npm test
> pirs@0.0.0 test /Users/essexigyan/apps/mediawiki/extensions/Pirs
> jest
PASS tests/jest/app.test.js
Main Component Test Suite
✓ tests activeStep default is 1 (17 ms)
✓ tests goToStep() method changes to 3 (5 ms)
✓ tests cards array not empty (3 ms)
✓ tests cards 2 array not empty (2 ms)
✓ test addReason method (3 ms)
✓ test addReason method 2 (3 ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 77.5 | 87.5 | 46.15 | 77.5 |
App.vue | 77.5 | 87.5 | 46.15 | 77.5 | 106-137
----------|---------|----------|---------|---------|-------------------
Jest: "global" coverage threshold for functions (80%) not met: 46.15%
Test Suites: 1 passed, 1 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 2.653 s
Ran all test suites.