Test-Driven Development in Vue with Cypress

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

@CodingItWrong
I want to help developers
build great apps and go home.

We're hiring!
bignerdranch.com/careers

JavaScript
Testing
Is Getting Big

Test-Driven Development:
Writing your tests
before you write
the code that passes them.

Why
TDD?7 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

1. A Way to
Get Started
Testing8 TDD in Vue with Cypress - @CodingItWrong - connect.tech 2018

2. Help Avoiding
Testing the
Implementation

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

Focusing on
Functionality

Focusing on
Functionality
-> Spaghetti

Focusing on
Design

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

Focusing on
Flexibility

Focusing on
Flexibility
-> Overdesign

1. Spaghetti
2. Design Deterioriation
3. Overdesign

2 Guidelines

1. Build the
bare minimum
you need right now

2. Make the code
easy to change
for when you need
something else

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

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

TDD

Outside-In TDD

Requirement:
As a user, I want to be able to
send a message.

Write a feature test
that specifies what the
user wants to do.

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

Run the test and watch
it fail.

Write only enough code
to fix the current error
or failure.

<template>
<div>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>

Write the code you
wish you had.

<template>
<div>
<new-message-form />
</div>
</template>
<script>
import NewMessageForm from './components/NewMessageForm';
export default {
name: 'App',
components: {
NewMessageForm,
},
};
</script>

<template>
<div>
<input
type="text"
data-test="messageText"
/>
</div>
</template>
<script>
export default {
name: 'NewMessageForm',
};
</script>

Focusing on fixing the
current error keeps
your code minimal, so
easier to change

Rerun the feature test
and see what
the next failure is

type="text"
/>
<button
data-test="saveButton"
>
Save
</button>
</div>
</template>

When you get a
behavior error,
step down to a
component test.

Component tests keep
your code changeable:
the component
behavior is specified,
so we can reuse it.

Write just enough
component test to
reproduce the current
feature test failure.

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 ﬁeld', () => {
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
cy.get('[data-test="messageText"]').should('have.value', '');
});
});
});

export default {
name: 'NewMessageForm',
data() {
return {
inputText: '',
};
},
methods: {
save() {
this.inputText = '';
},
},
};

When the Component Test Passes,
Step back up to the feature
test to see the next failure

});
});

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

Testing the contract
lets you change the
implementation.

Make
One Assertion Per Test
in Unit Tests

beforeEach(() => {
});
});
});

let saveHandler;
beforeEach(() => {
saveHandler = cy.spy();
Cypress.vue.$on('save', saveHandler);
});
});
it('emits the "save" event', () => {
expect(saveHandler).to.have.been.calledWith('New message');
});
});

methods: {
save() {
this.$emit('save', this.inputText);
this.inputText = '';
},
},

components: {
NewMessageForm,
},
data() {
return {
messages: [],
};
},
methods: {
addMessage(newMessage) {
this.messages.unshift(newMessage);
},
},
};

import NewMessageForm from './components/NewMessageForm';
import MessageList from './components/MessageList';
export default {
name: 'App',
components: {
NewMessageForm,
MessageList,
},

<template>
<ul>
<li v-for="message in messages" :key="message">
{{ message }}
</li>
</ul>
</template>
<script>
export default {
name: 'MessageList',
props: ['messages'],
};
</script>

Outside-In TDD

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

Imagine…

Imagine…
…when you finish
building your feature
it's already fully
covered by tests.

Imagine…
…always having a
simple next step:
write a test. Or fix
the next test failure.

Imagine…
…delivering useful functionality
every few hours,
instead of working for days
on code that might not end up used.

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

twitch.tv/codingitwrong

Thanks!
@CodingItWrong
Resources: bit.ly/vue-tdd
Tweet me at @CodingItWrong!

Test-Driven Development in Vue with Cypress

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Test-Driven Development in Vue with Cypress

Similar to Test-Driven Development in Vue with Cypress (20)

More from Josh Justice

More from Josh Justice (15)

Recently uploaded

Recently uploaded (20)

Test-Driven Development in Vue with Cypress