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:
78
tests/unit/application/Common/Timing/PlatformTimer.spec.ts
Normal file
78
tests/unit/application/Common/Timing/PlatformTimer.spec.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
describe, it, expect, beforeEach,
|
||||
afterEach,
|
||||
} from 'vitest';
|
||||
import { PlatformTimer } from '@/application/Common/Timing/PlatformTimer';
|
||||
|
||||
describe('PlatformTimer', () => {
|
||||
let originalSetTimeout: typeof global.setTimeout;
|
||||
let originalClearTimeout: typeof global.clearTimeout;
|
||||
let originalDateNow: typeof global.Date.now;
|
||||
|
||||
beforeEach(() => {
|
||||
originalSetTimeout = global.setTimeout;
|
||||
originalClearTimeout = global.clearTimeout;
|
||||
originalDateNow = Date.now;
|
||||
Date.now = () => originalDateNow();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
global.setTimeout = originalSetTimeout;
|
||||
global.clearTimeout = originalClearTimeout;
|
||||
Date.now = originalDateNow;
|
||||
});
|
||||
|
||||
describe('setTimeout', () => {
|
||||
it('calls the global setTimeout with the provided delay', () => {
|
||||
// arrange
|
||||
const expectedDelay = 55;
|
||||
let actualDelay: number | undefined;
|
||||
global.setTimeout = ((_, delay) => {
|
||||
actualDelay = delay;
|
||||
}) as typeof global.setTimeout;
|
||||
// act
|
||||
PlatformTimer.setTimeout(() => { /* NOOP */ }, expectedDelay);
|
||||
// assert
|
||||
expect(actualDelay).to.equal(expectedDelay);
|
||||
});
|
||||
it('calls the global setTimeout with the provided callback', () => {
|
||||
// arrange
|
||||
const expectedCallback = () => { /* NOOP */ };
|
||||
let actualCallback: typeof expectedCallback | undefined;
|
||||
global.setTimeout = ((callback) => {
|
||||
actualCallback = callback;
|
||||
}) as typeof global.setTimeout;
|
||||
// act
|
||||
PlatformTimer.setTimeout(expectedCallback, 33);
|
||||
// assert
|
||||
expect(actualCallback).to.equal(expectedCallback);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clearTimeout', () => {
|
||||
it('should clear timeout', () => {
|
||||
// arrange
|
||||
let actualTimer: ReturnType<typeof PlatformTimer.setTimeout> | undefined;
|
||||
global.clearTimeout = ((timer) => {
|
||||
actualTimer = timer;
|
||||
}) as typeof global.clearTimeout;
|
||||
const expectedTimer = PlatformTimer.setTimeout(() => { /* NOOP */ }, 1);
|
||||
// act
|
||||
PlatformTimer.clearTimeout(expectedTimer);
|
||||
// assert
|
||||
expect(actualTimer).to.equal(expectedTimer);
|
||||
});
|
||||
});
|
||||
|
||||
describe('dateNow', () => {
|
||||
it('should get current date', () => {
|
||||
// arrange
|
||||
const expected = Date.now();
|
||||
Date.now = () => expected;
|
||||
// act
|
||||
const actual = PlatformTimer.dateNow();
|
||||
// assert
|
||||
expect(expected).to.equal(actual);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user