44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix code highlighting and optimize category select

Browse Source 
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:
undergroundwires
2023-11-18 22:23:27 +01:00
parent 4531645b4c
commit cb42f11b97
79 changed files with 2733 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
tests/unit/presentation/components/Shared/Hooks/UseUserSelectionState.spec.ts
View File

@@ -1,19 +1,20 @@
import { describe, it, expect } from 'vitest';
import { nextTick, watch } from 'vue';
import { SelectionModifier, useUserSelectionState } from '@/presentation/components/Shared/Hooks/UseUserSelectionState';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
import { UseAutoUnsubscribedEventsStub } from '@tests/unit/shared/Stubs/UseAutoUnsubscribedEventsStub';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
describe('useUserSelectionState', () => {
describe('currentSelection', () => {
it('initializes with correct selection', () => {
// arrange
const expectedSelection = new UserSelectionStub([new ScriptStub('initialSelectedScript')]);
const expectedSelection = new UserSelectionStub();
const collectionStateStub = new UseCollectionStateStub()
.withState(new CategoryCollectionStateStub().withSelection(expectedSelection));
// act
@@ -27,8 +28,8 @@ describe('useUserSelectionState', () => {
describe('once collection state is changed', () => {
it('updated', () => {
// arrange
const initialSelection = new UserSelectionStub([new ScriptStub('initialSelectedScript')]);
const changedSelection = new UserSelectionStub([new ScriptStub('changedSelectedScript')]);
const initialSelection = new UserSelectionStub();
const changedSelection = new UserSelectionStub();
const collectionStateStub = new UseCollectionStateStub()
.withState(new CategoryCollectionStateStub().withSelection(initialSelection));
const { returnObject } = runHook({
@@ -45,8 +46,9 @@ describe('useUserSelectionState', () => {
});
it('not updated when old state changes', async () => {
// arrange
const oldSelectionState = new UserSelectionStub([new ScriptStub('inOldState')]);
const newSelectionState = new UserSelectionStub([new ScriptStub('inNewState')]);
const oldScriptSelection = new ScriptSelectionStub();
const oldSelectionState = new UserSelectionStub().withScripts(oldScriptSelection);
const newSelectionState = new UserSelectionStub();
const collectionStateStub = new UseCollectionStateStub()
.withState(new CategoryCollectionStateStub().withSelection(oldSelectionState));
const { returnObject } = runHook({
@@ -61,7 +63,9 @@ describe('useUserSelectionState', () => {
totalUpdates++;
});
// act
oldSelectionState.triggerSelectionChangedEvent([new SelectedScriptStub('newInOldState')]);
oldScriptSelection.triggerSelectionChangedEvent([
new SelectedScriptStub(new ScriptStub('newInOldState')),
]);
await nextTick();
// assert
expect(totalUpdates).to.equal(0);
@@ -69,8 +73,8 @@ describe('useUserSelectionState', () => {
describe('triggers change', () => {
it('with new selection reference', async () => {
// arrange
const oldSelection = new UserSelectionStub([]);
const newSelection = new UserSelectionStub([]);
const oldSelection = new UserSelectionStub();
const newSelection = new UserSelectionStub();
const initialCollectionState = new CategoryCollectionStateStub()
.withSelection(oldSelection);
const changedCollectionState = new CategoryCollectionStateStub()
@@ -93,7 +97,7 @@ describe('useUserSelectionState', () => {
});
it('with the same selection reference', async () => {
// arrange
const userSelection = new UserSelectionStub([new ScriptStub('sameScriptInSameReference')]);
const userSelection = new UserSelectionStub();
const initialCollectionState = new CategoryCollectionStateStub()
.withSelection(userSelection);
const changedCollectionState = new CategoryCollectionStateStub()
@@ -119,26 +123,38 @@ describe('useUserSelectionState', () => {
describe('once selection state is changed', () => {
it('updated with same collection state', async () => {
// arrange
const initialScripts = [new ScriptStub('initialSelectedScript')];
const changedScripts = [new SelectedScriptStub('changedSelectedScript')];
const selectionState = new UserSelectionStub(initialScripts);
const collectionState = new CategoryCollectionStateStub().withSelection(selectionState);
const initialScripts = [
new SelectedScriptStub(new ScriptStub('initialSelectedScript')),
];
const changedScripts = [
new SelectedScriptStub(new ScriptStub('changedSelectedScript')),
];
const scriptSelectionStub = new ScriptSelectionStub()
.withSelectedScripts(initialScripts);
const expectedSelectionState = new UserSelectionStub().withScripts(scriptSelectionStub);
const collectionState = new CategoryCollectionStateStub()
.withSelection(expectedSelectionState);
const collectionStateStub = new UseCollectionStateStub().withState(collectionState);
const { returnObject } = runHook({
useCollectionState: collectionStateStub,
});
// act
selectionState.triggerSelectionChangedEvent(changedScripts);
scriptSelectionStub.triggerSelectionChangedEvent(changedScripts);
await nextTick();
// assert
const actualSelection = returnObject.currentSelection.value;
expect(actualSelection).to.equal(selectionState);
expect(actualSelection).to.equal(expectedSelectionState);
});
it('updated once collection state is changed', async () => {
// arrange
const changedScripts = [new SelectedScriptStub('changedSelectedScript')];
const newSelectionState = new UserSelectionStub([new ScriptStub('initialSelectedScriptInNewCollection')]);
const initialCollectionState = new CategoryCollectionStateStub().withSelectedScripts([new SelectedScriptStub('initialSelectedScriptInInitialCollection')]);
const changedScripts = [
new SelectedScriptStub(new ScriptStub('changedSelectedScript')),
];
const scriptSelectionStub = new ScriptSelectionStub();
const newSelectionState = new UserSelectionStub().withScripts(scriptSelectionStub);
const initialCollectionState = new CategoryCollectionStateStub().withSelectedScripts([
new SelectedScriptStub(new ScriptStub('initialSelectedScriptInInitialCollection')),
]);
const collectionStateStub = new UseCollectionStateStub().withState(initialCollectionState);
const { returnObject } = runHook({ useCollectionState: collectionStateStub });
// act
@@ -146,7 +162,7 @@ describe('useUserSelectionState', () => {
newState: new CategoryCollectionStateStub().withSelection(newSelectionState),
immediateOnly: false,
});
newSelectionState.triggerSelectionChangedEvent(changedScripts);
scriptSelectionStub.triggerSelectionChangedEvent(changedScripts);
// assert
const actualSelection = returnObject.currentSelection.value;
expect(actualSelection).to.equal(newSelectionState);
@@ -156,17 +172,19 @@ describe('useUserSelectionState', () => {
// arrange
const oldSelectedScriptsArrayReference = [];
const newSelectedScriptsArrayReference = [];
const userSelection = new UserSelectionStub(oldSelectedScriptsArrayReference)
const scriptSelectionStub = new ScriptSelectionStub()
.withSelectedScripts(oldSelectedScriptsArrayReference);
const collectionStateStub = new UseCollectionStateStub()
.withState(new CategoryCollectionStateStub().withSelection(userSelection));
.withState(new CategoryCollectionStateStub().withSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
));
const { returnObject } = runHook({ useCollectionState: collectionStateStub });
let isChangeTriggered = false;
watch(returnObject.currentSelection, () => {
isChangeTriggered = true;
});
// act
userSelection.triggerSelectionChangedEvent(newSelectedScriptsArrayReference);
scriptSelectionStub.triggerSelectionChangedEvent(newSelectedScriptsArrayReference);
await nextTick();
// assert
expect(isChangeTriggered).to.equal(true);
@@ -174,17 +192,19 @@ describe('useUserSelectionState', () => {
it('with same selected scripts array reference', async () => {
// arrange
const sharedSelectedScriptsReference = [];
const userSelection = new UserSelectionStub([])
const scriptSelectionStub = new ScriptSelectionStub()
.withSelectedScripts(sharedSelectedScriptsReference);
const collectionStateStub = new UseCollectionStateStub()
.withState(new CategoryCollectionStateStub().withSelection(userSelection));
.withState(new CategoryCollectionStateStub().withSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
));
const { returnObject } = runHook({ useCollectionState: collectionStateStub });
let isChangeTriggered = false;
watch(returnObject.currentSelection, () => {
isChangeTriggered = true;
});
// act
userSelection.triggerSelectionChangedEvent(sharedSelectedScriptsReference);
scriptSelectionStub.triggerSelectionChangedEvent(sharedSelectedScriptsReference);
await nextTick();
// assert
expect(isChangeTriggered).to.equal(true);
@@ -197,7 +217,7 @@ describe('useUserSelectionState', () => {
// arrange
const { returnObject, collectionStateStub } = runHook();
const expectedSelection = collectionStateStub.state.selection;
let mutatedSelection: IUserSelection | undefined;
let mutatedSelection: UserSelection | undefined;
const mutator: SelectionModifier = (selection) => {
mutatedSelection = selection;
};
@@ -210,10 +230,10 @@ describe('useUserSelectionState', () => {
it('new state is modified once collection state is changed', async () => {
// arrange
const { returnObject, collectionStateStub } = runHook();
const expectedSelection = new UserSelectionStub([]);
const expectedSelection = new UserSelectionStub();
const newCollectionState = new CategoryCollectionStateStub()
.withSelection(expectedSelection);
let mutatedSelection: IUserSelection | undefined;
let mutatedSelection: UserSelection | undefined;
const mutator: SelectionModifier = (selection) => {
mutatedSelection = selection;
};
@@ -231,12 +251,12 @@ describe('useUserSelectionState', () => {
it('old state is not modified once collection state is changed', async () => {
// arrange
const oldState = new CategoryCollectionStateStub().withSelectedScripts([
new SelectedScriptStub('scriptFromOldState'),
new SelectedScriptStub(new ScriptStub('scriptFromOldState')),
]);
const collectionStateStub = new UseCollectionStateStub()
.withState(oldState);
const { returnObject } = runHook({ useCollectionState: collectionStateStub });
const expectedSelection = new UserSelectionStub([]);
const expectedSelection = new UserSelectionStub();
const newCollectionState = new CategoryCollectionStateStub()
.withSelection(expectedSelection);
let totalMutations = 0;

148
tests/unit/presentation/components/Shared/Throttle.spec.ts
View File

@@ -1,148 +0,0 @@
import { describe, it, expect } from 'vitest';
import { throttle, ITimer, Timeout } from '@/presentation/components/Shared/Throttle';
import { EventSource } from '@/infrastructure/Events/EventSource';
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
import { createMockTimeout } from '@tests/unit/shared/Stubs/TimeoutStub';
describe('throttle', () => {
describe('validates parameters', () => {
describe('throws if waitInMs is invalid', () => {
// arrange
const testCases = [
{
name: 'given zero',
value: 0,
expectedError: 'missing delay',
},
{
name: 'given negative',
value: -2,
expectedError: 'negative delay',
},
];
const noopCallback = () => { /* do nothing */ };
for (const testCase of testCases) {
it(`"${testCase.name}" throws "${testCase.expectedError}"`, () => {
// act
const waitInMs = testCase.value;
const act = () => throttle(noopCallback, waitInMs);
// assert
expect(act).to.throw(testCase.expectedError);
});
}
});
});
it('should call the callback immediately', () => {
// arrange
const timer = new TimerMock();
let totalRuns = 0;
const callback = () => totalRuns++;
const throttleFunc = throttle(callback, 500, timer);
// act
throttleFunc();
// assert
expect(totalRuns).to.equal(1);
});
it('should call the callback again after the timeout', () => {
// arrange
const timer = new TimerMock();
let totalRuns = 0;
const callback = () => totalRuns++;
const waitInMs = 500;
const throttleFunc = throttle(callback, waitInMs, timer);
// act
throttleFunc();
totalRuns--; // So we don't count the initial run
throttleFunc();
timer.tickNext(waitInMs);
// assert
expect(totalRuns).to.equal(1);
});
it('should call the callback at most once at given time', () => {
// arrange
const timer = new TimerMock();
let totalRuns = 0;
const callback = () => totalRuns++;
const waitInMs = 500;
const totalCalls = 10;
const throttleFunc = throttle(callback, waitInMs, timer);
// act
for (let currentCall = 0; currentCall < totalCalls; currentCall++) {
const currentTime = (waitInMs / totalCalls) * currentCall;
timer.setCurrentTime(currentTime);
throttleFunc();
}
// assert
expect(totalRuns).to.equal(2); // one initial and one at the end
});
it('should call the callback as long as delay is waited', () => {
// arrange
const timer = new TimerMock();
let totalRuns = 0;
const callback = () => totalRuns++;
const waitInMs = 500;
const expectedTotalRuns = 10;
const throttleFunc = throttle(callback, waitInMs, timer);
// act
for (let i = 0; i < expectedTotalRuns; i++) {
throttleFunc();
timer.tickNext(waitInMs);
}
// assert
expect(totalRuns).to.equal(expectedTotalRuns);
});
it('should call arguments as expected', () => {
// arrange
const timer = new TimerMock();
const expected = [1, 2, 3];
const actual = new Array<number>();
const callback = (arg: number) => { actual.push(arg); };
const waitInMs = 500;
const throttleFunc = throttle(callback, waitInMs, timer);
// act
for (const arg of expected) {
throttleFunc(arg);
timer.tickNext(waitInMs);
}
// assert
expect(expected).to.deep.equal(actual);
});
});
class TimerMock implements ITimer {
private timeChanged = new EventSource<number>();
private subscriptions = new Array<IEventSubscription>();
private currentTime = 0;
public setTimeout(callback: () => void, ms: number): Timeout {
const runTime = this.currentTime + ms;
const subscription = this.timeChanged.on((time) => {
if (time >= runTime) {
callback();
subscription.unsubscribe();
}
});
this.subscriptions.push(subscription);
const id = this.subscriptions.length - 1;
return createMockTimeout(id);
}
public clearTimeout(timeoutId: Timeout): void {
this.subscriptions[+timeoutId].unsubscribe();
}
public dateNow(): number {
return this.currentTime;
}
public tickNext(ms: number): void {
this.setCurrentTime(this.currentTime + ms);
}
public setCurrentTime(ms: number): void {
this.currentTime = ms;
this.timeChanged.notify(this.currentTime);
}
}