Files
privacy.sexy/tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.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

180 lines
7.2 KiB
TypeScript

import { describe, it, expect } from 'vitest';
import { useCollectionSelectionStateUpdater } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater';
import { HierarchyAccessStub } from '@tests/unit/shared/Stubs/HierarchyAccessStub';
import { TreeNodeStateAccessStub } from '@tests/unit/shared/Stubs/TreeNodeStateAccessStub';
import { TreeNodeStub } from '@tests/unit/shared/Stubs/TreeNodeStub';
import { TreeNodeCheckState } from '@/presentation/components/Scripts/View/Tree/TreeView/Node/State/CheckState';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { TreeNodeStateChangedEmittedEventStub } from '@tests/unit/shared/Stubs/TreeNodeStateChangedEmittedEventStub';
import { UseUserSelectionStateStub } from '@tests/unit/shared/Stubs/UseUserSelectionStateStub';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
describe('useCollectionSelectionStateUpdater', () => {
describe('updateNodeSelection', () => {
describe('when node is a branch node', () => {
it('does nothing', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({
isBranch: true,
currentState: TreeNodeCheckState.Checked,
}),
)
.withCheckStateChange({
oldState: TreeNodeCheckState.Checked,
newState: TreeNodeCheckState.Unchecked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(false);
});
});
describe('when old and new check states are the same', () => {
it('does nothing', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Checked,
}),
)
.withCheckStateChange({
oldState: TreeNodeCheckState.Checked,
newState: TreeNodeCheckState.Checked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(false);
});
});
describe('when checkState is checked', () => {
it('adds to selection if not already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const isScriptInitiallySelected = false;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const node = createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Checked,
});
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(node)
.withCheckStateChange({
oldState: TreeNodeCheckState.Unchecked,
newState: TreeNodeCheckState.Checked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
expect(scriptSelectionStub.isScriptSelected(node.id, false)).to.equal(true);
});
it('does nothing if already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const isScriptInitiallySelected = true;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Checked,
}),
)
.withCheckStateChange({
oldState: TreeNodeCheckState.Unchecked,
newState: TreeNodeCheckState.Checked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(false);
});
});
describe('when checkState is unchecked', () => {
it('removes from selection if already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const isScriptInitiallySelected = true;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const node = createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Unchecked,
});
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(node)
.withCheckStateChange({
oldState: TreeNodeCheckState.Checked,
newState: TreeNodeCheckState.Unchecked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
expect(scriptSelectionStub.isScriptDeselected(node.id)).to.equal(true);
});
it('does nothing if not already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const isScriptInitiallySelected = false;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Unchecked,
}),
)
.withCheckStateChange({
oldState: TreeNodeCheckState.Checked,
newState: TreeNodeCheckState.Unchecked,
});
// act
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(false);
});
});
});
});
function runHook() {
const useSelectionStateStub = new UseUserSelectionStateStub();
const returnObject = useCollectionSelectionStateUpdater(useSelectionStateStub.get());
return {
returnObject,
useSelectionStateStub,
};
}
function createTreeNodeStub(scenario: {
readonly isBranch: boolean,
readonly currentState: TreeNodeCheckState,
}) {
return new TreeNodeStub()
.withHierarchy(new HierarchyAccessStub().withIsBranchNode(scenario.isBranch))
.withState(new TreeNodeStateAccessStub().withCurrentCheckState(scenario.currentState));
}