Migrate Cypress (E2E) tests to Vite and TypeScript

This commit progresses the migration from Vue CLI to Vite (#230).

TypeScript migration:

- Convert JavaScript Cypress tests and configurations to TypeScript.
- Introduce `tsconfig.json` for Cypress, following official
  recommendation.

Test execution:

- Use Cypress CLI to run the tests.
- Rename Cypress commands to reflect official naming conventions.
- Start Vue server prior to Cypress execution, using
  `start-server-and-test` package based on official documentation.
- Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`).

Configuration standardization (based on Cypress docs):

- Delete unused `plugins/` directory.
- Move test (spec) files to to the root directory.
- Add official ESLint plugin (`eslint-plugin-cypress`).

Changes for importing `vite.config.ts` into `cypress.config.ts`:

- Add TypeScript import assertations to files importing JSON files.
- Use ESM friendly way instead of `__dirname` to solve `ReferenceError:
  __dirname is not defined in ES module scrope`.

Other changes:

- Simplify comments in placeholder files.
- Create Cypress specific `.gitignore` for enhanced maintainability,
  clarity and scalability.
- Remove redundant `vue.config.cjs`.

.github/workflows/tests.e2e.yaml

@@ -23,4 +23,4 @@ jobs:
         run: npm ci
       -
         name: Run e2e tests
-        run: npm run test:e2e -- --headless
+        run: npm run test:cy:run

.gitignore

@@ -5,6 +5,3 @@ dist/
 !.vscode/extensions.json
 #Electron-builder output
 /dist_electron
-# Cypress
-/tests/e2e/screenshots
-/tests/e2e/videos

cypress.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'cypress';
-import setupPlugins from './tests/e2e/plugins/index';
+import ViteConfig from './vite.config';
+
+const CYPRESS_BASE_DIR = 'tests/e2e/';
 
 export default defineConfig({
-  fixturesFolder: 'tests/e2e/fixtures',
-  screenshotsFolder: 'tests/e2e/screenshots',
-  videosFolder: 'tests/e2e/videos',
+  fixturesFolder: `${CYPRESS_BASE_DIR}/fixtures`,
+  screenshotsFolder: `${CYPRESS_BASE_DIR}/screenshots`,
+  videosFolder: `${CYPRESS_BASE_DIR}/videos`,
   e2e: {
-    setupNodeEvents(on, config) {
-      return setupPlugins(on, config);
-    },
-    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
-    supportFile: 'tests/e2e/support/index.js',
+    baseUrl: `http://localhost:${ViteConfig.server.port}/`,
+    specPattern: `${CYPRESS_BASE_DIR}/**/*.cy.{js,jsx,ts,tsx}`, // Default: cypress/e2e/**/*.cy.{js,jsx,ts,tsx}
+    supportFile: `${CYPRESS_BASE_DIR}/support/e2e.ts`,
   },
 });

docs/development.md

@@ -18,9 +18,9 @@ You could run other types of tests as well, but they may take longer time and ov
 
 - Run unit tests: `npm run test:unit`
 - Run integration tests: `npm run test:integration`
-- Run e2e (end-to-end) tests
-  - Interactive mode with GUI: `npm run test:e2e`
-  - Headless mode without GUI: `npm run test:e2e -- --headless`
+- Run end-to-end (e2e) tests:
+  - `npm run test:cy:open`: Run tests interactively using the development server with hot-reloading.
+  - `npm run test:cy:run`: Run tests on the production build in a headless mode.
 
 📖 Read more about testing in [tests](./tests.md).
 

docs/tests.md

@@ -47,7 +47,7 @@ There are different types of tests executed:
 ## E2E tests
 
 - Examine the live web application's functionality and performance.
-- Configured with the Vue CLI plugin [`e2e-cypress`](https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-e2e-cypress#readme).
+- Uses Cypress to run the tests.
 
 ## Automated checks
 
@@ -75,11 +75,9 @@ These checks validate various qualities like runtime execution, building process
       - Functions that calls `it()` from [Vitest](https://vitest.dev/) should have `it` prefix.
     - [`Stubs/`](./../tests/unit/shared/Stubs): Maintains stubs for component isolation, equipped with basic functionalities and, when necessary, spying or mocking capabilities.
 - [`./tests/integration/`](./../tests/integration/): Contains integration test files.
-- [`./tests/e2e/`](./../tests/e2e/)
-  - [`cypress.config.ts`](./../cypress.config.ts): Cypress configuration file.
-  - [`./tests/e2e/`](./../tests/e2e/): Base Cypress folder.
-    - [`/specs/`](./../tests/e2e/specs/): Test files named with `.spec.js` extension.
-    - [`/plugins/index.js`](./../tests/e2e/plugins/index.js): Plugin file executed before loading project.
-    - [`/support/index.js`](./../tests/e2e/support/index.js): Support file, runs before every single spec file.
-    - *(Ignored)* `/videos`: Asset folder for videos taken during tests.
-    - *(Ignored)* `/screenshots`: Asset folder for Screenshots taken during tests.
+- [`cypress.config.ts`](./../cypress.config.ts): Cypress (E2E tests) configuration file.
+- [`./tests/e2e/`](./../tests/e2e/): Base Cypress folder, includes tests with `.cy.ts` extension.
+  - [`/support/e2e.ts`](./../tests/e2e/support/e2e.ts): Support file, runs before every single spec file.
+  - [`/tsconfig.json`]: TypeScript configuration for file Cypress code, improves IDE support, recommended to have by official documentation.
+  - *(git ignored)* `/videos`: Asset folder for videos taken during tests.
+  - *(git ignored)* `/screenshots`: Asset folder for Screenshots taken during tests.