Skip to content

Commit

Permalink
Fix: replace TestingApiSwitcher with VTCodeGroup #794 (#797)
Browse files Browse the repository at this point in the history
  • Loading branch information
tisma95 authored Dec 14, 2023
1 parent 19124ea commit e7c5bcd
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 173 deletions.
119 changes: 0 additions & 119 deletions src/guide/scaling-up/TestingApiSwitcher.vue

This file was deleted.

100 changes: 46 additions & 54 deletions src/guide/scaling-up/testing.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import TestingApiSwitcher from './TestingApiSwitcher.vue'
import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
</script>

# Tester {#testing}
Expand Down Expand Up @@ -126,76 +126,68 @@ Les tests de composant doivent se concentrer sur les interfaces publiques du com

Nous ne savons rien de l'implémentation de Stepper, seulement que l'"entrée" est la prop `max` et que la "sortie" est l'état du DOM tel que l'utilisateur le verra.

<TestingApiSwitcher>
<VTCodeGroup>
<VTCodeGroupTab label="Vue Test Utils">

<div class="testing-library-api">
```js
const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'

```js
const { getByText } = render(Stepper, {
props: {
max: 1
}
})

getByText('0') // Vérification implicite que "0" se trouve dans le composant

const button = getByRole('button', { name: /increment/i })

// Envoi d'un événement click sur notre bouton d'incrémentation.
await fireEvent.click(button)
const wrapper = mount(Stepper, {
props: {
max: 1
}
})

getByText('1')
expect(wrapper.find(valueSelector).text()).toContain('0')

await fireEvent.click(button)
```
await wrapper.find(buttonSelector).trigger('click')

</div>
expect(wrapper.find(valueSelector).text()).toContain('1')
```

<div class="vtu-api">
</VTCodeGroupTab>
<VTCodeGroupTab label="Cypress">

```js
const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'
```js
const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'

const wrapper = mount(Stepper, {
props: {
max: 1
}
})

expect(wrapper.find(valueSelector).text()).toContain('0')
mount(Stepper, {
props: {
max: 1
}
})

await wrapper.find(buttonSelector).trigger('click')
cy.get(valueSelector).should('be.visible').and('contain.text', '0')
.get(buttonSelector).click()
.get(valueSelector).should('contain.text', '1')
```

expect(wrapper.find(valueSelector).text()).toContain('1')
```
</VTCodeGroupTab>
<VTCodeGroupTab label="Testing Library">

</div>
```js
const { getByText } = render(Stepper, {
props: {
max: 1
}
})

<div class="cypress-api">
getByText('0') // Vérification implicite que "0" se trouve dans le composant

```js
const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'
const button = getByRole('button', { name: /increment/i })

mount(Stepper, {
props: {
max: 1
}
})
// Envoi d'un événement click sur notre bouton d'incrémentation.
await fireEvent.click(button)

cy.get(valueSelector)
.should('be.visible')
.and('contain.text', '0')
.get(buttonSelector)
.click()
.get(valueSelector)
.should('contain.text', '1')
```
getByText('1')

</div>
await fireEvent.click(button)
```

</TestingApiSwitcher>
</VTCodeGroupTab>
</VTCodeGroup>

- **NE FAITES PAS**

Expand Down

1 comment on commit e7c5bcd

@vercel
Copy link

@vercel vercel bot commented on e7c5bcd Dec 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs-fr – ./

docs-fr.vercel.app
docs-fr-git-main-vuejs.vercel.app
docs-fr-vuejs.vercel.app
fr.vuejs.org

Please sign in to comment.