A pre-conference workshop for Vue Toronto 2021
🔗 Quick Links: Vue Test Utils API for Vue 3, Lachlan Miller's Vue Testing Handbook, Interacting with Elements using Cy Commands, Cypress API, Chai Matchers
Good morning! Either before or at the beginning of the workshop, make sure to set up your environment:
-
If you don't already have it... install Node >= 14.17.0 with nvm and install yarn.
-
Clone either the Stress Free Testing.
gh repo clone JessicaSachs/stress-free-testing # Github CLI -
Run
yarn install. -
Install the recommended VSCode Extensions. You should see a small prompt pop up in the bottom-right corner of VSCode once you open the repository.
-
Sign up for Miro and open the board.
-
Open the Figma File and look through the mocks.
The accompanying repository for the "Stress-free Testing with Vue 3 and Vite" workshop is located at Stress Free Testing. All parts of this workshop will be completed in this repo. If you get lost or need to reset your workspace to a known good state, you may refer to the map of branches below.
| Section | Branch | Description |
|---|---|---|
| 🔰 The Beginning | 1-the-beginning |
The "Hello World" Scaffold, great starting point for a template. |
| 🐤 Simple Mount | 2-simple-mount |
Working with Vue Test Utils' Syntax and JSX Syntax. |
| 🛠 Setup Environment | 3-setup-environment |
How to keep your tests production-like. |
| 💅 The Product Card | 4-the-product-card |
Testing your first presentational component. |
| 🕵 Powerful Mock Data | 5-powerful-mock-data |
Use faker to generate realistic data and stress-test your UI. |
| 🔈 Emitted Events | 6-emitted-events |
Assert custom and native events were invoked using cy.spy(). |
| 🎰 Slots | 7-slots |
Testing slots easily with JSX. |
| 🎰 🎰 Scoped Slots | 8-scoped-slots |
Testing scoped slots not-as-easily with JSX. |
| 🔗 Router | 9-router |
Navigate throughout your application using Vue Router v4. |
| 📦 Stores and Plugins | 10-stores-and-plugins |
Learn how to test a Pinia store. |
- 📋 Miro is where the majority of the workshop will be held (Desktop App Preferred, Workshop Board).
- 👩🎨 Figma contains the mocks for our App (Desktop App, Mockups).
- Vue 3 with the new
<script setup>syntax. - Vite for lightning-fast development.
- Component Testing with Cypress Component Testing.
- End-to-end Testing with Cypress E2E Testing.
- Headless UI for quick and easy dropdowns, tabs, and more.
WindiCSS, a Tailwind-compatible Utility CSS Framework for use within tests.
- Iconify Icons to beautify the UI.
Please use VSCode with Recommended Extensions for the best Developer Experience. Other editors should work fine, however support for all language features used in this workshop has not been tested.
- Volar for Vue Syntax Highlighting.
- Chris Breiding's Test Utils for toggling
it.onlyanddescribe.only - Antfu's Iconify Visualizer to preview icons in your templates and script tags.
- ESLint with Prettier for formatting.