From 7b8e1d76c76831b0dc6c9f5cc6c07f451972b340 Mon Sep 17 00:00:00 2001 From: David Nixon Date: Tue, 16 Aug 2022 16:02:19 -0400 Subject: [PATCH 1/2] chore: update vue api doc to match implementation --- docs/vue-testing-library/api.mdx | 51 ++++++++------------------- docs/vue-testing-library/examples.mdx | 44 +++++++++++++++++++++++ 2 files changed, 58 insertions(+), 37 deletions(-) diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index a1e6a7cc2..a3918aaac 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -7,21 +7,19 @@ title: API It also exposes these methods: -- [`render(Component, options, callback)`](#rendercomponent-options-callback) +- [`render(Component, options)`](#rendercomponent-options) - [Parameters](#parameters) - [Component](#component) - [Options](#options) - - [Callback Function](#callback-function) - [`render` result](#render-result) - [`...queries`](#queries) - [`container`](#container) - [`baseElement`](#baseelement) - - [`debug(element)`](#debugelement) - - [`unmount()`](#unmount) - - [`isUnmounted()`](#isunmounted) - - [`html()`](#html) - - [`emitted()`](#emitted) - - [`updateProps(props)`](#updatepropsprops) + - [`debug`](#debug) + - [`unmount`](#unmount) + - [`html`](#html) + - [`emitted`](#emitted) + - [`rerender`](#rerenderprops) - [`fireEvent`](#fireevent) - [`touch(elem)`](#touchelem) - [`update(elem, value)`](#updateelem-value) @@ -29,7 +27,7 @@ It also exposes these methods: --- -## `render(Component, options, callback)` +## `render(Component, options)` The `render` function is the only way of rendering components in Vue Testing Library. @@ -44,10 +42,9 @@ function render(Component, options, callbackFunction) { baseElement, debug, unmount, - isUnmounted, html, emitted, - updateProps, + rerender, } } ``` @@ -106,20 +103,6 @@ If the `container` is specified, then this defaults to that, otherwise this defaults to `document.body`. `baseElement` is used as the base element for the queries as well as what is printed when you use `debug()`. -#### Callback Function - -```js -function callbackFunction(vueInstance, vuexStore, router) {} -``` - -A callback function that receives the Vue instance as a parameter. Its return -value is merged with [options](#options), allowing 3rd party plugins to be -installed prior to mount. To see how this works, see the example using -[`vue-i18n`](https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/translations-vue-i18n.js). - -The function will also receive the Store or the Router object if the associated -option was passed in during render. - ### `render` result The `render` method returns an object that has a few properties: @@ -164,13 +147,10 @@ renders its HTML directly in the body. > Note: the queries returned by the `render` looks into `baseElement`, so you > can use queries to test your portal component without the `baseElement`. -#### `debug(element)` +#### `debug` This method is a shortcut for `console.log(prettyDOM(element))`. -`element` can either be a DOM element or an array containing DOM elements. It -defaults to `baseElement` - ```jsx import {render} from '@testing-library/vue' @@ -183,8 +163,6 @@ debug() //
//

Hello World

//
- -// you can also pass an element: debug(getByTestId('messages')) ``` This is a simple wrapper around `prettyDOM` which is also exposed and comes from @@ -195,10 +173,6 @@ This is a simple wrapper around `prettyDOM` which is also exposed and comes from An alias for `@vue/test-utils` [destroy](https://vue-test-utils.vuejs.org/api/wrapper/#destroy). -#### `isUnmounted()` - -Returns whether if a Vue component has been destroyed. - #### `html()` An alias for `@vue/test-utils` @@ -209,12 +183,15 @@ An alias for `@vue/test-utils` An alias for `@vue/test-utils` [emitted](https://vue-test-utils.vuejs.org/api/wrapper/#emitted). -#### `updateProps(props)` +#### `rerender(props)` An alias for `@vue/test-utils` [setProps](https://vue-test-utils.vuejs.org/api/wrapper/#setprops). -It returns a Promise through `wait()`, so you can `await updateProps(...)`. +It returns a Promise through so you can `await rerender(...)`. + +See +[update properties example](vue-testing-library/examples.mdx#example-updating-properties). --- diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx index a65f81e6c..2a418dd49 100644 --- a/docs/vue-testing-library/examples.mdx +++ b/docs/vue-testing-library/examples.mdx @@ -50,6 +50,50 @@ test('increments value on click', async () => { }) ``` +## Example updating properties: + +```html + + + +``` + +```js +import {render} from '@testing-library/vue' +import Component from './Component.vue' + +test('properly handles property updates', async () => { + const {getByText, rerender} = render(Component, { + props: { + sky: 'green', + grass: 'blue', + }, + }) + + // Asserts initial state. + getByText('The sky is green') + getByText('And the grass is blue') + + await rerender({sky: 'Aquamarine'}) + + // Asserts updated state + getByText('The sky is Aquamarine') + getByText('And the grass is blue') +}) +``` + ## Example using `v-model`: ```html From b9d6941a956de0f26bdf0bb7531583a074eca942 Mon Sep 17 00:00:00 2001 From: David Nixon Date: Wed, 17 Aug 2022 12:06:12 -0400 Subject: [PATCH 2/2] chore: tweaks based on comments --- docs/vue-testing-library/api.mdx | 15 ++++----- docs/vue-testing-library/examples.mdx | 44 --------------------------- 2 files changed, 6 insertions(+), 53 deletions(-) diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index a3918aaac..d38530611 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -15,7 +15,7 @@ It also exposes these methods: - [`...queries`](#queries) - [`container`](#container) - [`baseElement`](#baseelement) - - [`debug`](#debug) + - [`debug`](#debugelement) - [`unmount`](#unmount) - [`html`](#html) - [`emitted`](#emitted) @@ -32,7 +32,7 @@ It also exposes these methods: The `render` function is the only way of rendering components in Vue Testing Library. -It takes up to 3 parameters and returns an object with some helper methods. +It takes up to 2 parameters and returns an object with some helper methods. ```js function render(Component, options, callbackFunction) { @@ -40,11 +40,11 @@ function render(Component, options, callbackFunction) { ...DOMTestingLibraryQueries, container, baseElement, - debug, + debug(element), unmount, html, emitted, - rerender, + rerender(props), } } ``` @@ -147,7 +147,7 @@ renders its HTML directly in the body. > Note: the queries returned by the `render` looks into `baseElement`, so you > can use queries to test your portal component without the `baseElement`. -#### `debug` +#### `debug(element)` This method is a shortcut for `console.log(prettyDOM(element))`. @@ -186,13 +186,10 @@ An alias for `@vue/test-utils` #### `rerender(props)` An alias for `@vue/test-utils` -[setProps](https://vue-test-utils.vuejs.org/api/wrapper/#setprops). +[setProps](https://test-utils.vuejs.org/api/#setprops). It returns a Promise through so you can `await rerender(...)`. -See -[update properties example](vue-testing-library/examples.mdx#example-updating-properties). - --- ## `fireEvent` diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx index 2a418dd49..a65f81e6c 100644 --- a/docs/vue-testing-library/examples.mdx +++ b/docs/vue-testing-library/examples.mdx @@ -50,50 +50,6 @@ test('increments value on click', async () => { }) ``` -## Example updating properties: - -```html - - - -``` - -```js -import {render} from '@testing-library/vue' -import Component from './Component.vue' - -test('properly handles property updates', async () => { - const {getByText, rerender} = render(Component, { - props: { - sky: 'green', - grass: 'blue', - }, - }) - - // Asserts initial state. - getByText('The sky is green') - getByText('And the grass is blue') - - await rerender({sky: 'Aquamarine'}) - - // Asserts updated state - getByText('The sky is Aquamarine') - getByText('And the grass is blue') -}) -``` - ## Example using `v-model`: ```html