Skip to content
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.

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

[Cookbook] Unit Testing components #1369

Merged
merged 74 commits into from
Jan 31, 2018
Merged
Changes from 1 commit
Commits
Show all changes
74 commits
Select commit Hold shift + click to select a range
14c56d1
Create new page
lmiller1990 Jan 1, 2018
f473583
Update
lmiller1990 Jan 1, 2018
11d182c
Improve intro
lmiller1990 Jan 2, 2018
7ff1e6e
Update
lmiller1990 Jan 5, 2018
6b85742
Add Example
lmiller1990 Jan 5, 2018
6503bab
Include real world example and explanation about testing
lmiller1990 Jan 5, 2018
739471e
Added "Why vue" en, cn srt files into assets folder (#1367)
Jinjiang Jan 5, 2018
f0265ed
fix: Correct sidebar anchor targets (#1366)
Jan 5, 2018
3de11ad
Images not found. (#1365)
btrice Jan 5, 2018
7fa317a
[Doc EN]: `event.md` add space to new part (#1363)
MachinisteWeb Jan 5, 2018
9163da0
Retrieve tweeningValue from onUpdate callback in documentation (#1350)
Boydbueno Jan 5, 2018
bdce299
Add watch usages (#1356)
wangyi7099 Jan 5, 2018
fdc6694
Avoid updating license every year (#1353)
m1guelpf Jan 5, 2018
d2cdbfd
Update spelling error and add some details about what we are testing
lmiller1990 Jan 6, 2018
2d84bff
Update
lmiller1990 Jan 6, 2018
61d0d85
typo for chinese subtitles of "why vue" video (#1371)
Jinjiang Jan 7, 2018
5565e86
Adding Why Vue.js video to Introduction page (#1377)
Gregg Jan 10, 2018
0169caa
Fixed typo in Gulp example in deployment.md (#1376)
stefangrund Jan 10, 2018
ef9c590
Update deployment.md with Grunt example (#1375)
stefangrund Jan 10, 2018
5cf5c8b
Decoupled video player from Vimeo (#1374)
Jinjiang Jan 10, 2018
7289185
Update Installation guide to use https://caniuse.com (#1372)
fgo Jan 10, 2018
524a4b5
[HOTFIX] initVideoModal error in common.js (#1378)
Jinjiang Jan 10, 2018
a3eff13
Showing all possible params of watch() (#1380)
ffxsam Jan 11, 2018
da0c6d0
refactor & update sponsors display
yyx990803 Jan 12, 2018
f8928f8
include bronze data
yyx990803 Jan 12, 2018
2cf1439
fix link
yyx990803 Jan 12, 2018
9a55109
fix link
yyx990803 Jan 12, 2018
42c9a22
add build script
yyx990803 Jan 12, 2018
36f1a01
update deploy docs
yyx990803 Jan 13, 2018
68d4312
Small fixes (#1381)
Jinjiang Jan 13, 2018
8c4310c
update Guillaume's core focus
yyx990803 Jan 14, 2018
95885ff
Improve based on Sarah Drasner feedback and fix some grammar
lmiller1990 Jan 16, 2018
3696678
Fixed TYPO Automatic Key Modifiers (#1388)
TanyMers Jan 16, 2018
f6e4596
update community deployment instructions
yyx990803 Jan 16, 2018
e34aacf
Tweak wording of `.passive` modifier explanation
chrisvfritz Jan 17, 2018
aafb90c
Add guide link in Vue.filter API (#1394)
william-pan Jan 21, 2018
4ad162d
Update filters, global filters needs to go before Vue instance creati…
brandedoutcast Jan 21, 2018
12e10f0
update tree-view example to add v-for key
chrisvfritz Jan 22, 2018
a49c314
add details of object merging to mixins page
chrisvfritz Jan 22, 2018
88c7277
Revise beforeUpdate API entry, fixes vuejs/vue#7481 (#1395)
chrisvfritz Jan 22, 2018
23f59fe
fix vue team distance sorting
chrisvfritz Jan 22, 2018
c4b7f9a
Add explicit version to download links (#1398)
rubydesign Jan 22, 2018
54e70b6
demo from ’Object Change Detection‘ doesn't work (#1397)
frankwang0909 Jan 22, 2018
e390e4d
Updated description of Weex (#1396)
Jinjiang Jan 23, 2018
27839fc
fix vue component require syntax for modern vue-loader
chrisvfritz Jan 23, 2018
89809ef
The Web Optimization Project has optimized your repository! (#1389)
devedse Jan 23, 2018
b14fdbc
Fix wrapperfind(error) typo and add example to test for whitespace
lmiller1990 Jan 24, 2018
e205dce
Update
lmiller1990 Jan 24, 2018
88a3e1e
Use factory function to save redundant logic
lmiller1990 Jan 24, 2018
f69165f
Add factory function explanation and link to vue test utils guides.
lmiller1990 Jan 24, 2018
78e1358
Update using codebryo feedback
lmiller1990 Jan 24, 2018
e6ac092
Change Github to GitHub (#1399)
lex111 Jan 26, 2018
01aed53
Fixed js error when click the page (#1401)
Jinjiang Jan 26, 2018
1c8ef8f
Change cookbook entry number and reformat sentence
lmiller1990 Jan 30, 2018
8368113
Change order
lmiller1990 Jan 30, 2018
31d3537
fix: typo in v-show description (#1408)
znck Jan 30, 2018
057cce4
Create new page
lmiller1990 Jan 1, 2018
dafcc50
Update
lmiller1990 Jan 1, 2018
9777049
Improve intro
lmiller1990 Jan 2, 2018
8d23472
Update
lmiller1990 Jan 5, 2018
457b571
Add Example
lmiller1990 Jan 5, 2018
ef9b7f9
Include real world example and explanation about testing
lmiller1990 Jan 5, 2018
d2697cd
Update spelling error and add some details about what we are testing
lmiller1990 Jan 6, 2018
d967fd4
Update
lmiller1990 Jan 6, 2018
fcede9f
Improve based on Sarah Drasner feedback and fix some grammar
lmiller1990 Jan 16, 2018
18f3f8e
Fix wrapperfind(error) typo and add example to test for whitespace
lmiller1990 Jan 24, 2018
da9d7d6
Update
lmiller1990 Jan 24, 2018
624b3bb
Use factory function to save redundant logic
lmiller1990 Jan 24, 2018
f3136c9
Add factory function explanation and link to vue test utils guides.
lmiller1990 Jan 24, 2018
6cfe317
Update using codebryo feedback
lmiller1990 Jan 24, 2018
3905265
Change cookbook entry number and reformat sentence
lmiller1990 Jan 30, 2018
e9e1116
Change order
lmiller1990 Jan 30, 2018
3018298
Rebase
lmiller1990 Jan 31, 2018
86bca90
Resolve conflicts
lmiller1990 Jan 31, 2018
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
Prev Previous commit
Next Next commit
Update spelling error and add some details about what we are testing
lmiller1990 committed Jan 6, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit d2cdbfd79c46afb236d288cc3e1cc54be735d798
16 changes: 15 additions & 1 deletion src/v2/cookbook/unit-testing-vue-components.md
Original file line number Diff line number Diff line change
@@ -124,17 +124,24 @@ export default {

computed: {
error () {
return this,username.length < 7
return this.username.length < 7
}
}
}
</script>
```

The things that we should test are:
- is the `message` rendered?
- if `error` is `true`, `<div class="error"`> should be present
- if `error` is `false`, `<div class="error"`> should not be present

And our first attempt at at test:

*Bad:*
```js
import { shallow } from 'vue-test-utils'

describe('Foo', () => {
it('renders a message and responds correctly to user input', () => {
const wrapper = shallow(Foo, {
@@ -144,8 +151,13 @@ describe('Foo', () => {
}
})

// see if the message renders
expect(wrapper.find('.message').text()).toEqual('Hello World')

// assert the error is rendered
expect(wrapper.find('.error').exists()).toBeTruthy()

// update the username and assert error is longer rendered
wrapper.setData({ username: 'Lachlan' })
expect(wrapper.find('.error').exists()).toBeFalsey()
})
@@ -163,6 +175,8 @@ The below example improves the test by:

*Good:*
```js
import { shallow } from 'vue-test-utils'

describe('Foo', () => {
it('renders a message', () => {
const wrapper = shallow(Foo, {