Skip to content

Commit

Permalink
Migrate unit/integration tests to Vitest with Vite
Browse files Browse the repository at this point in the history
As part of transition to Vue 3.0 and Vite (#230), this commit
facilitates the shift towards building rest of the application using
Vite. By doing so, it eliminates reliance on outdated Electron building
system that offered limited control, blocking desktop builds (#233).

Changes include:

- Introduce Vite with Vue 2.0 plugin for test execution.
- Remove `mocha`, `chai` and other related dependencies.
- Adjust test to Vitest syntax.
- Revise and update `tests.md` to document the changes.
- Add `@modyfi/vite-plugin-yaml` plugin to be able to use yaml file
  depended logic on test files, replacing previous webpack behavior.
- Fix failing tests that are revealed by Vitest due to unhandled errors
  and lack of assertments.
- Remove the test that depends on Vue CLI populating `process.env`.
- Use `jsdom` for unit test environment, adding it to dependency to
  `package.json` as project now depends on it and it was not specified
  even though `package-lock.json` included it.
  • Loading branch information
undergroundwires committed Aug 22, 2023
1 parent 0873769 commit 5f11c8d
Show file tree
Hide file tree
Showing 133 changed files with 8,342 additions and 7,765 deletions.
3 changes: 0 additions & 3 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@ module.exports = {
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
mocha: true,
},
},
{
files: ['**/tests/**/*.{j,t}s?(x)'],
Expand Down
108 changes: 55 additions & 53 deletions docs/tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,76 @@ There are different types of tests executed:
1. [Unit tests](#unit-tests)
2. [Integration tests](#integration-tests)
3. [End-to-end (E2E) tests](#e2e-tests)
4. [Automated checks](#automated-checks)

Common aspects for all tests:
## Unit and integration tests

- They use [Mocha](https://mochajs.org/) and [Chai](https://www.chaijs.com/).
- Their files end with `.spec.{ts|js}` suffix.
- They utilize [Vitest](https://vitest.dev/).
- Test files are suffixed with `.spec.ts`.

💡 You can use path/module alias `@/tests` in import statements.
### Act, arrange, assert

## Unit tests
- 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 test each component in isolation.
- All unit tests goes under [`./tests/unit`](./../tests/unit).
- They rely on [stubs](./../tests/unit/shared/Stubs) for isolation.
- Unit tests include also Vue component tests using `@vue/test-utils`.
### Unit tests

### Unit tests structure
- Evaluate individual components in isolation.
- Located in [`./tests/unit`](./../tests/unit).
- Achieve isolation using [stubs](./../tests/unit/shared/Stubs).
- Include Vue component tests, enabled by `@vue/test-utils`.

- [`./src/`](./../src/)
- Includes source code that unit tests will test.
- [`./tests/unit/`](./../tests/unit/)
- Includes test code.
- Tests follow same folder structure as [`./src/`](./../src).
- E.g. if system under test lies in [`./src/application/ApplicationFactory.ts`](./../src/application/ApplicationFactory.ts) then its tests would be in test would be at [`./tests/unit/application/ApplicationFactory.spec.ts`](./../tests/unit/application/ApplicationFactory.spec.ts).
- [`shared/`](./../tests/unit/shared/)
- Includes common functionality that's shared across unit tests.
- [`Assertions/`](./../tests/unit/shared/Assertions):
- Common assertions that extend [Chai Assertion Library](https://www.chaijs.com/).
- Asserting functions should start with `expect` prefix.
- [`TestCases/`](./../tests/unit/shared/TestCases/)
- Shared test cases.
- Functions that calls `it()` from [Mocha test framework](https://mochajs.org/) should have `it` prefix.
- E.g. `itEachAbsentCollectionValue()`.
- [`Stubs/`](./../tests/unit/shared/Stubs)
- Includes stubs to be able to test components in isolation.
- Stubs have minimal and dummy behavior to be functional, they may also have spying or mocking functions.
#### Unit tests naming

### 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', () => ...)`.

- Each test suite first describe the system under test.
- E.g. tests for class `Application.ts` are all inside `Application.spec.ts`.
- `describe` blocks tests for same function (if applicable).
- E.g. test for `run()` are inside `describe('run', () => ..)`.
### Integration tests

### Act, arrange, assert
- Assess the combined functionality of components.
- They verify that third-party dependencies function as anticipated.

- Tests use act, arrange and assert (AAA) pattern when applicable.
- **Arrange**
- Sets up the test case.
- Starts with comment line `// arrange`.
- **Act**
- Executes the actual test.
- Starts with comment line `// act`.
- **Assert**
- Elicit some sort of expectation.
- Starts with comment line `// assert`.
## E2E tests

## Integration 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).

- Tests functionality of a component in combination with others (not isolated).
- Ensure dependencies to third parties work as expected.
- Defined in [./tests/integration](./../tests/integration).
## Automated checks

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

- Test the functionality and performance of a running application.
- Vue CLI plugin [`e2e-cypress`](https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-e2e-cypress#readme) configures E2E tests.
- Test names and folders have logical structure based on tests executed.
- The structure is following:
- Use [various tools](./../package.json) and [scripts](./../scripts).
- Are automatically executed as [GitHub workflows](./../.github/workflows).

## Tests structure

- [`package.json`](./../package.json): Defines test commands and includes tools used in tests.
- [`vite.config.ts`](./../vite.config.ts): Configures `vitest` for unit and integration tests.
- [`./src/`](./../src/): Contains the source code subject to testing.
- **[`./tests/bootstrap/setup.ts`](./../tests/bootstrap/setup.ts)**: Initializes tests.
- **[`./tests/unit/`](./../tests/unit/)**
- Stores unit test code.
- The directory structure mirrors [`./src/`](./../src).
- E.g., tests for [`./src/application/ApplicationFactory.ts`](./../src/application/ApplicationFactory.ts) reside in [`./tests/unit/application/ApplicationFactory.spec.ts`](./../tests/unit/application/ApplicationFactory.spec.ts).
- [`shared/`](./../tests/unit/shared/)
- Contains shared unit test functionalities.
- [`Assertions/`](./../tests/unit/shared/Assertions): Contains common assertion functions, prefixed with `expect`.
- [`TestCases/`](./../tests/unit/shared/TestCases/)
- Shared test cases.
- 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.
Expand Down
Loading

0 comments on commit 5f11c8d

Please sign in to comment.