Add more Vue.js recipes #1447
Add more Vue.js recipes #1447
Conversation
novemberborn left a comment
novemberborn left a comment There was a problem hiding this comment.
@suchmaske nice! I've pushed a commit that fixes some formatting, and I have a question around nextTick() usage.
@blake-newman @OmgImAlexis @knpwrs if you're around, could you give this a look?
| vm.message = 'my new message'; | ||
| // this fails here: t.is('my new message', vm.$el.textContent) | ||
| | ||
| Vue.nextTick(() => { |
There was a problem hiding this comment.
I assume this is asynchronous? That'll mean the assertion is run when the test is ended. We don't currently warn about that, but it means the assertion is ignored. You'd have to get a promise out of this or use test.cb() with t.end().
There was a problem hiding this comment.
From the Vue docs:
New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. - https://vuejs.org/v2/api/#Vue-nextTick
So you can just use an async function for the test and await it here.
There was a problem hiding this comment.
Agree with using async and await syntax.
| vm.message = 'my new message'; | ||
| // this fails here: t.is('my new message', vm.$el.textContent) | ||
| | ||
| Vue.nextTick(() => { |
There was a problem hiding this comment.
From the Vue docs:
New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. - https://vuejs.org/v2/api/#Vue-nextTick
So you can just use an async function for the test and await it here.
| // just testing the data model can be achieved by using await | ||
| t.is(await vm.message, 'my message'); | ||
| | ||
| await vm.message.then((data) => { |
There was a problem hiding this comment.
The .then() here is moot. You're already await'ing it. Just get value back the async/await way.
| hooks(['vue', 'js']).plugin('babel').push(); | ||
| ``` | ||
| | ||
| When you are using ES6 modules, use the dist-file of Vue. Not doing that may cause a not completely accessible (and thus not testable) Vue model. |
There was a problem hiding this comment.
This is not true. Using the hooks compiles the es6 to es2015. You can use the source components.
| ```js | ||
| import browserEnv from 'browser-env'; | ||
| import hooks from 'require-extension-hooks'; | ||
| import Vue from 'vue/dist/vue'; |
There was a problem hiding this comment.
Does this type of import not require webpack? I didn't think this worked out of the box with babel, etc. yet.
There was a problem hiding this comment.
Not sure of the point of this example, same as above but es imports.
@sindresorhus can you confirm @OmgImAlexis is also correct.
| @suchmaske @blake-newman @OmgImAlexis @knpwrs ping :) |
| hooks(['vue', 'js']).plugin('babel').push(); | ||
| ``` | ||
| | ||
| When you are using ES6 modules, use the dist-file of Vue. Not doing that may cause a not completely accessible (and thus not testable) Vue model. |
There was a problem hiding this comment.
This is not true. Using the hooks compiles the es6 to es2015. You can use the source components.
| ```js | ||
| import browserEnv from 'browser-env'; | ||
| import hooks from 'require-extension-hooks'; | ||
| import Vue from 'vue/dist/vue'; |
There was a problem hiding this comment.
Not sure of the point of this example, same as above but es imports.
@sindresorhus can you confirm @OmgImAlexis is also correct.
| vm.message = 'my new message'; | ||
| // this fails here: t.is('my new message', vm.$el.textContent) | ||
| | ||
| Vue.nextTick(() => { |
There was a problem hiding this comment.
Agree with using async and await syntax.
| | ||
| // just testing the data model can be achieved by using await | ||
| t.is(await vm.message, 'my message'); | ||
| |
There was a problem hiding this comment.
Why would vm.message be a promise? No need to await this
| I think it's worth pointing out that Vue has started work on official testing tools. They have an example with AVA available as well. |
| @knpwrs Indeed. Will create a PR to link to that example repository |
| @blake-newman @knpwrs is this PR still relevant? @suchmaske will you have time to revive this PR? |
| @novemberborn I recently have changed my workflow to vue-test-utils. I will take the feedback and try to rework the PR in the next days. |
| I don't personally use Vue enough anymore to offer any official recommendations. |
| That's great, thank you @suchmaske. |
| @novemberborn i don't think the PR is relevant. Also there is many examples, via Sorry for the late reply |
| Closing this for lack of activity. Happy to reopen if anyone wants to finish it. |
6 participants
I have struggled the last days to properly test vue components using ava. To make life easier for others, I added some additional recipes for testing vuejs using ava.
For example: