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.
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
|
|
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
|
import { IScript } from '@/domain/IScript';
|
|
import { ScriptSelectionChangeCommand } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
|
|
import { StubWithObservableMethodCalls } from './StubWithObservableMethodCalls';
|
|
import { EventSourceStub } from './EventSourceStub';
|
|
import { SelectedScriptStub } from './SelectedScriptStub';
|
|
|
|
export class ScriptSelectionStub
|
|
extends StubWithObservableMethodCalls<ScriptSelection>
|
|
implements ScriptSelection {
|
|
public readonly changed = new EventSourceStub<readonly SelectedScript[]>();
|
|
|
|
public selectedScripts: readonly SelectedScript[] = [];
|
|
|
|
public isSelectedResult: boolean | undefined;
|
|
|
|
public withSelectedScripts(selectedScripts: readonly SelectedScript[]): this {
|
|
this.selectedScripts = selectedScripts;
|
|
return this;
|
|
}
|
|
|
|
public triggerSelectionChangedEvent(scripts: readonly SelectedScript[]): this {
|
|
this.changed.notify(scripts);
|
|
return this;
|
|
}
|
|
|
|
public withIsSelectedResult(isSelected: boolean): this {
|
|
this.isSelectedResult = isSelected;
|
|
return this;
|
|
}
|
|
|
|
public isScriptSelected(scriptId: string, revert: boolean): boolean {
|
|
const call = this.callHistory.find(
|
|
(c) => c.methodName === 'processChanges'
|
|
&& c.args[0].changes.some((change) => (
|
|
change.newStatus.isSelected === true
|
|
&& change.newStatus.isReverted === revert
|
|
&& change.scriptId === scriptId)),
|
|
);
|
|
return call !== undefined;
|
|
}
|
|
|
|
public isScriptDeselected(scriptId: string): boolean {
|
|
const call = this.callHistory.find(
|
|
(c) => c.methodName === 'processChanges'
|
|
&& c.args[0].changes.some((change) => (
|
|
change.newStatus.isSelected === false
|
|
&& change.scriptId === scriptId)),
|
|
);
|
|
return call !== undefined;
|
|
}
|
|
|
|
public processChanges(action: ScriptSelectionChangeCommand): void {
|
|
this.registerMethodCall({
|
|
methodName: 'processChanges',
|
|
args: [action],
|
|
});
|
|
}
|
|
|
|
public selectOnly(scripts: ReadonlyArray<IScript>): void {
|
|
this.registerMethodCall({
|
|
methodName: 'selectOnly',
|
|
args: [scripts],
|
|
});
|
|
this.selectedScripts = scripts.map((s) => new SelectedScriptStub(s));
|
|
}
|
|
|
|
public selectAll(): void {
|
|
this.registerMethodCall({
|
|
methodName: 'selectAll',
|
|
args: [],
|
|
});
|
|
}
|
|
|
|
public deselectAll(): void {
|
|
this.registerMethodCall({
|
|
methodName: 'deselectAll',
|
|
args: [],
|
|
});
|
|
}
|
|
|
|
public isSelected(): boolean {
|
|
if (this.isSelectedResult === undefined) {
|
|
throw new Error('Method not configured.');
|
|
}
|
|
return this.isSelectedResult;
|
|
}
|
|
}
|