Skip to content

Commit ea8eece

Browse files
gabrielrobertf
authored andcommitted
Test section written in readme (#57)
1 parent 90a3eda commit ea8eece

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -655,6 +655,51 @@ For other libraries you can use, please see [Loaders section of **vuejs/awesome-
655655
Use `npm run dev-vuex`, `npm run dev-vue` or `npm run dev-wrap` commands.
656656
for running examples locally.
657657

658+
## ✔ Testing components
659+
660+
You can test components using `vue-wait` but it requires configuration. Let's take a basic component for instance:
661+
662+
```vue
663+
<v-wait for="loading">
664+
<Spinner slot="waiting" />
665+
<ul class="suggestions">
666+
<li v-for="suggestion in suggestions">{{ suggestion.Name }}</li>
667+
</ul>
668+
</v-wait>
669+
```
670+
671+
```js
672+
const localVue = createLocalVue();
673+
localVue.use(Vuex); // optionally when you use Vuex integration
674+
675+
it('uses vue-wait component', () => {
676+
const wrapper = shallowMount(Suggestions, { localVue });
677+
expect(wrapper.find('.suggestions').exists()).toBe(true);
678+
});
679+
```
680+
681+
`vue-test-utils` will replace `v-wait` component with an empty `div`, making it difficult to test correctly.
682+
683+
First, make your local Vue instance use `vue-wait`,
684+
685+
```js
686+
const localVue = createLocalVue();
687+
localVue.use(Vuex); // optionally when you use Vuex integration
688+
localVue.use(VueWait);
689+
```
690+
691+
Then inject the `wait` property using `VueWait` constructor,
692+
693+
```js
694+
it('uses vue-wait component', () => {
695+
const wrapper = shallowMount(SuggestedAddresses, {
696+
localVue,
697+
wait: new VueWait()
698+
});
699+
expect(wrapper.find('.suggestions').exists()).toBe(true); // it works!
700+
});
701+
```
702+
658703
## 🎯 Contributors
659704

660705
- Fatih Kadir Akın, (creator)

0 commit comments

Comments
 (0)