fix: replace TestingApiSwitcher with VTCodeGroup (#2595)

vuejs · Dec 13, 2023 · 9400e01 · 9400e01
1 parent f51e4b4
commit 9400e01
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 169 deletions.
diff --git a/src/guide/scaling-up/TestingApiSwitcher.vue b/src/guide/scaling-up/TestingApiSwitcher.vue
diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md
@@ -1,5 +1,5 @@
 <script setup>
-import TestingApiSwitcher from './TestingApiSwitcher.vue'
+import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 </script>
 
 # Testing {#testing}
@@ -126,72 +126,68 @@ Component tests should focus on the component's public interfaces rather than in
 
   We know nothing about the implementation of Stepper, only that the "input" is the `max` prop and the "output" is the state of the DOM as the user will see it.
 
-<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') // Implicit assertion that "0" is within the component
-
-const button = getByRole('button', { name: /increment/i })
-
-// Dispatch a click event to our increment button.
-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') // Implicit assertion that "0" is within the component
 
-```js
-const valueSelector = '[data-testid=stepper-value]'
-const buttonSelector = '[data-testid=increment]'
+  const button = getByRole('button', { name: /increment/i })
 
-mount(Stepper, {
-  props: {
-    max: 1
-  }
-})
+  // Dispatch a click event to our increment button.
+  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>
 
 - **DON'T**