[Cookbook] Unit Testing components #1369
Conversation
* added english srt file * added chinese srt file * typo
Change function execution order to correct sidebar anchor targets; more concise fix to #1348.
Hi, The images link for `hn.png` and `hn-architecture.png` can be found on `../../images/`.
|
Excellent! I'm slammed at work today but can't wait to look it over this weekend. Thanks! |
* New in with + symbol Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Fix syntax typo Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Add space between new line of documentation Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Add @posva review Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com>
The tweeningValue no longer seems to be available in the tween object itself. Instead, the tweeningValue is available in the tweened object that passed as a parameter to the onUpdate callback.
* Add watch usages! Add `watch` usages! * Update index.md * tweaks to watch api examples
* Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin
|
|
||
| ## Simple Example | ||
|
|
||
| Unit testing is a fundamental part of software developmenet. The underlying idea is tests the smallest units of code, in isolation from others. This makes it easy to refactor, add new features, or track down bugs. Vue's [single-file components](./single-file-components.html), it is straight forward to write unit tests for components in isolation. This lets you develop new features with confidence you are not breaking existing ones, and helps other people to understand what your component does. |
There was a problem hiding this comment.
Great opening, a couple of things:
- s/developmenet/development
- Second sentence isn't grammatically correct, how about something like: Unit tests evaluate the smallest units of code in isolation, in order to track down bugs, or make it easier to track down bugs or refactor.
- No comma necessary after link to sfc- so it would be "Vue's single file components make it straightforward..."
| }) | ||
| ``` | ||
|
|
||
| This simple example shown how to test whether an error message is rendered based on the length of the username. It demonstrates the general idea of unit testing Vue components: render the component, and make assertions to check if the markup matches the state of the component. |
There was a problem hiding this comment.
You said simple example earlier, how about "This shows how to ..."
| [vue-test-utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The (vue-cli)[https://github.com/vuejs/vue-cli] webpack template comes with either Karma or Jest, both well supported test runners, and there are some (guides)[https://vue-test-utils.vuejs.org/en/guides/] in the `vue-test-utils` documentation. | ||
|
|
||
|
|
||
| 4. Discuss why this may be a compelling pattern. Links for reference are not required but encouraged. |
There was a problem hiding this comment.
This is from the template, should be removed :)
|
|
||
| This simple example shown how to test whether an error message is rendered based on the length of the username. It demonstrates the general idea of unit testing Vue components: render the component, and make assertions to check if the markup matches the state of the component. | ||
|
|
||
| ## Details about the Value |
There was a problem hiding this comment.
I don't think you need to literally say "details about the value, I think you could change the h2 directly to "Why Test"
| Unit tests should be | ||
| - Fast to run | ||
| - Easy to understand | ||
| - Only test a _single unit of work_ |
There was a problem hiding this comment.
Perfect. Straightforward, easy to reproduce, wonderful list and explanation.
| The below example improves the test by: | ||
| - only making one assertion per `it` block | ||
| - having short, clear test descriptions | ||
| - providing only the minimum data requires for the test |
There was a problem hiding this comment.
Great, again, good job being clear and concise. The demo illustrates exactly this as well.
|
Hi @lmiller1990! |
| const wrapper = shallow(Hello) | ||
|
|
||
| // should not allow for username less than 7 characters, excludes whitespace | ||
| wrapper.setData({ username: ' '.repeat(7) }) |
|
|
||
| Points to note: | ||
|
|
||
| At the top, we declare the factory function, which simply returns a new `wrapper` instance, and sets and the `values` object to `data`. This way, we don't need to duplicate `const wrapper = shallow(Foo)` in every test. Another great benefit to this is when more complex components with a method or computed property you might want to mock or stub in every test, you only need to declare it once. |
There was a problem hiding this comment.
That second part of the sentence in general seems a little off.
What about:
At the top, we declare the factory function, which simply returns a new
wrapperinstance, and merges thevaluesobject intodata.
|
Thanks both, I'll update with @codebryo 's points and change entry number tonight! |
|
Fixed based on comments. The build is STILL failing despite changing the The error is |
|
It might be due to some changes that were made between the time you forked and when you submitted the PR. The weird part is that you have only changed that one file. Can you please try to rebase? If that doesn't work, I'll look into it more and get it merged for you. |
|
Rebasing did the trick! |
For #1344
First draft. Some high level feedback would be great.