1.
Test-Driven
Development
in Vue with Cypress
Josh Justice
1 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

2.
@CodingItWrong
I want to help developers
build great apps and go home.
2 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

3.
We're hiring!
bignerdranch.com/careers
3 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

4.
4 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

5.
JavaScript
Testing
Is Getting Big
5 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

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

10.
3. Simple
Design10 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

11.
Focusing on
Functionality
11 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

12.
Focusing on
Functionality
-> Spaghetti
12 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

13.
Focusing on
Design
13 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

14.
Focusing on
Design
-> Deterioration14 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

15.
Focusing on
Flexibility
15 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

16.
Focusing on
Flexibility
-> Overdesign
16 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

17.
1. Spaghetti
2. Design Deterioriation
3. Overdesign
17 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

18.
2 Guidelines
18 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

19.
1. Build the
bare minimum
you need right now
19 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

20.
2. Make the code
easy to change
for when you need
something else
20 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

21.
Minimal,
Changeable
Code21 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

22.
Visualize
the
Payoff22 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

23.
23 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

24.
TDD
24 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

25.
Outside-In TDD
25 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

26.
26 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

27.
27 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

28.
28 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

29.
29 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

30.
Requirement:
As a user, I want to be able to
send a message.
30 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

31.
Write a feature test
that specifies what the
user wants to do.
31 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

32.
describe('Creating a message', () => {
it('Displays the message in the list', () => {
cy.visit('/');
cy.get('[data-test="messageText"]')
.type('New message');
cy.get('[data-test="saveButton"]')
.click();
cy.get('[data-test="messageText"]')
.should('have.value', '');
cy.contains('New message');
});
});
32 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

33.
Run the test and watch
it fail.
33 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

34.
34 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

35.
Write only enough code
to fix the current error
or failure.
35 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

36.
<template>
<div>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
36 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

37.
Write the code you
wish you had.
37 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

38.
<template>
<div>
<new-message-form />
</div>
</template>
<script>
import NewMessageForm from './components/NewMessageForm';
export default {
name: 'App',
components: {
NewMessageForm,
},
};
</script>
38 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

39.
<template>
<div>
<input
type="text"
data-test="messageText"
/>
</div>
</template>
<script>
export default {
name: 'NewMessageForm',
};
</script>
39 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

40.
Focusing on fixing the
current error keeps
your code minimal, so
easier to change
40 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

41.
Rerun the feature test
and see what
the next failure is
41 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

42.
42 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

43.
type="text"
data-test="messageText"
/>
<button
data-test="saveButton"
>
Save
</button>
</div>
</template>
43 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

50.
<input
type="text"
data-test="messageText"
v-model="inputText"
/>
<button
data-test="saveButton"
@click="save"
>
Save
</button>
50 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

51.
export default {
name: 'NewMessageForm',
data() {
return {
inputText: '',
};
},
methods: {
save() {
this.inputText = '';
},
},
};
51 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

62.
methods: {
save() {
this.$emit('save', this.inputText);
this.inputText = '';
},
},
62 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

63.
63 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

64.
64 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

65.
<template>
<div>
<new-message-form @save="addMessage" />
</div>
</template>
65 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

66.
components: {
NewMessageForm,
},
data() {
return {
messages: [],
};
},
methods: {
addMessage(newMessage) {
this.messages.unshift(newMessage);
},
},
};
66 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

67.
<template>
<div>
<new-message-form @save="addMessage" />
<message-list :messages="messages" />
</div>
</template>
67 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

68.
import NewMessageForm from './components/NewMessageForm';
import MessageList from './components/MessageList';
export default {
name: 'App',
components: {
NewMessageForm,
MessageList,
},
68 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

69.
<template>
<ul>
<li v-for="message in messages" :key="message">
{{ message }}
</li>
</ul>
</template>
<script>
export default {
name: 'MessageList',
props: ['messages'],
};
</script>
69 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

70.
70 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

71.
71 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

72.
Outside-In TDD
72 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

73.
Minimal,
Changeable
Code73 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

77.
Imagine…
…delivering useful functionality
every few hours,
instead of working for days
on code that might not end up used.
77 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

78.
learntdd.in/vue78 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

79.
twitch.tv/codingitwrong
79 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

80.
80 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

81.
81 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

82.
82 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

83.
Thanks!
@CodingItWrong
Resources: bit.ly/vue-tdd
Tweet me at @CodingItWrong!
83 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018