As your Vue app grows, are you slowed down by fragile or difficult-to-understand code? Test-Driven Development can help! It makes your code simpler, easier to refactor, and quicker to ship. We'll walk through a demonstration of using Cypress tests with Vue CLI 3 to drive your code for a higher-quality codebase.
6. Test-Driven Development:
Writing your tests
before you write
the code that passes them.
6 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
7. Why
TDD?7 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
8. 1. A Way to
Get Started
Testing8 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
9. 2. Help Avoiding
Testing the
Implementation
9 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
44. 44 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
45. When you get a
behavior error,
step down to a
component test.
45 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
46. Component tests keep
your code changeable:
the component
behavior is specified,
so we can reuse it.
46 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
47. Write just enough
component test to
reproduce the current
feature test failure.
47 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
48. import mountVue from 'cypress-vue-unit-test';
import NewMessageForm from '../../../src/components/NewMessageForm';
describe('NewMessageForm', () => {
beforeEach(mountVue(NewMessageForm));
describe('clicking the save button', () => {
it('clears the text field', () => {
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
cy.get('[data-test="messageText"]').should('have.value', '');
});
});
});
48 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
49. 49 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
52. 52 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
53. When the Component Test Passes,
Step back up to the feature
test to see the next failure
53 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
54. 54 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
55. describe('clicking the save button', () => {
it('clears the text field', () => {
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
cy.get('[data-test="messageText"]').should('have.value', '');
});
});
55 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
56. Contract Testing
“Other components can assume the component will fulfill its
contractual promise that it will produce the expected output if given
the correct input.”
-- Edd Yerburgh, Testing Vue.js Applications
56 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
57. Testing the contract
lets you change the
implementation.
57 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
58. Make
One Assertion Per Test
in Unit Tests
58 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
59. describe('clicking the save button', () => {
beforeEach(() => {
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
});
it('clears the text field', () => {
cy.get('[data-test="messageText"]').should('have.value', '');
});
});
59 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
60. describe('clicking the save button', () => {
let saveHandler;
beforeEach(() => {
saveHandler = cy.spy();
Cypress.vue.$on('save', saveHandler);
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
});
it('clears the text field', () => {
cy.get('[data-test="messageText"]').should('have.value', '');
});
it('emits the "save" event', () => {
expect(saveHandler).to.have.been.calledWith('New message');
});
});
60 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
61. 61 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
74. Imagine…
74 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
75. Imagine…
…when you finish
building your feature
it's already fully
covered by tests.
75 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018
76. Imagine…
…always having a
simple next step:
write a test. Or fix
the next test failure.
76 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018