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.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { IApplicationCode } from '@/application/Context/State/Code/IApplicationCode';
|
|
import { IUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
|
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { IScript } from '@/domain/IScript';
|
|
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
|
|
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
|
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
|
|
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
|
import { CategoryCollectionStub } from './CategoryCollectionStub';
|
|
import { UserSelectionStub } from './UserSelectionStub';
|
|
import { UserFilterStub } from './UserFilterStub';
|
|
import { ApplicationCodeStub } from './ApplicationCodeStub';
|
|
import { CategoryStub } from './CategoryStub';
|
|
import { ScriptSelectionStub } from './ScriptSelectionStub';
|
|
|
|
export class CategoryCollectionStateStub implements ICategoryCollectionState {
|
|
public code: IApplicationCode = new ApplicationCodeStub();
|
|
|
|
public filter: IUserFilter = new UserFilterStub();
|
|
|
|
public get os(): OperatingSystem {
|
|
return this.collection.os;
|
|
}
|
|
|
|
public collection: ICategoryCollection = new CategoryCollectionStub().withSomeActions();
|
|
|
|
public selection: UserSelection = new UserSelectionStub();
|
|
|
|
constructor(readonly allScripts: IScript[] = [new ScriptStub('script-id')]) {
|
|
this.selection = new UserSelectionStub()
|
|
.withScripts(new ScriptSelectionStub());
|
|
this.collection = new CategoryCollectionStub()
|
|
.withOs(this.os)
|
|
.withTotalScripts(this.allScripts.length)
|
|
.withAction(new CategoryStub(0).withScripts(...allScripts));
|
|
}
|
|
|
|
public withCollection(collection: ICategoryCollection): this {
|
|
this.collection = collection;
|
|
return this;
|
|
}
|
|
|
|
public withCode(code: IApplicationCode): this {
|
|
this.code = code;
|
|
return this;
|
|
}
|
|
|
|
public withOs(os: OperatingSystem): this {
|
|
if (this.collection instanceof CategoryCollectionStub) {
|
|
this.collection = this.collection.withOs(os);
|
|
} else {
|
|
this.collection = new CategoryCollectionStub().withOs(os);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
public withFilter(filter: IUserFilter): this {
|
|
this.filter = filter;
|
|
return this;
|
|
}
|
|
|
|
public withSelectedScripts(initialScripts: readonly SelectedScript[]): this {
|
|
return this.withSelection(
|
|
new UserSelectionStub().withScripts(
|
|
new ScriptSelectionStub()
|
|
.withSelectedScripts(initialScripts),
|
|
),
|
|
);
|
|
}
|
|
|
|
public withSelection(selection: UserSelection) {
|
|
this.selection = selection;
|
|
return this;
|
|
}
|
|
}
|