Skip to content

feat: Update to Vue 3.0 and Vue Test Utils 2.0 (#137) #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 31, 2020
Merged

feat: Update to Vue 3.0 and Vue Test Utils 2.0 (#137) #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,44 +35,50 @@
"vue.js 2",
"vue.js 2 testing",
"vue 2",
"vue 2 testing"
"vue 2 testing",
"vue.js 3",
"vue.js 3 testing",
"vue 3",
"vue 3 testing"
],
"author": "Daniel Cook",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.11.2",
"@testing-library/dom": "^7.24.3",
"@types/testing-library__vue": "^5.0.0",
"@vue/test-utils": "^1.1.0"
"@babel/runtime": "^7.12.1",
"@testing-library/dom": "^7.26.3",
"@types/testing-library__vue": "*",
"@vue/test-utils": "^2.0.0-beta.7",
"lodash.merge": "^4.6.2"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.11.5",
"@testing-library/jest-dom": "^5.11.4",
"@babel/plugin-transform-runtime": "^7.12.1",
"@testing-library/jest-dom": "^5.11.5",
"@vue/compiler-sfc": "^3.0.2",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"axios": "^0.20.0",
"eslint-plugin-vue": "^6.2.2",
"graphql": "^15.3.0",
"graphql": "^15.4.0",
"graphql-tag": "^2.11.0",
"isomorphic-unfetch": "^3.0.0",
"isomorphic-unfetch": "^3.1.0",
"jest-serializer-vue": "^2.0.2",
"kcd-scripts": "^6.5.1",
"lodash.merge": "^4.6.2",
"msw": "^0.21.2",
"kcd-scripts": "^6.6.0",
"msw": "^0.21.3",
"portal-vue": "^2.1.7",
"vee-validate": "^2.2.15",
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-i18n": "^8.21.1",
"vue-jest": "^4.0.0-rc.0",
"vue-router": "^3.4.5",
"vue-template-compiler": "^2.6.12",
"vuetify": "^2.3.10",
"vuex": "^3.5.1"
"typescript": "^3.8.3",
"vee-validate": "^4.0.0-beta.16",
"vue": "^3.0.2",
"vue-apollo": "^3.0.5",
"vue-i18n": "^9.0.0-beta.6",
"vue-jest": "^5.0.0-alpha.5",
"vue-router": "^4.0.0-rc.1",
"vuetify": "^2.3.16",
"vuex": "^4.0.0-rc.1"
},
"peerDependencies": {
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
"vue": "^3.0",
"@vue/compiler-sfc": "^3.0"
},
"husky": {
"hooks": {
Expand Down
9 changes: 4 additions & 5 deletions src/__tests__/auto-cleanup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import {render} from '@testing-library/vue'
import '@testing-library/jest-dom'

// This just verifies that by importing VTL in an environment which supports
// This verifies that by importing VTL in an environment which supports
// afterEach (like jest) we'll get automatic cleanup between tests.
test('render the first component', () => {
render({
template: `<h1>Hello World</h1>`,
})
test('renders the component', () => {
render({template: `<h1>Hello World</h1>`})

expect(document.body.innerHTML).toMatchInlineSnapshot(`
<div>
<h1>Hello World</h1>
Expand Down
18 changes: 6 additions & 12 deletions src/__tests__/axios-mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import {render, fireEvent} from '@testing-library/vue'
import Component from './components/Fetch.vue'

test('mocks an API call when load-greeting is clicked', async () => {
axiosMock.get.mockImplementationOnce(() =>
Promise.resolve({
data: {greeting: 'hello there'},
}),
)
axiosMock.get.mockResolvedValueOnce({
data: {greeting: 'hello there'},
})

const {html, getByText} = render(Component, {props: {url: '/greeting'}})

Expand All @@ -22,11 +20,7 @@ test('mocks an API call when load-greeting is clicked', async () => {
// that Snapshot Testing should not be treated as a replacement for regular
// tests.
// More about the topic: https://twitter.com/searls/status/919594505938112512
expect(html()).toMatchInlineSnapshot(`
<div><button>
Fetch
</button> <span>
hello there
</span></div>
`)
expect(html()).toMatchInlineSnapshot(
`<div><button> Fetch </button><span>hello there</span></div>`,
)
})
42 changes: 22 additions & 20 deletions src/__tests__/cleanup-throw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import {render, cleanup} from '@testing-library/vue'
import Vue from 'vue'
test.todo('check if this test still makes sense')

test('cleanup re-throws errors from async lifecycle hooks', async () => {
const err = new Error('foo')
render({
async mounted() {
await new Promise((resolve, reject) => {
reject(err)
})
},
template: `<h1>Hello World</h1>`,
})
// thrown errors are logged redundantly by vue-test-utils injected Vue.config.errorHandler
// mute console
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
// import {render, cleanup} from '@testing-library/vue'
// import {nextTick} from 'vue'

await Vue.nextTick()
expect(cleanup).toThrow(err)
// test('cleanup re-throws errors from async lifecycle hooks', async () => {
// const err = new Error('foo')
// render({
// async mounted() {
// await new Promise((resolve, reject) => {
// reject(err)
// })
// },
// template: `<h1>Hello World</h1>`,
// })
// // thrown errors are logged redundantly by vue-test-utils injected Vue.config.errorHandler
// // mute console
// const spy = jest.spyOn(console, 'error').mockImplementation(() => {})

// unmute console
spy.mockReset()
})
// await nextTick()
// expect(cleanup).toThrow(err)

// // unmute console
// spy.mockReset()
// })
16 changes: 0 additions & 16 deletions src/__tests__/components/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,6 @@
<template>
<div class="card">
<slot name="header" />
<slot :content="content">
<!-- Fallback content if no default slot is given -->
<p>Nothing used the {{ content }}</p>
</slot>
<slot name="footer" />
</div>
</template>

<script>
// For the sake of demoing scopedSlots, this Card component
// passes a simple string down to its default slot.
export default {
data() {
return {
content: 'Scoped content!'
}
}
}
</script>
146 changes: 73 additions & 73 deletions src/__tests__/components/Form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,73 @@
<template>
<div>
<h1>Movie Review</h1>
<form @submit.prevent="submit">
<label for="movie-input">Title of the movie</label>
<input id="movie-input" v-model="title" name="title" />
<label id="review-textarea">Your review</label>
<textarea
v-model="review"
name="review-textarea"
placeholder="Write an awesome review"
aria-labelledby="review-textarea"
/>
<label>
<input v-model="rating" type="radio" value="3" />
Wonderful
</label>
<label>
<input v-model="rating" type="radio" value="2" />
Average
</label>
<label>
<input v-model="rating" type="radio" value="1" />
Awful
</label>
<label id="recommend-label">Would you recommend this movie?</label>
<input
id="recommend"
v-model="recommend"
type="checkbox"
name="recommend"
/>
<button :disabled="submitDisabled" type="submit">
Submit
</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
review: '',
rating: '1',
recommend: false,
}
},
computed: {
submitDisabled() {
return !this.title || !this.review
},
},
methods: {
submit() {
if (this.submitDisabled) return
this.$emit('submit', {
title: this.title,
review: this.review,
rating: this.rating,
recommend: this.recommend,
})
},
},
}
</script>
<template>
<div>
<h1>Movie Review</h1>
<form onsubmit="return false">
<label for="movie-input">Title of the movie</label>
<input id="movie-input" v-model="title" name="title" />

<label id="review-textarea">Your review</label>
<textarea
v-model="review"
name="review-textarea"
placeholder="Write an awesome review"
aria-labelledby="review-textarea"
/>

<label>
<input v-model="rating" type="radio" value="3" />
Wonderful
</label>
<label>
<input v-model="rating" type="radio" value="2" />
Average
</label>
<label>
<input v-model="rating" type="radio" value="1" />
Awful
</label>

<label id="recommend-label">Would you recommend this movie?</label>
<input
id="recommend"
v-model="recommend"
type="checkbox"
name="recommend"
/>

<button :disabled="submitDisabled" type="submit" @click="submit">
Submit
</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
title: '',
review: '',
rating: '1',
recommend: false,
}
},
computed: {
submitDisabled() {
return !this.title || !this.review
},
},

methods: {
submit() {
if (this.submitDisabled) return

this.$emit('submit', {
title: this.title,
review: this.review,
rating: this.rating,
recommend: this.recommend,
})
},
},
}
</script>
Loading