Fix code highlighting and optimize category select
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.
This commit is contained in:
33
tests/unit/shared/Stubs/BatchedDebounceStub.ts
Normal file
33
tests/unit/shared/Stubs/BatchedDebounceStub.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { batchedDebounce } from '@/application/Common/Timing/BatchedDebounce';
|
||||
|
||||
export class BatchedDebounceStub<T> {
|
||||
public readonly callHistory = new Array<Parameters<typeof batchedDebounce>>();
|
||||
|
||||
public readonly collectedArgs = new Array<T>();
|
||||
|
||||
private executeImmediately = false;
|
||||
|
||||
public func = (
|
||||
callback: (batches: readonly T[]) => void,
|
||||
waitInMs: number,
|
||||
): (arg: T) => void => {
|
||||
this.callHistory.push([callback, waitInMs]);
|
||||
return (arg: T) => {
|
||||
this.collectedArgs.push(arg);
|
||||
if (this.executeImmediately) {
|
||||
callback([arg]);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
public withImmediateDebouncing(executeImmediately: boolean): this {
|
||||
this.executeImmediately = executeImmediately;
|
||||
return this;
|
||||
}
|
||||
|
||||
public execute() {
|
||||
this.callHistory
|
||||
.map((call) => call[0])
|
||||
.forEach((callback) => callback(this.collectedArgs));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user