feat: setup cypress tests

.github/workflows/test.yml

@@ -0,0 +1,53 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v2
+  
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.15.1
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org/
+          cache: "pnpm"
+
+      - run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Type Check
+        run: pnpm run typecheck
+
+      - name: Cypress PNPM Patch
+        run: cp pnpm-lock.yaml package-lock.json
+
+      - name: Cypress
+        uses: cypress-io/github-action@v2
+        with:
+          install-command: echo
+          build: pnpm run build
+          start: npx vite -- --port 3333

README.md

@@ -46,6 +46,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 🦾 TypeScript, of course
 
+- ⚙️ E2E Testing with [Cypress](https://cypress.io/) on [GitHub Actions](https://github.com/features/actions)
+
 - ☁️ Deploy on Netlify, zero-config
 
 <br>
@@ -88,6 +90,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 ### Dev tools
 
 - [TypeScript](https://www.typescriptlang.org/)
+- [Cypress](https://cypress.io/) - E2E Testing
 - [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
 - [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
   - [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS
@@ -111,6 +114,7 @@ As this template is strongly opinionated, the following provides a curated list
 - [vitesse-nuxt](https://github.com/antfu/vitesse-nuxt) - Vitesse experience for Nuxt 2
 
 ###### Community
+
 - [vitesse-addons](https://github.com/JohnCampionJr/vitesse-addons) by [@johncampionjr](https://github.com/johncampionjr) - additional options for integrations, including [Prettier](https://prettier.io) and [Storybook](https://storybook.js.org)
 - [vitesse-ssr-template](https://github.com/frandiox/vitesse-ssr-template) by [@frandiox](https://github.com/frandiox) - Vitesse with SSR
 - [vitespa](https://github.com/ctholho/vitespa) by [@ctholho](https://github.com/ctholho) - Like Vitesse but without SSG/SSR

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3333",
+  "chromeWebSecurity": false
+}

cypress/integration/basic.spec.ts

@@ -0,0 +1,37 @@
+
+context('Basic', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('basic nav', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3333/')
+
+    cy.contains('[Home Layout]')
+      .should('exist')
+
+    cy.get('#input')
+      .type('Vitesse{Enter}')
+      .url()
+      .should('eq', 'http://localhost:3333/hi/Vitesse')
+
+    cy.contains('[Default Layout]')
+      .should('exist')
+
+    cy.get('.btn')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3333/')
+  })
+
+  it('markdown', () => {
+    cy.get('[title="About"]')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3333/about')
+
+    cy.get('pre.language-js')
+      .should('exist')
+  })
+})

cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    // be explicit about types included
+    // to avoid clashing with Jest types
+    "types": ["cypress"]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts"
+  ]
+}

package.json

@@ -4,6 +4,7 @@
     "build": "cross-env NODE_ENV=production vite-ssg build",
     "dev": "vite --port 3333 --open",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
+    "test": "cypress open",
     "preview": "vite preview",
     "preview-https": "serve dist",
     "typecheck": "vue-tsc --noEmit"
@@ -30,7 +31,9 @@
     "@vue/server-renderer": "^3.2.20",
     "critters": "^0.0.14",
     "cross-env": "^7.0.3",
+    "cypress": "^7.7.0",
     "eslint": "^8.1.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "https-localhost": "^4.7.0",
     "markdown-it-link-attributes": "^3.0.0",
     "markdown-it-prism": "^2.2.1",