Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(fr): french documentation and README.md #1975

Merged
merged 5 commits into from Mar 9, 2023
Merged

docs(fr): french documentation and README.md #1975

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bbd8183
docs(fr): french language added to docs
Feb 5, 2023
f4165ca
docs(fr): french language added to docs
Feb 10, 2023
218eedc
Merge branch 'main' into feat/french-docs
Feb 11, 2023
bf0ebd8
docs(fr): french language added to docs
Feb 11, 2023
3aa53a8
docs(fr): improved docs with the latest changes
Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 40 additions & 36 deletions README.md
View file
Open in desktop
Expand Up @@ -2,6 +2,10 @@

Component testing utils for Vue 3.

## Languages

[🇫🇷 French version of this README.md](https://github.com/vuejs/test-utils/tree/main/docs/fr/README.md)

## Installation and Usage

- yarn: `yarn add @vue/test-utils --dev`
Expand Down Expand Up @@ -31,47 +35,47 @@ This is table for those coming from VTU 1, comparing the two APIs. Some things a

### Mounting Options

| option | status | notes |
| ---------------- | ------ | ----------------------------------------------------------------------------------- |
| data | ✅ |
| slots | ✅ |
| mocks | ✅ | nested in `global` |
| propsData | ✅ | now called `props` |
| provide | ✅ | nested in `global` |
| mixins | ✅ | (new!) nested in `global` |
| plugins | ✅ | (new!) nested in `global` |
| component | ✅ | (new!) nested in `global` |
| directives | ✅ | (new!) nested in `global` |
| stubs | ✅ |
| attachToDocument | ✅ | renamed `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492) |
| attrs | ✅ |
| scopedSlots | ⚰️ | scopedSlots are merged with `slots` in Vue 3 |
| context | ⚰️ | different from Vue 2, does not make sense anymore. |
| localVue | ⚰️ | no longer required - Vue 3 there is no global Vue instance to mutate. |
| listeners | ⚰️ | no longer exists in Vue 3 |
| option | status | notes |
|------------------|--------|-----------------------------------------------------------------------------------|
| data | ✅ |
| slots | ✅ |
| mocks | ✅ | nested in `global` |
| propsData | ✅ | now called `props` |
| provide | ✅ | nested in `global` |
| mixins | ✅ | (new!) nested in `global` |
| plugins | ✅ | (new!) nested in `global` |
| component | ✅ | (new!) nested in `global` |
| directives | ✅ | (new!) nested in `global` |
| stubs | ✅ |
| attachToDocument | ✅ | renamed `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492) |
| attrs | ✅ |
| scopedSlots | ⚰️ | scopedSlots are merged with `slots` in Vue 3 |
| context | ⚰️ | different from Vue 2, does not make sense anymore. |
| localVue | ⚰️ | no longer required - Vue 3 there is no global Vue instance to mutate. |
| listeners | ⚰️ | no longer exists in Vue 3 |
| parentComponent | ⚰️ |

### Wrapper API (mount)

