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`.
This commit is contained in:
undergroundwires
2023-08-24 13:45:34 +02:00
parent 736590558b
commit ec98d8417f
21 changed files with 1237 additions and 8939 deletions

View File

@@ -1,7 +1,8 @@
import { resolve } from 'path';
import { resolve, dirname } from 'path';
import { fileURLToPath } from 'url';
import { VITE_ENVIRONMENT_KEYS } from './src/infrastructure/Metadata/Vite/ViteEnvironmentKeys';
import tsconfigJson from './tsconfig.json';
import packageJson from './package.json';
import tsconfigJson from './tsconfig.json' assert { type: 'json' };
import packageJson from './package.json' assert { type: 'json' };
export function getAliasesFromTsConfig(): Record<string, string> {
const { paths } = tsconfigJson.compilerOptions;
@@ -9,12 +10,18 @@ export function getAliasesFromTsConfig(): Record<string, string> {
const pathFolder = paths[pathName][0];
const aliasFolder = pathFolder.substring(0, pathFolder.length - 1); // trim * from end
const aliasName = pathName.substring(0, pathName.length - 2); // trim /* from end
const aliasPath = resolve(__dirname, aliasFolder);
const aliasPath = resolve(getSelfDirectoryAbsolutePath(), aliasFolder);
aliases[aliasName] = aliasPath;
return aliases;
}, {});
}
export function getSelfDirectoryAbsolutePath() {
const filePath = fileURLToPath(import.meta.url);
const directoryPath = dirname(filePath);
return directoryPath;
}
type ViteEnvironmentKeyValues = {
[K in typeof VITE_ENVIRONMENT_KEYS[keyof typeof VITE_ENVIRONMENT_KEYS]]: string
};