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.
105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
|
|
import { IScript } from '@/domain/IScript';
|
|
import { ICategory } from '@/domain/ICategory';
|
|
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
|
import { RecommendationLevel } from '@/domain/RecommendationLevel';
|
|
import { ScriptStub } from './ScriptStub';
|
|
import { ScriptingDefinitionStub } from './ScriptingDefinitionStub';
|
|
import { CategoryStub } from './CategoryStub';
|
|
|
|
export class CategoryCollectionStub implements ICategoryCollection {
|
|
public scripting: IScriptingDefinition = new ScriptingDefinitionStub();
|
|
|
|
public os = OperatingSystem.Linux;
|
|
|
|
public initialScript: IScript = new ScriptStub('55');
|
|
|
|
public totalScripts = 0;
|
|
|
|
public totalCategories = 0;
|
|
|
|
public readonly actions = new Array<ICategory>();
|
|
|
|
public withSomeActions(): this {
|
|
this.withAction(new CategoryStub(1));
|
|
this.withAction(new CategoryStub(2));
|
|
this.withAction(new CategoryStub(3));
|
|
return this;
|
|
}
|
|
|
|
public withAction(category: ICategory): this {
|
|
this.actions.push(category);
|
|
return this;
|
|
}
|
|
|
|
public withActions(...actions: readonly ICategory[]): this {
|
|
for (const action of actions) {
|
|
this.withAction(action);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
public withOs(os: OperatingSystem): this {
|
|
this.os = os;
|
|
return this;
|
|
}
|
|
|
|
public withScripting(scripting: IScriptingDefinition): this {
|
|
this.scripting = scripting;
|
|
return this;
|
|
}
|
|
|
|
public withInitialScript(script: IScript): this {
|
|
this.initialScript = script;
|
|
return this;
|
|
}
|
|
|
|
public withTotalScripts(totalScripts: number): this {
|
|
this.totalScripts = totalScripts;
|
|
return this;
|
|
}
|
|
|
|
public getCategory(categoryId: number): ICategory {
|
|
return this.getAllCategories()
|
|
.find((category) => category.id === categoryId)
|
|
?? new CategoryStub(categoryId);
|
|
}
|
|
|
|
public getScriptsByLevel(level: RecommendationLevel): readonly IScript[] {
|
|
return this.getAllScripts()
|
|
.filter((script) => script.level !== undefined && script.level <= level);
|
|
}
|
|
|
|
public getScript(scriptId: string): IScript {
|
|
return this.getAllScripts()
|
|
.find((script) => scriptId === script.id)
|
|
?? new ScriptStub(scriptId);
|
|
}
|
|
|
|
public getAllScripts(): ReadonlyArray<IScript> {
|
|
return this.actions.flatMap((category) => getScriptsRecursively(category));
|
|
}
|
|
|
|
public getAllCategories(): ReadonlyArray<ICategory> {
|
|
return this.actions.flatMap(
|
|
(category) => [category, ...getSubCategoriesRecursively(category)],
|
|
);
|
|
}
|
|
}
|
|
|
|
function getSubCategoriesRecursively(category: ICategory): ReadonlyArray<ICategory> {
|
|
return (category.subCategories || []).flatMap(
|
|
(subCategory) => [subCategory, ...getSubCategoriesRecursively(subCategory)],
|
|
);
|
|
}
|
|
|
|
function getScriptsRecursively(category: ICategory): ReadonlyArray<IScript> {
|
|
return [
|
|
...(category.scripts || []),
|
|
...(category.subCategories || []).flatMap(
|
|
(subCategory) => getScriptsRecursively(subCategory),
|
|
),
|
|
];
|
|
}
|