Node v20, package updates

.eslintrc.js

@@ -1,57 +1,96 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  plugins: ['vuejs-accessibility'],
   extends: [
-    '@vue/airbnb',
     '@vue/typescript/recommended',
-    'plugin:vue/essential',
-    'plugin:vuejs-accessibility/recommended'
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
   ],
   parserOptions: {
-    parser: '@typescript-eslint/parser', // the typescript-parser for eslint, instead of tslint
-    ecmaVersion: 2020,
+    ecmaVersion: 2021,
     ecmaFeatures: {
-      jsx: false
-    }
+      jsx: false,
+    },
   },
   rules: {
-    '@typescript-eslint/consistent-type-assertions': ['error', { assertionStyle: 'angle-bracket' }],
     '@typescript-eslint/no-non-null-assertion': 'off',
-    'arrow-parens': ['error', 'as-needed'],
-    'comma-dangle': ['error', 'never'],
-    'dot-location': ['error', 'object'],
-    'implicit-arrow-linebreak': 'off',
-    'import/no-named-default': 'off',
-    'import/order': ['error', { groups: ['builtin', 'external', 'parent', 'sibling', 'index'] }],
+    'import/extensions': 'off',
     'max-classes-per-file': 'off',
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-plusplus': 'off',
-    'no-shadow': 'off',
-    'no-useless-constructor': 'off',
+    'vue/no-multiple-template-root': 'off',
+    'vue/no-v-html': 'off',
     'vue/script-indent': ['error', 2, { baseIndent: 1 }],
     'vuejs-accessibility/click-events-have-key-events': 'off',
-    semi: ['error', 'never']
+    'vuejs-accessibility/no-static-element-interactions': 'off',
+    semi: ['error', 'never'],
   },
   overrides: [
     {
       files: ['*.vue'],
       rules: {
         indent: 'off',
-        'class-methods-use-this': 'off'
-      }
+      },
     },
     {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      files: ['src/**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
       ],
+      parserOptions: {
+        project: true,
+      },
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      }
+    },
+    {
+      files: ['tests/unit/**/*.ts'],
+      plugins: ['chai-expect', 'chai-friendly', 'mocha'],
       env: {
-        mocha: true
+        mocha: true,
+      },
+      extends: [
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+      ],
+      parserOptions: {
+        project: true,
+      },
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
       }
-    }
-  ]
+    },
+    {
+      files: ['tests/unit/**/*.spec.ts'],
+      rules: {
+        'no-unused-expressions': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
+    {
+      files: ['tests/e2e/**/*.ts'],
+      plugins: ['cypress'],
+      env: {
+        'cypress/globals': true,
+      },
+      extends: [
+        'plugin:cypress/recommended',
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+      ],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+      parserOptions: {
+        project: true,
+      },
+    },
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
 }

.github/workflows/ci.yml

@@ -10,34 +10,55 @@ on:
     branches: [master]
 
 jobs:
-  test:
-    name: Tests
+  unit:
+    name: Unit Tests
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
       with:
         submodules: true
+    - name: Enable Corepack
+      run: corepack enable
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Run unit tests
-      run: yarn ci:unit
-    - name: Run e2e tests
-      run: yarn ci:e2e
+      run: yarn test:unit
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        submodules: true
+    - name: Enable Corepack
+      run: corepack enable
+    - uses: cypress-io/github-action@v6
+      with:
+        build: yarn build
+        start: yarn serve
+        record: true
+        wait-on: http://localhost:8080
+      env:
+        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
   lint:
     name: Linters
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
       with:
         submodules: true
+    - name: Enable Corepack
+      run: corepack enable
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Run ESLint

.github/workflows/deploy.yml

@@ -29,21 +29,30 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
     - name: Setup pages
-      uses: actions/configure-pages@v2
+      uses: actions/configure-pages@v4
+    - name: Enable Corepack
+      run: corepack enable
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Build
       run: yarn build
     - name: Upload
-      uses: actions/upload-pages-artifact@v1
+      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:
@@ -55,4 +64,4 @@ jobs:
     steps:
     - name: Deploy to GitHub Pages
       id: deployment
-      uses: actions/deploy-pages@v1
+      uses: actions/deploy-pages@v4

.gitignore

@@ -3,3 +3,12 @@
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -1 +1 @@
-v16
+v20

.stylelintrc.json

@@ -4,7 +4,6 @@
     "stylelint-config-recommended-vue/scss"
   ],
   "rules":   {
-    "function-parentheses-space-inside": "never-single-line",
     "max-nesting-depth":                 null,
     "selector-max-id":                   null
   }

.yarnrc.yml

@@ -1,8 +1,3 @@
 nodeLinker: node-modules
 
-packageExtensions:
-  stylelint-config-recommended-vue@*:
-    dependencies:
-      stylelint-config-recommended: ^6
-
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -179,7 +179,7 @@ Unit tests are powered by Mocha using Chai's `expect` syntax. A `fixtures.ts`
 file contains example survey responses that can be used for testing.
 
 Cypress tests are written in TypeScript. To prevent Mocha/Chai's globals from
-interfering with Cypress's globals, a custom `tsconfig.json` and `index.d.ts`
+interfering with Cypress's globals, a custom `tsconfig.json` and `cypress.d.ts`
 have been placed in the `test/e2e` directory to isolate the Cypress namespace.
 
 `test/e2e/plugins/index.js` has been modified to add a Webpack preprocessor that

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
+  presets: ['@vue/cli-plugin-babel/preset'],
 }

cypress.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress'
+
+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)
+    },
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.js'
+  }
+})