Files
privacy.sexy/docs/tests.md
undergroundwires ec98d8417f 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`.
2023-08-24 13:45:34 +02:00

3.8 KiB

Tests

There are different types of tests executed:

  1. Unit tests
  2. Integration tests
  3. End-to-end (E2E) tests
  4. Automated checks

Unit and integration tests

  • They utilize Vitest.
  • Test files are suffixed with .spec.ts.

Act, arrange, assert

  • Tests implement the act, arrange, and assert (AAA) pattern.
  • Arrange
    • Sets up the test scenario and environment.
    • Begins with comment line // arrange.
  • Act
    • Executes the actual test.
    • Begins with comment line // act.
  • Assert
    • Sets an expectation for the test's outcome.
    • Begins with comment line // assert.

Unit tests

  • Evaluate individual components in isolation.
  • Located in ./tests/unit.
  • Achieve isolation using stubs.
  • Include Vue component tests, enabled by @vue/test-utils.

Unit tests naming

  • Test suites start with a description of the component or system under test.
    • E.g., tests for Application.ts are contained in Application.spec.ts.
  • Whenever possible, describe blocks group tests of the same function.
    • E.g., tests for run() are inside describe('run', () => ...).

Integration tests

  • Assess the combined functionality of components.
  • They verify that third-party dependencies function as anticipated.

E2E tests

  • Examine the live web application's functionality and performance.
  • Uses Cypress to run the tests.

Automated checks

These checks validate various qualities like runtime execution, building process, security testing, etc.

Tests structure

  • package.json: Defines test commands and includes tools used in tests.
  • vite.config.ts: Configures vitest for unit and integration tests.
  • ./src/: Contains the code subject to testing.
  • ./tests/shared/: Contains code shared by different test categories.
  • ./tests/unit/
  • ./tests/integration/: Contains integration test files.
  • cypress.config.ts: Cypress (E2E tests) configuration file.
  • ./tests/e2e/: Base Cypress folder, includes tests with .cy.ts extension.
    • /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.