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.
52 lines
2.5 KiB
TypeScript
52 lines
2.5 KiB
TypeScript
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
|
import { RecommendationLevel } from '@/domain/RecommendationLevel';
|
|
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
|
|
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
|
|
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
|
|
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
|
|
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
|
|
|
|
export class SelectionStateTestScenario {
|
|
public readonly all: readonly SelectedScript[];
|
|
|
|
public readonly allStandard: readonly SelectedScript[];
|
|
|
|
public readonly someStandard: readonly SelectedScript[];
|
|
|
|
public readonly someStrict: readonly SelectedScript[];
|
|
|
|
public readonly allStrict: readonly SelectedScript[];
|
|
|
|
public readonly someUnrecommended: readonly SelectedScript[];
|
|
|
|
public readonly allUnrecommended: readonly SelectedScript[];
|
|
|
|
constructor() {
|
|
this.someStandard = createSelectedScripts(RecommendationLevel.Standard, 'standard-some-1', 'standard-some-2');
|
|
this.allStandard = [...this.someStandard, ...createSelectedScripts(RecommendationLevel.Standard, 'standard-all-1', 'standard-all-2')];
|
|
this.someStrict = createSelectedScripts(RecommendationLevel.Strict, 'strict-some-1', 'strict-some-2');
|
|
this.allStrict = [...this.someStrict, ...createSelectedScripts(RecommendationLevel.Strict, 'strict-all-1', 'strict-all-2')];
|
|
this.someUnrecommended = createSelectedScripts(undefined, 'unrecommended-some-1', 'unrecommended-some-2');
|
|
this.allUnrecommended = [...this.someUnrecommended, ...createSelectedScripts(undefined, 'unrecommended-all-1', 'unrecommended-all-2')];
|
|
this.all = [...this.allStandard, ...this.allStrict, ...this.allUnrecommended];
|
|
}
|
|
|
|
public generateState(selectedScripts: readonly SelectedScript[] = []) {
|
|
const allScripts = this.all.map((s) => s.script);
|
|
const scriptSelection = new ScriptSelectionStub()
|
|
.withSelectedScripts(selectedScripts);
|
|
const categoryCollectionState = new CategoryCollectionStateStub(allScripts)
|
|
.withSelection(new UserSelectionStub().withScripts(scriptSelection));
|
|
return {
|
|
scriptsStub: scriptSelection,
|
|
stateStub: categoryCollectionState,
|
|
};
|
|
}
|
|
}
|
|
|
|
function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]): SelectedScript[] {
|
|
return ids.map((id) => new SelectedScriptStub(
|
|
new ScriptStub(id).withLevel(level),
|
|
).withRevert(false));
|
|
}
|