| method | status | notes |
| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| attributes | ✅ |
| classes | ✅ |
| exists | ✅ |
| find | ✅ | only `querySelector` syntax is supported. `find(Comp)` under discussion [here](https://github.com/vuejs/vue-test-utils/issues/1498) |
| emitted | ✅ |
| findAll | ✅ | see above. `.vm` is different to Vue 2. We are exploring options. |
| get | ✅ |
| html | ✅ |
| setValue | ✅ | works for select, checkbox, radio button, input, textarea. Returns `nextTick`. |
| text | ✅ |
| trigger | ✅ | returns `nextTick`. You can do `await wrapper.find('button').trigger('click')` |
| setProps | ✅ |
| props | ✅ |
| setData | ✅ |
| destroy | ✅ | renamed to `unmount` to match Vue 3 lifecycle hook name. |
| props | ✅ |
| isVisible | ✅ |
|----------------|--------|-------------------------------------------------------------------------------------------------------------------------------------|
| attributes | ✅ |
| classes | ✅ |
| exists | ✅ |
| find | ✅ | only `querySelector` syntax is supported. `find(Comp)` under discussion [here](https://github.com/vuejs/vue-test-utils/issues/1498) |
| emitted | ✅ |
| findAll | ✅ | see above. `.vm` is different to Vue 2. We are exploring options. |
| get | ✅ |
| html | ✅ |
| setValue | ✅ | works for select, checkbox, radio button, input, textarea. Returns `nextTick`. |
| text | ✅ |
| trigger | ✅ | returns `nextTick`. You can do `await wrapper.find('button').trigger('click')` |
| setProps | ✅ |
| props | ✅ |
| setData | ✅ |
| destroy | ✅ | renamed to `unmount` to match Vue 3 lifecycle hook name. |
| props | ✅ |
| isVisible | ✅ |
| contains | ⚰️ | use `find` |
| emittedByOrder | ⚰️ | use `emitted` |
| setSelected | ⚰️ | now part of `setValue` |
Expand Down
199 changes: 107 additions & 92 deletions docs/.vitepress/config.ts
View file
Open in desktop
@@ -1,120 +1,135 @@
import { defineConfig } from 'vitepress'
import packageJSON from '../../package.json'
import { defineConfig } from 'vitepress';
import { frLocaleConfig } from "../fr/.vitepress/locale-config";
import packageJSON from '../../package.json';

export default defineConfig({
title: `Vue Test Utils`,
description: 'The documentation for the official Vue Test Utils',
locales: {
'/': {
"/": {
label: "English",
lang: 'en-US',
title: `Vue Test Utils`
}
},
"/fr/": {
label: "Français",
title: "Vue Test Utils",
lang: "fr-FR",
description: "La librairie officielle de Vue Test Utils",
antoinezanardi marked this conversation as resolved.
Show resolved Hide resolved
},
},
head: [['link', { rel: 'icon', href: `/logo.png` }]],
themeConfig: {
repo: 'vuejs/test-utils',
docsRepo: 'vuejs/test-utils',
docsDir: 'docs',
docsBranch: 'main',
editLinks: true,
algolia: {
appId: 'BH4D9OD16A',
apiKey: 'ee1b8516c9e5a5be9b6c25684eafc42f',
indexName: 'vue_test_utils',
searchParameters: {
facetFilters: ['tags:next']
}
},
nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'API Reference', link: '/api/' },
{ text: 'Migrating from Vue 2', link: '/migration/' },
{
text: 'Changelog',
link: 'https://github.com/vuejs/test-utils/releases'
}
],
sidebar: [
{
text: 'Installation',
link: '/installation/'
},
{
text: 'Essentials',
collapsable: false,
children: [
{ text: 'Getting Started', link: '/guide/' },
{ text: 'A Crash Course', link: '/guide/essentials/a-crash-course' },
locales: {
"/": {
label: 'English',
selectText: 'Languages',
nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'API Reference', link: '/api/' },
{ text: 'Migrating from Vue 2', link: '/migration/' },
{
text: 'Conditional Rendering',
link: '/guide/essentials/conditional-rendering'
},
{
text: 'Testing Emitted Events',
link: '/guide/essentials/event-handling'
},
{ text: 'Testing Forms', link: '/guide/essentials/forms' },
{
text: 'Passing Data to Components',
link: '/guide/essentials/passing-data'
},
{
text: 'Write components that are easy to test',
link: '/guide/essentials/easy-to-test'
text: 'Changelog',
link: 'https://github.com/vuejs/test-utils/releases'
}
]
},
{
text: 'Vue Test Utils in depth',
collapsable: false,
children: [
{ text: 'Slots', link: '/guide/advanced/slots' },
],
sidebar: [
{
text: 'Asynchronous Behavior',
link: '/guide/advanced/async-suspense'
text: 'Installation',
link: '/installation/'
},
{
text: 'Making HTTP Requests',
link: '/guide/advanced/http-requests'
text: 'Essentials',
collapsable: false,
children: [
{ text: 'Getting Started', link: '/guide/' },
{ text: 'A Crash Course', link: '/guide/essentials/a-crash-course' },
{
text: 'Conditional Rendering',
link: '/guide/essentials/conditional-rendering'
},
{
text: 'Testing Emitted Events',
link: '/guide/essentials/event-handling'
},
{ text: 'Testing Forms', link: '/guide/essentials/forms' },
{
text: 'Passing Data to Components',
link: '/guide/essentials/passing-data'
},
{
text: 'Write components that are easy to test',
link: '/guide/essentials/easy-to-test'
}
]
},
{ text: 'Transitions', link: '/guide/advanced/transitions' },
{
text: 'Component Instance',
link: '/guide/advanced/component-instance'
text: 'Vue Test Utils in depth',
collapsable: false,
children: [
{ text: 'Slots', link: '/guide/advanced/slots' },
{
text: 'Asynchronous Behavior',
link: '/guide/advanced/async-suspense'
},
{
text: 'Making HTTP Requests',
link: '/guide/advanced/http-requests'
},
{ text: 'Transitions', link: '/guide/advanced/transitions' },
{
text: 'Component Instance',
link: '/guide/advanced/component-instance'
},
{
text: 'Reusability and Composition',
link: '/guide/advanced/reusability-composition'
},
{ text: 'Testing v-model', link: '/guide/advanced/v-model' },
{ text: 'Testing Vuex', link: '/guide/advanced/vuex' },
{ text: 'Testing Vue Router', link: '/guide/advanced/vue-router' },
{ text: 'Testing Teleport', link: '/guide/advanced/teleport' },
{
text: 'Stubs and Shallow Mount',
link: '/guide/advanced/stubs-shallow-mount'
}
]
},
{
text: 'Reusability and Composition',
link: '/guide/advanced/reusability-composition'
text: 'Extending Vue Test Utils',
collapsable: false,
children: [
{ text: 'Plugins', link: '/guide/extending-vtu/plugins' },
{
text: 'Community and Learning',
link: '/guide/extending-vtu/community-learning'
}
]
},
{ text: 'Testing v-model', link: '/guide/advanced/v-model' },
{ text: 'Testing Vuex', link: '/guide/advanced/vuex' },
{ text: 'Testing Vue Router', link: '/guide/advanced/vue-router' },
{ text: 'Testing Teleport', link: '/guide/advanced/teleport' },
{
text: 'Stubs and Shallow Mount',
link: '/guide/advanced/stubs-shallow-mount'
}
]
},
{
text: 'Extending Vue Test Utils',
collapsable: false,
children: [
{ text: 'Plugins', link: '/guide/extending-vtu/plugins' },
text: 'Migrating from Vue 2',
link: '/migration/'
},
{
text: 'Community and Learning',
link: '/guide/extending-vtu/community-learning'
text: 'API Reference',
link: '/api/'
}
]
},
{
text: 'Migrating from Vue 2',
link: '/migration/'
},
{
text: 'API Reference',
link: '/api/'
"/fr/": frLocaleConfig,
},
repo: 'vuejs/test-utils',
docsRepo: 'vuejs/test-utils',
docsDir: 'docs',
docsBranch: 'main',
editLinks: true,
algolia: {
appId: 'BH4D9OD16A',
apiKey: 'ee1b8516c9e5a5be9b6c25684eafc42f',
indexName: 'vue_test_utils',
searchParameters: {
facetFilters: ['tags:next']
}
]
},
}
})
12 changes: 6 additions & 6 deletions docs/api/index.md
View file
Open in desktop
Expand Up @@ -44,7 +44,7 @@ test('mounts a component', () => {

Notice that `mount` accepts a second parameter to define the component's state configuration.

**Example: mounting with component props and a Vue App plugin**
**Exemple : mounting with component props and a Vue App plugin**

```js
const wrapper = mount(Component, {
Expand Down Expand Up @@ -1947,7 +1947,7 @@ type GlobalMountOptions = {

Instead of configuring mounting options on a per test basis, you can configure them for your entire test suite. These will be used by default every time you `mount` a component. If desired, you can then override your defaults on a per test basis.

**Example:**
**Exemple :**

An example might be globally mocking the `$t` variable from vue-i18n and a component:

Expand All @@ -1960,11 +1960,11 @@ An example might be globally mocking the `$t` variable from vue-i18n and a compo
</template>

<script>
import MyComponent from '@/components/MyComponent'
import MonComposant from '@/components/MonComposant'

export default {
components: {
MyComponent
MonComposant
}
}
</script>
Expand All @@ -1976,12 +1976,12 @@ export default {
import { config, mount } from '@vue/test-utils'
import { defineComponent } from 'vue'

const MyComponent = defineComponent({
const MonComposant = defineComponent({
template: `<div>My component</div>`
})

config.global.stubs = {
MyComponent
MonComposant
antoinezanardi marked this conversation as resolved.
Show resolved Hide resolved
}

config.global.mocks = {
Expand Down