Files
privacy.sexy/tests/unit/application/Common/Timing/BatchedDebounce.spec.ts
undergroundwires cb42f11b97 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.
2023-11-18 22:23:27 +01:00

145 lines
4.8 KiB
TypeScript

import { describe, it, expect } from 'vitest';
import { batchedDebounce } from '@/application/Common/Timing/BatchedDebounce';
import { TimerStub } from '@tests/unit/shared/Stubs/TimerStub';
describe('batchedDebounce', () => {
describe('immediate invocation', () => {
it('does not call the the callback immediately on the first call', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const callArg = 'first';
const debounceFunc = batchedDebounce(callback, 100, new TimerStub());
// act
debounceFunc(callArg);
// assert
expect(calledBatches).to.have.lengthOf(0);
});
});
describe('debounce timing', () => {
it('executes the callback after the debounce period', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const expectedArg = 'first';
const debouncePeriodInMs = 100;
const timer = new TimerStub();
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc(expectedArg);
timer.tickNext(debouncePeriodInMs);
// assert
expect(calledBatches).to.have.lengthOf(1);
expect(calledBatches).to.deep.include([expectedArg]);
});
it('prevents callback invocation within the debounce period', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const debouncePeriodInMs = 100;
const timer = new TimerStub();
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc('first');
timer.tickNext(debouncePeriodInMs / 4);
debounceFunc('second');
timer.tickNext(debouncePeriodInMs / 4);
debounceFunc('third');
timer.tickNext(debouncePeriodInMs / 4);
// assert
expect(calledBatches).to.have.lengthOf(0);
});
it('resets debounce timer on subsequent calls', () => {
// arrange
const timer = new TimerStub();
const { calledBatches, callback } = createObservableCallback();
const debouncePeriodInMs = 100;
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc('first');
timer.tickNext(debouncePeriodInMs * 0.9);
debounceFunc('second');
timer.tickNext(debouncePeriodInMs * 0.9);
debounceFunc('third');
timer.tickNext(debouncePeriodInMs * 0.9);
// assert
expect(calledBatches).to.have.lengthOf(0);
});
it('does not call the callback again if no new calls are made after the debounce period', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const debouncePeriodInMs = 100;
const timer = new TimerStub();
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc('first');
timer.tickNext(debouncePeriodInMs);
timer.tickNext(debouncePeriodInMs);
timer.tickNext(debouncePeriodInMs);
timer.tickNext(debouncePeriodInMs);
// assert
expect(calledBatches).to.have.lengthOf(1);
});
});
describe('batching calls', () => {
it('batches multiple calls within the debounce period', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const firstCallArg = 'first';
const secondCallArg = 'second';
const debouncePeriodInMs = 100;
const timer = new TimerStub();
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc(firstCallArg);
debounceFunc(secondCallArg);
timer.tickNext(debouncePeriodInMs);
// assert
expect(calledBatches).to.have.lengthOf(1);
expect(calledBatches).to.deep.include([firstCallArg, secondCallArg]);
});
it('handles multiple separate batches correctly', () => {
// arrange
const { calledBatches, callback } = createObservableCallback();
const debouncePeriodInMs = 100;
const firstBatchArg = 'first';
const secondBatchArg = 'second';
const timer = new TimerStub();
const debounceFunc = batchedDebounce(callback, debouncePeriodInMs, timer);
// act
debounceFunc(firstBatchArg);
timer.tickNext(debouncePeriodInMs);
debounceFunc(secondBatchArg);
timer.tickNext(debouncePeriodInMs);
// assert
expect(calledBatches).to.have.lengthOf(2);
expect(calledBatches[0]).to.deep.equal([firstBatchArg]);
expect(calledBatches[1]).to.deep.equal([secondBatchArg]);
});
});
});
function createObservableCallback() {
const calledBatches = new Array<readonly string[]>();
const callback = (batches: readonly string[]): void => {
calledBatches.push(batches);
};
return {
calledBatches,
callback,
};
}