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.
180 lines
7.2 KiB
TypeScript
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));
|
|
}
|