This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
4.6 KiB
4.6 KiB
Tests
There are different types of tests executed:
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.tsare contained inApplication.spec.ts.
- E.g., tests for
- Whenever possible,
describeblocks group tests of the same function.- E.g., tests for
run()are insidedescribe('run', () => ...).
- E.g., tests for
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.
- Use various tools and scripts.
- Are automatically executed as GitHub workflows.
Security checks
checks.security.sast: Utilizes CodeQL to conduct Static Analysis Security Testing (SAST) to ensure the secure integrity of the codebase.checks.security.dependencies: Performs audits on third-party dependencies to identify and mitigate potential vulnerabilities, safeguarding the project from exploitable weaknesses.
Tests structure
package.json: Defines test commands and includes tools used in tests.vite.config.ts: Configuresvitestfor 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.Assertions/: Contains common assertion functions, prefixed withexpect.
./tests/unit/- Stores unit test code.
- The directory structure mirrors
./src/.- E.g., tests for
./src/application/ApplicationFactory.tsreside in./tests/unit/application/ApplicationFactory.spec.ts.
- E.g., tests for
shared/- Contains shared unit test functionalities.
TestCases/- Shared test cases.
- Functions that calls
it()from Vitest should haveitprefix.
Stubs/: Maintains stubs for component isolation, equipped with basic functionalities and, when necessary, spying or mocking capabilities.
./tests/integration/: Contains integration test files.cypress.config.ts: Cypress (E2E tests) configuration file.cypress-dirs.json: A central definition of directories used by Cypress, designed for reuse across different configurations../tests/e2e/: Base Cypress folder, includes tests with.cy.tsextension.- [
/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. /support/e2e.ts: Support file, runs before every single test file./support/interactions/: Contains reusable functions for simulating user interactions, enhancing test readability and maintainability.
- [