Re-initialize Vue

.eslintrc.cjs

@@ -1,30 +1,25 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier",
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
   ],
-  env: {
-    "vue/setup-compiler-macros": true,
-  },
   overrides: [
     {
-      files: ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],
-      extends: ["plugin:cypress/recommended"],
-    },
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
   ],
-  rules: {
-    "no-empty": 0,
-    "no-constant-condition": 0,
-    "@typescript-eslint/no-empty-function": 0,
-    "no-case-declarations": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/ban-ts-comment": 0,
-  },
-};
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.prettierrc.json

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

.vscode/extensions.json

@@ -1,3 +1,9 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "ZixuanChen.vitest-explorer"]
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "ZixuanChen.vitest-explorer"
+  ]
 }

README.md

@@ -251,11 +251,18 @@ npm run test:unit
 ### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
 
 ```sh
-npm run build
-npm run test:e2e # or `npm run test:e2e:ci` for headless testing
+npm run test:e2e:dev
 ```
 
-Please note that `cypress` expects the base URL to be `"/"`. Modify your local `vite.config.ts` accordingly before running e2e tests.
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+npm run build
+npm run test:e2e
+```
 
 ### Lint with [ESLint](https://eslint.org/)
 

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

cypress/e2e/basic.cy.ts

@@ -0,0 +1,22 @@
+// https://on.cypress.io/api
+
+describe("Basic test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h2", "Scale data");
+  });
+});
+
+describe("404 page", () => {
+  it("creates an octaplex", () => {
+    cy.visit("/non-existing-page");
+    cy.contains("h2", "Not found");
+    cy.get("a").last().click();
+    cy.get("button").first().click();
+    cy.contains("h2", "Scale data");
+    cy.get("#scale-name").should(
+      "have.value",
+      "The Octaplex (3 5 7 11)"
+    );
+  });
+});

cypress/tsconfig.json → cypress/e2e/tsconfig.json

@@ -1,6 +1,6 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["./integration/**/*", "./support/**/*"],
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["./**/*", "../support/**/*"],
   "compilerOptions": {
     "isolatedModules": false,
     "target": "es5",

cypress/support/commands.ts

@@ -1,5 +1,6 @@
+/// <reference types="cypress" />
 // ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -23,3 +24,16 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {}

cypress/support/index.ts → cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')