Skip to content

Commit

Permalink
add testing sponsor lambdatest
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Nov 28, 2024
1 parent d0a13f7 commit f9c82f4
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 39 deletions.
115 changes: 76 additions & 39 deletions src/guide/scaling-up/testing.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@
<script setup>
import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
</script>
<style>
.lambdatest {
background-color: var(--vt-c-bg-soft);
border-radius: 8px;
padding: 12px 16px 12px 12px;
font-size: 13px;
a {
display: flex;
color: var(--vt-c-text-2);
}
img {
background-color: #fff;
padding: 12px 16px;
border-radius: 6px;
margin-right: 24px;
}
.testing-partner {
color: var(--vt-c-text-1);
font-size: 15px;
font-weight: 600;
}
}
</style>

# Testing {#testing}

Expand Down Expand Up @@ -40,7 +63,7 @@ Take for example this `increment` function:

```js
// helpers.js
export function increment (current, max = 10) {
export function increment(current, max = 10) {
if (current < max) {
return current + 1
}
Expand Down Expand Up @@ -129,62 +152,66 @@ Component tests should focus on the component's public interfaces rather than in
<VTCodeGroup>
<VTCodeGroupTab label="Vue Test Utils">

```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
}
})
const wrapper = mount(Stepper, {
props: {
max: 1
}
})

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

await wrapper.find(buttonSelector).trigger('click')
await wrapper.find(buttonSelector).trigger('click')

expect(wrapper.find(valueSelector).text()).toContain('1')
```
expect(wrapper.find(valueSelector).text()).toContain('1')
```

</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]'

mount(Stepper, {
props: {
max: 1
}
})
mount(Stepper, {
props: {
max: 1
}
})

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

</VTCodeGroupTab>
<VTCodeGroupTab label="Testing Library">

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

getByText('0') // Implicit assertion that "0" is within the component
getByText('0') // Implicit assertion that "0" is within the component

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

// Dispatch a click event to our increment button.
await fireEvent.click(button)
// Dispatch a click event to our increment button.
await fireEvent.click(button)

getByText('1')
getByText('1')

await fireEvent.click(button)
```
await fireEvent.click(button)
```

</VTCodeGroupTab>
</VTCodeGroup>
Expand Down Expand Up @@ -221,7 +248,7 @@ We recommend using `@vue/test-utils` for testing components in applications. `@t

- [Nightwatch](https://nightwatchjs.org/) is an E2E test runner with Vue Component Testing support. ([Example Project](https://github.com/nightwatchjs-community/todo-vue))

- [WebdriverIO](https://webdriver.io/docs/component-testing/vue) for cross-browser component testing that relies on native user interaction based on standardized automation. It can also be used with Testing Library.
- [WebdriverIO](https://webdriver.io/docs/component-testing/vue) for cross-browser component testing that relies on native user interaction based on standardized automation. It can also be used with Testing Library.

## E2E Testing {#e2e-testing}

Expand Down Expand Up @@ -265,6 +292,16 @@ When end-to-end (E2E) tests are run in continuous integration/deployment pipelin

- [Cypress](https://www.cypress.io/) has an informative graphical interface, excellent debuggability, built-in assertions, stubs, flake-resistance, and snapshots. As mentioned above, it provides stable support for [Component Testing](https://docs.cypress.io/guides/component-testing/introduction). Cypress supports Chromium-based browsers, Firefox, and Electron. WebKit support is available, but marked experimental. Cypress is MIT-licensed, but some features like parallelization require a subscription to Cypress Cloud.

<div class="lambdatest">
<a href="https://lambdatest.com" target="_blank">
<img src="/images/lambdatest.svg">
<div>
<div class="testing-partner">Testing Sponsor</div>
<div>Lambdatest is a cloud platform for running E2E, accessibility, and visual regression tests across all major browsers and real devices, with AI assisted test generation!</div>
</div>
</a>
</div>

### Other Options {#other-options-2}

- [Nightwatch](https://nightwatchjs.org/) is an E2E testing solution based on [Selenium WebDriver](https://www.npmjs.com/package/selenium-webdriver). This gives it the widest browser support range, including native mobile testing. Selenium-based solutions will be slower than Playwright or Cypress.
Expand Down
Loading

0 comments on commit f9c82f4

Please sign in to comment.