Stress-free Testing with Vue 3, Cypress, and Vite

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

Get Ready for the Day

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.
Download the recommended Desktop Apps (Miro + Figma).
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.

Github Repositories

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.

App Downloads

📋 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).

Tooling

Ecosystem

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.

Styling

WindiCSS, a Tailwind-compatible Utility CSS Framework for use within tests.
Iconify Icons to beautify the UI.

VSCode Extensions

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.only and describe.only
Antfu's Iconify Visualizer to preview icons in your templates and script tags.
ESLint with Prettier for formatting.

SabeurMohamedAmin/stress-free-testing