Vue 3, Vite, Vitest

.eslintrc.cjs

@@ -0,0 +1,29 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  },
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.github/workflows/ci.yml

@@ -40,9 +40,8 @@ jobs:
     - uses: cypress-io/github-action@v6
       with:
         build: yarn build
-        start: yarn serve
+        start: npx vite preview --port 4173
         record: true
-        wait-on: http://localhost:8080
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
   lint:
@@ -62,6 +61,8 @@ jobs:
     - name: Install dependencies
       run: yarn install
     - name: Run ESLint
-      run: npx vue-cli-service lint
+      run: yarn lint
     - name: Run Stylelint
       run: npx stylelint src/**/*.css src/**/*.vue src/**/*.scss
+    - name: Type check
+      run: yarn type-check

.github/workflows/deploy.yml

@@ -47,14 +47,7 @@ jobs:
       uses: actions/upload-pages-artifact@v3
       with:
         path: "dist/"
-    - name: Notify Bugsnag
-      uses: psprings/[email protected]
-      with:
-        apiKey: ${{ secrets.BUGSNAG_API_KEY }}
-        appVersion: ${{ github.sha }}
-        releaseStage: production
 
-  # Deployment job
   deploy:
     environment:
       name: github-pages
@@ -65,3 +58,9 @@ jobs:
     - name: Deploy to GitHub Pages
       id: deployment
       uses: actions/deploy-pages@v4
+    - name: Notify Bugsnag
+      uses: psprings/[email protected]
+      with:
+        apiKey: ${{ secrets.BUGSNAG_API_KEY }}
+        appVersion: ${{ github.sha }}
+        releaseStage: production

.gitignore

@@ -1,8 +1,33 @@
-/dist
-/docs
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-/tests/e2e/videos/
-/tests/e2e/screenshots/
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
 
 # Yarn
 .pnp.*

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

.stylelintrc.json

@@ -1,10 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard-scss",
-    "stylelint-config-recommended-vue/scss"
-  ],
-  "rules":   {
-    "max-nesting-depth":                 null,
-    "selector-max-id":                   null
-  }
+    "stylelint-config-recommended-vue/scss",
+    "stylelint-config-recess-order"
+  ]
 }

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.yarnrc.yml

@@ -1,3 +1 @@
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.1.0.cjs

cypress.config.ts

@@ -1,18 +1,13 @@
 import { defineConfig } from 'cypress'
+import vitePreprocessor from 'cypress-vite'
 
 export default defineConfig({
   projectId: '69ff82',
-  fixturesFolder: 'tests/e2e/fixtures',
-  screenshotsFolder: 'tests/e2e/screenshots',
-  videosFolder: 'tests/e2e/videos',
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./tests/e2e/plugins/index.js')(on, config)
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173',
+    setupNodeEvents(on) {
+      on('file:preprocessor', vitePreprocessor())
     },
-    baseUrl: 'http://localhost:8080',
-    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
-    supportFile: 'tests/e2e/support/index.js'
   }
 })

tests/e2e/specs/answerFlows.ts → cypress/e2e/answerFlows.spec.ts

@@ -1,5 +1,5 @@
-import { makeResponse } from '../../unit/support'
-import { accidentAnswer, incidentAnswer, seriousIncidentAnswer } from '../../unit/response/fixtures'
+import { makeResponse } from '../support/answerUtils'
+import { accidentAnswer, incidentAnswer, seriousIncidentAnswer } from '../fixtures/answers'
 import runResponse from '../support/runResponse'
 import { endNode } from '@/models/response/answer'
 

tests/unit/response/fixtures.ts → cypress/fixtures/answers.ts

@@ -1,5 +1,5 @@
 import { constant, times } from 'lodash-es'
-import { endNode, QuestionResponseNode } from '@/models/response/answer'
+import { endNode, type QuestionResponseNode } from '@/models/response/answer'
 
 // injury -> death -> within 30 days
 export const accidentAnswer: Readonly<QuestionResponseNode> = {

tests/unit/support.ts → cypress/support/answerUtils.ts

@@ -1,8 +1,12 @@
 import {
   find, isArray, isNil, mergeWith, zip
 } from 'lodash-es'
-import { ResponseNode, endNode, QuestionResponseNode } from '@/models/response/answer'
-import Response from '@/models/response'
+import {
+  endNode,
+  type QuestionResponseNode,
+  type ResponseNode
+} from '@/models/response/answer'
+import { Response } from '@/models/response'
 
 export function makeResponse(survey: string, answer?: QuestionResponseNode): Response {
   const response = new Response(survey)

cypress/support/commands.ts

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+Cypress.Commands.add('dataCy', value => cy.get(`[data-cy=${value}]`))
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      dataCy(value: string): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+export {}

tests/e2e/support/runResponse.ts → cypress/support/runResponse.ts

@@ -1,10 +1,14 @@
 import { compact, isUndefined } from 'lodash-es'
-import Response from '@/models/response'
-import ResponseTraverser, { beyondEndNode } from '@/models/response/traverser'
-import { endNode, isQuestionResponseNode } from '@/models/response/answer'
+import ResponseTraverser, {
+  beyondEndNode
+} from '@/models/response/traverser'
+import {
+  endNode,
+  isQuestionResponseNode
+} from '@/models/response/answer'
+import { Response } from '@/models/response'
 
 export default function runResponse(response: Response): void {
-  console.log(response)
   new ResponseTraverser(response).traverse({
     visitQuestion(question, answerNode) {
       if (isUndefined(answerNode) || answerNode === endNode || answerNode === beyondEndNode) {

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

public/index.html → index.html

@@ -1,24 +1,23 @@
-<!doctype html>
-<html>
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta content="IE=edge" http-equiv="X-UA-Compatible">
-  <title>Help, I crashed my plane!</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta content="Help navigating NTSB 830, for when you crash your plane" name="description">
   <meta content="width=device-width, initial-scale=1" name="viewport">
 
-  <link rel="mask-icon" href="<%= BASE_URL %>icon-pinned-tab.svg" color="#0e6ba8">
+  <title>Help, I crashed my plane!</title>
+
+  <link rel="mask-icon" href="/icon-pinned-tab.svg" color="#0e6ba8">
 </head>
 
 <body>
-
 <noscript>
   <strong>Please enable JavaScript after crashing your plane.</strong>
 </noscript>
 
 <div id="app"></div>
 
+<script type="module" src="/src/main.ts"></script>
 </body>
-
 </html>