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.
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { BaseEntity } from '@/infrastructure/Entity/BaseEntity';
|
|
import { ICategory, IScript } from '@/domain/ICategory';
|
|
import { RecommendationLevel } from '@/domain/RecommendationLevel';
|
|
import { ScriptStub } from './ScriptStub';
|
|
|
|
export class CategoryStub extends BaseEntity<number> implements ICategory {
|
|
public name = `category-with-id-${this.id}`;
|
|
|
|
public readonly subCategories = new Array<ICategory>();
|
|
|
|
public readonly scripts = new Array<IScript>();
|
|
|
|
public readonly docs = new Array<string>();
|
|
|
|
private allScriptsRecursively: (readonly IScript[]) | undefined;
|
|
|
|
public constructor(id: number) {
|
|
super(id);
|
|
}
|
|
|
|
public includes(script: IScript): boolean {
|
|
return this.getAllScriptsRecursively().some((s) => s.id === script.id);
|
|
}
|
|
|
|
public getAllScriptsRecursively(): readonly IScript[] {
|
|
if (this.allScriptsRecursively === undefined) {
|
|
return [
|
|
...this.scripts,
|
|
...this.subCategories.flatMap((c) => c.getAllScriptsRecursively()),
|
|
];
|
|
}
|
|
return this.allScriptsRecursively;
|
|
}
|
|
|
|
public withScriptIds(...scriptIds: readonly string[]): this {
|
|
return this.withScripts(
|
|
...scriptIds.map((id) => new ScriptStub(id)),
|
|
);
|
|
}
|
|
|
|
public withScripts(...scripts: IScript[]): this {
|
|
for (const script of scripts) {
|
|
this.withScript(script);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
public withAllScriptIdsRecursively(...scriptIds: readonly string[]): this {
|
|
return this.withAllScriptsRecursively(...scriptIds.map((id) => new ScriptStub(id)));
|
|
}
|
|
|
|
public withAllScriptsRecursively(...scripts: IScript[]): this {
|
|
this.allScriptsRecursively = [...scripts];
|
|
return this;
|
|
}
|
|
|
|
public withMandatoryScripts(): this {
|
|
return this
|
|
.withScript(new ScriptStub(`[${CategoryStub.name}] script-1`).withLevel(RecommendationLevel.Standard))
|
|
.withScript(new ScriptStub(`[${CategoryStub.name}] script-2`).withLevel(RecommendationLevel.Strict))
|
|
.withScript(new ScriptStub(`[${CategoryStub.name}] script-3`).withLevel(undefined));
|
|
}
|
|
|
|
public withCategories(...categories: ICategory[]): this {
|
|
for (const category of categories) {
|
|
this.withCategory(category);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
public withCategory(category: ICategory): this {
|
|
this.subCategories.push(category);
|
|
return this;
|
|
}
|
|
|
|
public withScript(script: IScript): this {
|
|
this.scripts.push(script);
|
|
return this;
|
|
}
|
|
|
|
public withName(categoryName: string): this {
|
|
this.name = categoryName;
|
|
return this;
|
|
}
|
|
}
|