From bdf3512efa889271ad0d61f3ef887f26504d827d Mon Sep 17 00:00:00 2001 From: Sarah Dayan Date: Thu, 6 Feb 2020 15:45:24 +0100 Subject: [PATCH 1/3] fix: port changes from original documentation --- src/v2/guide/unit-testing.md | 48 +++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index 0659bbed42..5d4d4c74e8 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -83,47 +83,49 @@ Une bonne partie du code en sortie du rendu d'un composant est principalement d ``` -Vous pouvez faire des assertions sur le rendu en sortie avec différentes props en utilisant l'option `propsData` : +Vous pouvez faire des assertions sur le rendu en sortie avec différentes props avec [Vue Test Utils](https://vue-test-utils.vuejs.org/) : ``` js -import Vue from 'vue' +import { shallowMount } from '@vue/test-utils' import MyComponent from './MyComponent.vue' // Fonction utilitaire qui monte et retourne le texte rendu -function getRenderedText (Component, propsData) { - const Constructor = Vue.extend(Component) - const vm = new Constructor({ propsData: propsData }).$mount() - return vm.$el.textContent +function getMountedComponent(Component, propsData) { + return shallowMount(MyComponent, { + propsData + }) } describe('MyComponent', () => { it('donne un rendu correct avec différentes props', () => { - expect(getRenderedText(MyComponent, { - msg: 'Bonjour' - })).toBe('Bonjour') - - expect(getRenderedText(MyComponent, { - msg: 'Au revoir' - })).toBe('Au revoir') + expect( + getMountedComponent(MyComponent, { + msg: 'Bonjour' + }).text() + ).toBe('Bonjour') + + expect( + getMountedComponent(MyComponent, { + msg: 'Au revoir' + }).text() + ).toBe('Au revoir') }) }) ``` ## Assertions sur des mises à jour asynchrones -Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity.html#File-d’attente-de-mise-a-jour-asynchrone), les assertions sur les mises à jour du DOM résultant d'un changement d'état doivent être faites dans une fonction de rappel `Vue.nextTick` : +Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity.html#File-d’attente-de-mise-a-jour-asynchrone), les assertions sur les mises à jour du DOM résultant d'un changement d'état doivent être faites une fois que la promesse retournée par `vm.$nextTick()` est résolue : ``` js // Inspecter le HTML généré après une mise à jour d'état -it('met à jour le message rendu quand `vm.message` est mis à jour', done => { - const vm = new Vue(MyComponent).$mount() - vm.message = 'foo' - - // attendre une boucle (« tick ») après le changement d'état avant de faire l'assertion des mises à jour du DOM - Vue.nextTick(() => { - expect(vm.$el.textContent).toBe('foo') - done() - }) +it('met à jour le message rendu quand `vm.message` est mis à jour', async () => { + const wrapper = shallowMount(MyComponent) + wrapper.setData({ message: 'foo' }) + + // Attendre une boucle (« tick ») après le changement d'état avant de faire l'assertion des mises à jour du DOM + await wrapper.vm.$nextTick() + expect(wrapper.text()).toBe('foo') }) ``` From 655611a2ea2b0b4b462263d84f7df12e55b3a938 Mon Sep 17 00:00:00 2001 From: Sarah Dayan Date: Thu, 6 Feb 2020 15:47:03 +0100 Subject: [PATCH 2/3] fix: fix comment --- src/v2/guide/unit-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index 5d4d4c74e8..d29199a96d 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -89,7 +89,7 @@ Vous pouvez faire des assertions sur le rendu en sortie avec différentes props import { shallowMount } from '@vue/test-utils' import MyComponent from './MyComponent.vue' -// Fonction utilitaire qui monte et retourne le texte rendu +// Fonction utilitaire qui monte et retourne le composant rendu function getMountedComponent(Component, propsData) { return shallowMount(MyComponent, { propsData From b1a14dd2df61a5fa13398f9d9c0ea2ce56e00d3d Mon Sep 17 00:00:00 2001 From: Sarah Dayan Date: Thu, 6 Feb 2020 15:47:36 +0100 Subject: [PATCH 3/3] fix: fix it statement --- src/v2/guide/unit-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index d29199a96d..23d7ce051a 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -119,7 +119,7 @@ Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity. ``` js // Inspecter le HTML généré après une mise à jour d'état -it('met à jour le message rendu quand `vm.message` est mis à jour', async () => { +it('met à jour le message rendu quand `wrapper.message` est mis à jour', async () => { const wrapper = shallowMount(MyComponent) wrapper.setData({ message: 'foo' })