cb42f11b97
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.
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
|
|
|
export function expectEqualSelectedScripts(
|
|
actual: readonly SelectedScript[],
|
|
expected: readonly SelectedScript[],
|
|
) {
|
|
expectSameScriptIds(actual, expected);
|
|
expectSameRevertStates(actual, expected);
|
|
}
|
|
|
|
function expectSameScriptIds(
|
|
actual: readonly SelectedScript[],
|
|
expected: readonly SelectedScript[],
|
|
) {
|
|
const existingScriptIds = expected.map((script) => script.id).sort();
|
|
const expectedScriptIds = actual.map((script) => script.id).sort();
|
|
expect(existingScriptIds).to.deep.equal(expectedScriptIds, [
|
|
'Unexpected script IDs.',
|
|
`Expected: ${expectedScriptIds.join(', ')}`,
|
|
`Actual: ${existingScriptIds.join(', ')}`,
|
|
].join('\n'));
|
|
}
|
|
|
|
function expectSameRevertStates(
|
|
actual: readonly SelectedScript[],
|
|
expected: readonly SelectedScript[],
|
|
) {
|
|
const scriptsWithDifferentRevertStates = actual
|
|
.filter((script) => {
|
|
const other = expected.find((existing) => existing.id === script.id);
|
|
if (!other) {
|
|
throw new Error(`Script "${script.id}" does not exist in expected scripts: ${JSON.stringify(expected, null, '\t')}`);
|
|
}
|
|
return script.revert !== other.revert;
|
|
});
|
|
expect(scriptsWithDifferentRevertStates).to.have.lengthOf(0, [
|
|
'Scripts with different revert states:',
|
|
scriptsWithDifferentRevertStates
|
|
.map((s) => [
|
|
`Script ID: "${s.id}"`,
|
|
`Actual revert state: "${s.revert}"`,
|
|
`Expected revert state: "${expected.find((existing) => existing.id === s.id)?.revert ?? 'unknown'}"`,
|
|
].map((line) => `\t${line}`).join('\n'))
|
|
.join('\n---\n'),
|
|
].join('\n'));
|
|
}
|