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

121
tests/unit/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.spec.ts
View File

@@ -1,106 +1,101 @@
import { describe, it, expect } from 'vitest';
import { CategoryReverter } from '@/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { getCategoryNodeId } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/CategoryNodeMetadataConverter';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { CategorySelectionStub } from '@tests/unit/shared/Stubs/CategorySelectionStub';
describe('CategoryReverter', () => {
describe('getState', () => {
// arrange
const scripts = [
new ScriptStub('revertable').withRevertCode('REM revert me'),
new ScriptStub('revertable2').withRevertCode('REM revert me 2'),
new ScriptStub('reversible').withRevertCode('REM revert me'),
new ScriptStub('reversible2').withRevertCode('REM revert me 2'),
];
const category = new CategoryStub(1).withScripts(...scripts);
const nodeId = getCategoryNodeId(category);
const collection = new CategoryCollectionStub().withAction(category);
const sut = new CategoryReverter(nodeId, collection);
const testCases = [
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly selectedScripts: readonly SelectedScript[];
readonly expectedState: boolean;
}> = [
{
name: 'false when subscripts are not reverted',
state: scripts.map((script) => new SelectedScript(script, false)),
expected: false,
description: 'returns `false` for non-reverted subscripts',
selectedScripts: scripts.map(
(script) => new SelectedScriptStub(script).withRevert(false),
),
expectedState: false,
},
{
name: 'false when some subscripts are reverted',
state: [new SelectedScript(scripts[0], false), new SelectedScript(scripts[0], true)],
expected: false,
description: 'returns `false` when only some subscripts are reverted',
selectedScripts: [
new SelectedScriptStub(scripts[0]).withRevert(false),
new SelectedScriptStub(scripts[0]).withRevert(true),
],
expectedState: false,
},
{
name: 'false when subscripts are not reverted',
state: scripts.map((script) => new SelectedScript(script, true)),
expected: true,
description: 'returns `true` when all subscripts are reverted',
selectedScripts: scripts.map(
(script) => new SelectedScriptStub(script).withRevert(true),
),
expectedState: true,
},
];
for (const testCase of testCases) {
it(testCase.name, () => {
testScenarios.forEach((
{ description, selectedScripts, expectedState },
) => {
it(description, () => {
// act
const actual = sut.getState(testCase.state);
const actual = sut.getState(selectedScripts);
// assert
expect(actual).to.equal(testCase.expected);
expect(actual).to.equal(expectedState);
});
}
});
});
describe('selectWithRevertState', () => {
// arrange
const scripts = [
new ScriptStub('revertable').withRevertCode('REM revert me'),
new ScriptStub('revertable2').withRevertCode('REM revert me 2'),
const allScripts = [
new ScriptStub('reversible').withRevertCode('REM revert me'),
new ScriptStub('reversible2').withRevertCode('REM revert me 2'),
];
const category = new CategoryStub(1).withScripts(...scripts);
const category = new CategoryStub(1).withScripts(...allScripts);
const collection = new CategoryCollectionStub().withAction(category);
/* eslint-disable object-property-newline */
const testCases = [
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly expectedRevert: boolean;
}> = [
{
name: 'selects with revert state when not selected',
selection: [],
revert: true, expectRevert: true,
description: 'selects with revert',
expectedRevert: true,
},
{
name: 'selects with non-revert state when not selected',
selection: [],
revert: false, expectRevert: false,
},
{
name: 'switches when already selected with revert state',
selection: scripts.map((script) => new SelectedScript(script, true)),
revert: false, expectRevert: false,
},
{
name: 'switches when already selected with not revert state',
selection: scripts.map((script) => new SelectedScript(script, false)),
revert: true, expectRevert: true,
},
{
name: 'keeps revert state when already selected with revert state',
selection: scripts.map((script) => new SelectedScript(script, true)),
revert: true, expectRevert: true,
},
{
name: 'keeps revert state deselected when already selected wtih non revert state',
selection: scripts.map((script) => new SelectedScript(script, false)),
revert: false, expectRevert: false,
description: 'selects without revert',
expectedRevert: false,
},
];
/* eslint-enable object-property-newline */
const nodeId = getCategoryNodeId(category);
for (const testCase of testCases) {
it(testCase.name, () => {
const selection = new UserSelection(collection, testCase.selection);
testScenarios.forEach((
{ description, expectedRevert },
) => {
it(description, () => {
const categorySelection = new CategorySelectionStub();
const sut = new CategoryReverter(nodeId, collection);
const revertState = expectedRevert;
// act
sut.selectWithRevertState(testCase.revert, selection);
sut.selectWithRevertState(
revertState,
new UserSelectionStub().withCategories(categorySelection),
);
// assert
expect(sut.getState(selection.selectedScripts)).to.equal(testCase.expectRevert);
expect(selection.selectedScripts).has.lengthOf(2);
expect(selection.selectedScripts[0].id).equal(scripts[0].id);
expect(selection.selectedScripts[1].id).equal(scripts[1].id);
expect(selection.selectedScripts[0].revert).equal(testCase.expectRevert);
expect(selection.selectedScripts[1].revert).equal(testCase.expectRevert);
expect(categorySelection.isCategorySelected(category.id, expectedRevert)).to.equal(true);
});
}
});
});
});

142
tests/unit/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter.spec.ts
View File

@@ -1,90 +1,118 @@
import { describe, it, expect } from 'vitest';
import { ScriptReverter } from '@/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
import { getScriptNodeId } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/CategoryNodeMetadataConverter';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
describe('ScriptReverter', () => {
describe('getState', () => {
it('false when script is not selected', () => {
// arrange
const script = new ScriptStub('id');
const nodeId = getScriptNodeId(script);
const sut = new ScriptReverter(nodeId);
// act
const actual = sut.getState([]);
// assert
expect(actual).to.equal(false);
});
it('false when script is selected but not reverted', () => {
// arrange
const scripts = [new SelectedScriptStub('id'), new SelectedScriptStub('dummy')];
const nodeId = getScriptNodeId(scripts[0].script);
const sut = new ScriptReverter(nodeId);
// act
const actual = sut.getState(scripts);
// assert
expect(actual).to.equal(false);
});
it('true when script is selected and reverted', () => {
// arrange
const scripts = [new SelectedScriptStub('id', true), new SelectedScriptStub('dummy')];
const nodeId = getScriptNodeId(scripts[0].script);
const sut = new ScriptReverter(nodeId);
// act
const actual = sut.getState(scripts);
// assert
expect(actual).to.equal(true);
// arrange
const script = new ScriptStub('id');
const nodeId = getScriptNodeId(script);
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly selectedScripts: readonly SelectedScript[];
readonly expectedState: boolean;
}> = [
{
description: 'returns `false` when script is not selected',
selectedScripts: [],
expectedState: false,
},
{
description: 'returns `false` when script is selected but not reverted',
selectedScripts: [
new SelectedScriptStub(script).withRevert(false),
new SelectedScriptStub(new ScriptStub('dummy')),
],
expectedState: false,
},
{
description: 'returns `true` when script is selected and reverted',
selectedScripts: [
new SelectedScriptStub(script).withRevert(true),
new SelectedScriptStub(new ScriptStub('dummy')),
],
expectedState: true,
},
];
testScenarios.forEach((
{ description, selectedScripts, expectedState },
) => {
it(description, () => {
const sut = new ScriptReverter(nodeId);
// act
const actual = sut.getState(selectedScripts);
// assert
expect(actual).to.equal(expectedState);
});
});
});
describe('selectWithRevertState', () => {
// arrange
const script = new ScriptStub('id');
const collection = new CategoryCollectionStub()
.withAction(new CategoryStub(5).withScript(script));
/* eslint-disable object-property-newline */
const testCases = [
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly selection: readonly SelectedScript[];
readonly expectedRevert: boolean;
}> = [
{
name: 'selects with revert state when not selected',
selection: [], revert: true, expectRevert: true,
description: 'selects as reverted when initially unselected',
selection: [],
expectedRevert: true,
},
{
name: 'selects with non-revert state when not selected',
selection: [], revert: false, expectRevert: false,
description: 'selects as non-reverted when initially unselected',
selection: [],
expectedRevert: false,
},
{
name: 'switches when already selected with revert state',
selection: [new SelectedScript(script, true)], revert: false, expectRevert: false,
description: 'toggles to non-reverted for previously reverted scripts',
selection: [
new SelectedScriptStub(script).withRevert(true),
],
expectedRevert: false,
},
{
name: 'switches when already selected with not revert state',
selection: [new SelectedScript(script, false)], revert: true, expectRevert: true,
description: 'toggles to reverted for previously non-reverted scripts',
selection: [
new SelectedScriptStub(script).withRevert(false),
],
expectedRevert: true,
},
{
name: 'keeps revert state when already selected with revert state',
selection: [new SelectedScript(script, true)], revert: true, expectRevert: true,
description: 'maintains reverted state for already reverted scripts',
selection: [
new SelectedScriptStub(script).withRevert(true),
],
expectedRevert: true,
},
{
name: 'keeps revert state deselected when already selected with non revert state',
selection: [new SelectedScript(script, false)], revert: false, expectRevert: false,
description: 'maintains non-reverted state for already non-reverted scripts',
selection: [
new SelectedScriptStub(script).withRevert(false),
],
expectedRevert: false,
},
];
/* eslint-enable object-property-newline */
const nodeId = getScriptNodeId(script);
for (const testCase of testCases) {
it(testCase.name, () => {
const selection = new UserSelection(collection, testCase.selection);
testScenarios.forEach((
{ description, selection, expectedRevert },
) => {
it(description, () => {
const scriptSelection = new ScriptSelectionStub()
.withSelectedScripts(selection);
const userSelection = new UserSelectionStub().withScripts(scriptSelection);
const sut = new ScriptReverter(nodeId);
const revertState = expectedRevert;
// act
sut.selectWithRevertState(testCase.revert, selection);
sut.selectWithRevertState(revertState, userSelection);
// assert
expect(selection.isSelected(script.id)).to.equal(true);
expect(selection.selectedScripts[0].revert).equal(testCase.expectRevert);
expect(scriptSelection.isScriptSelected(script.id, expectedRevert)).to.equal(true);
});
}
});
});
});

41
tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.spec.ts
View File

@@ -7,6 +7,7 @@ import { TreeNodeCheckState } from '@/presentation/components/Scripts/View/Tree/
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', () => {
@@ -56,9 +57,12 @@ describe('useCollectionSelectionStateUpdater', () => {
it('adds to selection if not already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const selectionStub = new UserSelectionStub([]);
selectionStub.isSelected = () => false;
useSelectionStateStub.withUserSelection(selectionStub);
const isScriptInitiallySelected = false;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const node = createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Checked,
@@ -73,14 +77,17 @@ describe('useCollectionSelectionStateUpdater', () => {
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
expect(selectionStub.isScriptAdded(node.id)).to.equal(true);
expect(scriptSelectionStub.isScriptSelected(node.id, false)).to.equal(true);
});
it('does nothing if already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const selectionStub = new UserSelectionStub([]);
selectionStub.isSelected = () => true;
useSelectionStateStub.withUserSelection(selectionStub);
const isScriptInitiallySelected = true;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({
@@ -102,9 +109,12 @@ describe('useCollectionSelectionStateUpdater', () => {
it('removes from selection if already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const selectionStub = new UserSelectionStub([]);
selectionStub.isSelected = () => true;
useSelectionStateStub.withUserSelection(selectionStub);
const isScriptInitiallySelected = true;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const node = createTreeNodeStub({
isBranch: false,
currentState: TreeNodeCheckState.Unchecked,
@@ -119,14 +129,17 @@ describe('useCollectionSelectionStateUpdater', () => {
returnObject.updateNodeSelection(mockEvent);
// assert
expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
expect(selectionStub.isScriptRemoved(node.id)).to.equal(true);
expect(scriptSelectionStub.isScriptDeselected(node.id)).to.equal(true);
});
it('does nothing if not already selected', () => {
// arrange
const { returnObject, useSelectionStateStub } = runHook();
const selectionStub = new UserSelectionStub([]);
selectionStub.isSelected = () => false;
useSelectionStateStub.withUserSelection(selectionStub);
const isScriptInitiallySelected = false;
const scriptSelectionStub = new ScriptSelectionStub()
.withIsSelectedResult(isScriptInitiallySelected);
useSelectionStateStub.withUserSelection(
new UserSelectionStub().withScripts(scriptSelectionStub),
);
const mockEvent = new TreeNodeStateChangedEmittedEventStub()
.withNode(
createTreeNodeStub({

9
tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.spec.ts
View File

@@ -4,6 +4,7 @@ import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub'
import { getScriptNodeId } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/CategoryNodeMetadataConverter';
import { IScript } from '@/domain/IScript';
import { UseUserSelectionStateStub } from '@tests/unit/shared/Stubs/UseUserSelectionStateStub';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
describe('useSelectedScriptNodeIds', () => {
it('returns an empty array when no scripts are selected', () => {
@@ -19,8 +20,8 @@ describe('useSelectedScriptNodeIds', () => {
it('immediately', () => {
// arrange
const selectedScripts = [
new SelectedScriptStub('id-1'),
new SelectedScriptStub('id-2'),
new SelectedScriptStub(new ScriptStub('id-1')),
new SelectedScriptStub(new ScriptStub('id-2')),
];
const parsedNodeIds = new Map<IScript, string>([
[selectedScripts[0].script, 'expected-id-1'],
@@ -43,8 +44,8 @@ describe('useSelectedScriptNodeIds', () => {
// arrange
const initialScripts = [];
const changedScripts = [
new SelectedScriptStub('id-1'),
new SelectedScriptStub('id-2'),
new SelectedScriptStub(new ScriptStub('id-1')),
new SelectedScriptStub(new ScriptStub('id-2')),
];
const parsedNodeIds = new Map<IScript, string>([
[changedScripts[0].script, 'expected-id-1'],