Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7bb066

Browse files
authored
Merge pull request #43 from afontcu/master
Improve onboarding by adding explanations
2 parents 07bdd1b + 3d09b68 commit f7bb066

37 files changed

+163
-224
lines changed

‎package-lock.json

Lines changed: 19 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"author": "Daniel Cook",
3232
"license": "MIT",
3333
"dependencies": {
34-
"@testing-library/dom": "^5.0.1",
34+
"@testing-library/dom": "^5.2.0",
3535
"@vue/test-utils": "^1.0.0-beta.29",
3636
"vue": "^2.6.10",
3737
"vue-template-compiler": "^2.6.10"
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`makes an API call and displays the greeting when load-greeting is clicked 1`] = `
4+
<div><button>
5+
Fetch
6+
</button> <span>
7+
hello there
8+
</span></div>
9+
`;

‎tests/__tests__/__snapshots__/fetch.js.snap

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎tests/__tests__/axios-mock.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import axiosMock from 'axios'
2+
import { render, fireEvent } from '@testing-library/vue'
3+
import Component from './components/Fetch.vue'
4+
import 'jest-dom/extend-expect'
5+
6+
test('makes an API call and displays the greeting when load-greeting is clicked', async () => {
7+
axiosMock.get.mockImplementationOnce(() =>
8+
Promise.resolve({
9+
data: { greeting: 'hello there' }
10+
})
11+
)
12+
13+
const { html, getByText } = render(Component, { props: { url: '/greeting' } })
14+
15+
// Act
16+
await fireEvent.click(getByText('Fetch'))
17+
18+
expect(axiosMock.get).toHaveBeenCalledTimes(1)
19+
expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
20+
getByText('hello there')
21+
22+
// You can render component snapshots by using html(). However, bear in mind
23+
// that Snapshot Testing should not be treated as a replacement for regular
24+
// tests.
25+
// More about the topic: https://twitter.com/searls/status/919594505938112512
26+
expect(html()).toMatchSnapshot()
27+
})

‎tests/__tests__/components/Button.vue

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
<template>
2-
<button :class="typeClass"@click="handleClick">{{ text }}</button>
2+
<button @click="handleClick">{{ text }}</button>
33
</template>
44

55
<script>
66
export default {
77
props: {
88
text: {
99
type: String,
10-
default: ''
11-
},
12-
type: {
13-
validator: value => ['primary', 'secondary'].includes(value),
14-
default: 'primary'
15-
}
16-
},
17-
computed: {
18-
typeClass: function() {
19-
if (this.type) {
20-
return `button button--${this.type}`
21-
}
22-
return 'button'
10+
required: true
2311
}
2412
},
2513
methods: {

‎tests/__tests__/components/EndToEnd.vue renamed to ‎tests/__tests__/components/Disappearance.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<template>
2-
<div>
3-
<div v-if="loading">Loading...</div>
4-
<div v-else data-testid="message">
5-
Loaded this message: {{ data.returnedMessage }}
6-
</div>
7-
</div>
2+
<p v-if="loading">Loading...</p>
3+
<p v-else data-testid="message">
4+
Loaded this message: {{ data.returnedMessage }}
5+
</p>
86
</template>
97

108
<script>
@@ -13,6 +11,7 @@ const fetchAMessage = () =>
1311
// we are using random timeout here to fireEvent a real-time example
1412
// of an async operation calling a callback at a non-deterministic time
1513
const randomTimeout = Math.floor(Math.random() * 100)
14+
1615
setTimeout(() => {
1716
resolve({ returnedMessage: 'Hello World' })
1817
}, randomTimeout)

‎tests/__tests__/components/Fetch.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div>
3-
<button data-testid="load-greeting"@click="fetch">
3+
<button @click="fetch">
44
Fetch
55
</button>
6-
<span v-if="data"data-testid="greeting-text">
6+
<span v-if="data">
77
{{ data.greeting }}
88
</span>
99
</div>

‎tests/__tests__/components/Form.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
v-model="recommend"
4141
type="checkbox"
4242
name="recommend"
43-
data-testid="recommend-checkbox"
4443
/>
4544

4645
<button :disabled="submitDisabled" type="submit">

‎tests/__tests__/components/StopWatch.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<span data-testid="elapsed">{{ lapse }}ms</span>
4-
<button data-testid="start-stop-button"@click="handleRunClick">
4+
<button @click="handleRunClick">
55
{{ running ? 'Stop' : 'Start' }}
66
</button>
77
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /