diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md index 4e9b9e4a..cf91f728 100644 --- a/src/guide/scaling-up/testing.md +++ b/src/guide/scaling-up/testing.md @@ -1,6 +1,29 @@ + # Testing {#testing} @@ -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 } @@ -129,62 +152,66 @@ Component tests should focus on the component's public interfaces rather than in - ```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') +``` - ```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') +``` - ```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) +``` @@ -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} @@ -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. +
+ + +
+
Testing Sponsor
+
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!
+
+ +
+ ### 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. diff --git a/src/public/images/lambdatest.svg b/src/public/images/lambdatest.svg new file mode 100644 index 00000000..f4875ee1 --- /dev/null +++ b/src/public/images/lambdatest.svg @@ -0,0 +1,18 @@ + + + + LOGO + Created with Sketch. + + + + + + +