Introduce new TreeView UI component
Key highlights: - Written from scratch to cater specifically to privacy.sexy's needs and requirements. - The visual look mimics the previous component with minimal changes, but its internal code is completely rewritten. - Lays groundwork for future functionalities like the "expand all" button a flat view mode as discussed in #158. - Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent `liquour-tree` as part of #230. Improvements and features: - Caching for quicker node queries. - Gradual rendering of nodes that introduces a noticable boost in performance, particularly during search/filtering. - `TreeView` solely governs the check states of branch nodes. Changes: - Keyboard interactions now alter the background color to highlight the focused item. Previously, it was changing the color of the text. - Better state management with clear separation of concerns: - `TreeView` exclusively manages indeterminate states. - `TreeView` solely governs the check states of branch nodes. - Introduce transaction pattern to update state in batches to minimize amount of events handled. - Improve keyboard focus, style background instead of foreground. Use hover/touch color on keyboard focus. - `SelectableTree` has been removed. Instead, `TreeView` is now directly integrated with `ScriptsTree`. - `ScriptsTree` has been refactored to incorporate hooks for clearer code and separation of duties. - Adopt Vue-idiomatic bindings instead of keeping a reference of the tree component. - Simplify and change filter event management. - Abandon global styles in favor of class-scoped styles. - Use global mixins with descriptive names to clarify indended functionality.
This commit is contained in:
undergroundwires
@@ -0,0 +1,106 @@
|
||||
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';
|
||||
|
||||
describe('CategoryReverter', () => {
|
||||
describe('getState', () => {
|
||||
// arrange
|
||||
const scripts = [
|
||||
new ScriptStub('revertable').withRevertCode('REM revert me'),
|
||||
new ScriptStub('revertable2').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 = [
|
||||
{
|
||||
name: 'false when subscripts are not reverted',
|
||||
state: scripts.map((script) => new SelectedScript(script, false)),
|
||||
expected: false,
|
||||
},
|
||||
{
|
||||
name: 'false when some subscripts are reverted',
|
||||
state: [new SelectedScript(scripts[0], false), new SelectedScript(scripts[0], true)],
|
||||
expected: false,
|
||||
},
|
||||
{
|
||||
name: 'false when subscripts are not reverted',
|
||||
state: scripts.map((script) => new SelectedScript(script, true)),
|
||||
expected: true,
|
||||
},
|
||||
];
|
||||
for (const testCase of testCases) {
|
||||
it(testCase.name, () => {
|
||||
// act
|
||||
const actual = sut.getState(testCase.state);
|
||||
// assert
|
||||
expect(actual).to.equal(testCase.expected);
|
||||
});
|
||||
}
|
||||
});
|
||||
describe('selectWithRevertState', () => {
|
||||
// arrange
|
||||
const scripts = [
|
||||
new ScriptStub('revertable').withRevertCode('REM revert me'),
|
||||
new ScriptStub('revertable2').withRevertCode('REM revert me 2'),
|
||||
];
|
||||
const category = new CategoryStub(1).withScripts(...scripts);
|
||||
const collection = new CategoryCollectionStub().withAction(category);
|
||||
/* eslint-disable object-property-newline */
|
||||
const testCases = [
|
||||
{
|
||||
name: 'selects with revert state when not selected',
|
||||
selection: [],
|
||||
revert: true, expectRevert: 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,
|
||||
},
|
||||
];
|
||||
/* eslint-enable object-property-newline */
|
||||
const nodeId = getCategoryNodeId(category);
|
||||
for (const testCase of testCases) {
|
||||
it(testCase.name, () => {
|
||||
const selection = new UserSelection(collection, testCase.selection);
|
||||
const sut = new CategoryReverter(nodeId, collection);
|
||||
// act
|
||||
sut.selectWithRevertState(testCase.revert, selection);
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { getReverter } from '@/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ReverterFactory';
|
||||
import { ScriptReverter } from '@/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter';
|
||||
import { CategoryReverter } from '@/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter';
|
||||
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 { getCategoryNodeId, getScriptNodeId } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/CategoryNodeMetadataConverter';
|
||||
import { NodeType } from '@/application/Parser/NodeValidation/NodeType';
|
||||
import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
|
||||
|
||||
describe('ReverterFactory', () => {
|
||||
describe('getReverter', () => {
|
||||
it('gets CategoryReverter for category node', () => {
|
||||
// arrange
|
||||
const category = new CategoryStub(0).withScriptIds('55');
|
||||
const node = getNodeContentStub(getCategoryNodeId(category), NodeType.Category);
|
||||
const collection = new CategoryCollectionStub()
|
||||
.withAction(category);
|
||||
// act
|
||||
const result = getReverter(node, collection);
|
||||
// assert
|
||||
expect(result instanceof CategoryReverter).to.equal(true);
|
||||
});
|
||||
it('gets ScriptReverter for script node', () => {
|
||||
// arrange
|
||||
const script = new ScriptStub('test');
|
||||
const node = getNodeContentStub(getScriptNodeId(script), NodeType.Script);
|
||||
const collection = new CategoryCollectionStub()
|
||||
.withAction(new CategoryStub(0).withScript(script));
|
||||
// act
|
||||
const result = getReverter(node, collection);
|
||||
// assert
|
||||
expect(result instanceof ScriptReverter).to.equal(true);
|
||||
});
|
||||
});
|
||||
function getNodeContentStub(nodeId: string, type: NodeType): NodeMetadata {
|
||||
return {
|
||||
id: nodeId,
|
||||
text: 'text',
|
||||
isReversible: false,
|
||||
docs: [],
|
||||
children: [],
|
||||
type,
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
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';
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
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 = [
|
||||
{
|
||||
name: 'selects with revert state when not selected',
|
||||
selection: [], revert: true, expectRevert: true,
|
||||
},
|
||||
{
|
||||
name: 'selects with non-revert state when not selected',
|
||||
selection: [], revert: false, expectRevert: false,
|
||||
},
|
||||
{
|
||||
name: 'switches when already selected with revert state',
|
||||
selection: [new SelectedScript(script, true)], revert: false, expectRevert: false,
|
||||
},
|
||||
{
|
||||
name: 'switches when already selected with not revert state',
|
||||
selection: [new SelectedScript(script, false)], revert: true, expectRevert: true,
|
||||
},
|
||||
{
|
||||
name: 'keeps revert state when already selected with revert state',
|
||||
selection: [new SelectedScript(script, true)], revert: true, expectRevert: true,
|
||||
},
|
||||
{
|
||||
name: 'keeps revert state deselected when already selected with non revert state',
|
||||
selection: [new SelectedScript(script, false)], revert: false, expectRevert: 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);
|
||||
const sut = new ScriptReverter(nodeId);
|
||||
// act
|
||||
sut.selectWithRevertState(testCase.revert, selection);
|
||||
// assert
|
||||
expect(selection.isSelected(script.id)).to.equal(true);
|
||||
expect(selection.selectedScripts[0].revert).equal(testCase.expectRevert);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user