Files

undergroundwires 736590558b Migrate web builds from Vue CLI to Vite

This commit changes the web application's build, transpilation and
minification process from Vue CLI to Vite. This shift paves the way for
a full migration to Vite as the primary build tool (#230).

Configuration changes:

- `.vscode/extensions.json`: Update recommended plugins, replacing
  unmaintained ones with official recommendations.
- Legacy browser support:
  - Use `@vitejs/plugin-legacy` to transpile for older browsers.
  - Remove `core-js` dependency and `babel.config.cjs` configuration as
    they're now handled by the legacy plugin.
  - Delete `@babel/preset-typescript` and `@babel/preset-typescript`
    dependencies as legacy plugin handles babel dependencies by default.
  - Add `terser` dependency that's used by the legacy plugin for
    minification, as per Vite's official documentation.
- `tsconfig.json`:
  - Remove obsolete `webpack-env` types.
  - Add `"resolveJsonModule": true` to be able to read JSON files in
    right way.
  - Use correct casing as configuration values.
  - Simplify `lib` to align with Vite and Vue starter configuration.
  - Add `"skipLibCheck": true` as `npm run build` now runs `tsc` which
    fails on inconsistent typings inside `node_modules` due to npm's
    weak dependency resoultion.
- PostCSS:
  - Add `autoprefixer` as dependency, no longer installed by Vue CLI.
  - Epxlicitly added `postcss` as dependency to anticipate potential
    peer dependency changes.
- Remove related `@vue/cli` dependencies.
- Remove `sass-loader` as Vite has native CSS preprocessing support.
- Run integration tests with `jsdom` environment so `window` object can
  be used.

Client-side changes:

- Abstract build tool specific environment variable population.
  Environment variables were previously populated by Vue CLI and now by
  Vite but not having an abstraction caused issues. This abstraction
  solves build errors and allows easier future migrations and testing.
- Change Vue CLI-specific `~@` aliases to `@` to be able to compile with
  Vite.
- Update types in LiquorTree to satisfy `tsc`.
- Remove Vue CLI-specific workaround from `src/presentation/main.ts`.

Restructuring:

- Move `public/` to `presentation/` to align with the layered structure,
  which was not possible with Vue CLI.
- Move `index.html` to web root instead of having it inside `public/` to
  align with official recommended structure.
- Move logic shared by both integration and unit tests to
  `tests/shared`.
- Move logo creation script to `scripts/` and its npm command to include
  `build` to align with rest of the structure.

2023-08-23 23:12:56 +02:00

3.9 KiB

Raw Blame History

Tests

There are different types of tests executed:

Unit tests
Integration tests
End-to-end (E2E) tests
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.
Configured with the Vue CLI plugin e2e-cypress.

Automated checks

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

Use various tools and scripts.
Are automatically executed as GitHub workflows.

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.
- bootstrap/setup.ts: Initializes unit and integration tests.
./tests/unit/
- Stores unit test code.
- The directory structure mirrors ./src/.
  - E.g., tests for ./src/application/ApplicationFactory.ts reside in ./tests/unit/application/ApplicationFactory.spec.ts.
- shared/
  - Contains shared unit test functionalities.
  - Assertions/: Contains common assertion functions, prefixed with expect.
  - TestCases/
    - Shared test cases.
    - Functions that calls it() from Vitest should have it prefix.
  - Stubs/: Maintains stubs for component isolation, equipped with basic functionalities and, when necessary, spying or mocking capabilities.
./tests/integration/: Contains integration test files.
./tests/e2e/
- cypress.config.ts: Cypress configuration file.
- ./tests/e2e/: Base Cypress folder.
  - /specs/: Test files named with .spec.js extension.
  - /plugins/index.js: Plugin file executed before loading project.
  - /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.

3.9 KiB Raw Blame History