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,194 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { WatchSource, ref, nextTick } from 'vue';
|
||||
import { CategoryNodeParser, useTreeViewNodeInput } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
|
||||
import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
|
||||
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
|
||||
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
|
||||
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
||||
import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
|
||||
import { NodeMetadataStub } from '@tests/unit/shared/Stubs/NodeMetadataStub';
|
||||
import { convertToNodeInput } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/TreeNodeMetadataConverter';
|
||||
import { TreeInputNodeDataStub as TreeInputNodeData, TreeInputNodeDataStub } from '@tests/unit/shared/Stubs/TreeInputNodeDataStub';
|
||||
|
||||
describe('useTreeViewNodeInput', () => {
|
||||
describe('when given categoryId', () => {
|
||||
it('sets input nodes correctly', async () => {
|
||||
// arrange
|
||||
const testCategoryId = ref<number | undefined>();
|
||||
const {
|
||||
useStateStub, returnObject, parserMock, converterMock,
|
||||
} = mountWrapperComponent(
|
||||
() => testCategoryId.value,
|
||||
);
|
||||
const expectedCategoryId = 123;
|
||||
const expectedCategoryCollection = new CategoryCollectionStub().withAction(
|
||||
new CategoryStub(expectedCategoryId),
|
||||
);
|
||||
const expectedMetadata = [new NodeMetadataStub(), new NodeMetadataStub()];
|
||||
parserMock.setupParseSingleScenario({
|
||||
givenId: expectedCategoryId,
|
||||
givenCollection: expectedCategoryCollection,
|
||||
parseResult: expectedMetadata,
|
||||
});
|
||||
const expectedNodeInputData = [new TreeInputNodeDataStub(), new TreeInputNodeDataStub()];
|
||||
expectedMetadata.forEach((metadata, index) => {
|
||||
converterMock.setupConversionScenario({
|
||||
givenMetadata: metadata,
|
||||
convertedNode: expectedNodeInputData[index],
|
||||
});
|
||||
});
|
||||
useStateStub.withState(
|
||||
new CategoryCollectionStateStub().withCollection(expectedCategoryCollection),
|
||||
);
|
||||
// act
|
||||
const { treeViewInputNodes } = returnObject;
|
||||
testCategoryId.value = expectedCategoryId;
|
||||
await nextTick();
|
||||
// assert
|
||||
const actualInputNodes = treeViewInputNodes.value;
|
||||
expect(actualInputNodes).have.lengthOf(expectedNodeInputData.length);
|
||||
expect(actualInputNodes).include.members(expectedNodeInputData);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when not given a categoryId', () => {
|
||||
it('sets input nodes correctly', () => {
|
||||
// arrange
|
||||
const testCategoryId = ref<number | undefined>();
|
||||
const {
|
||||
useStateStub, returnObject, parserMock, converterMock,
|
||||
} = mountWrapperComponent(
|
||||
() => testCategoryId.value,
|
||||
);
|
||||
const expectedCategoryCollection = new CategoryCollectionStub().withAction(
|
||||
new CategoryStub(123),
|
||||
);
|
||||
const expectedMetadata = [new NodeMetadataStub(), new NodeMetadataStub()];
|
||||
parserMock.setupParseAllScenario({
|
||||
givenCollection: expectedCategoryCollection,
|
||||
parseResult: expectedMetadata,
|
||||
});
|
||||
const expectedNodeInputData = [new TreeInputNodeDataStub(), new TreeInputNodeDataStub()];
|
||||
expectedMetadata.forEach((metadata, index) => {
|
||||
converterMock.setupConversionScenario({
|
||||
givenMetadata: metadata,
|
||||
convertedNode: expectedNodeInputData[index],
|
||||
});
|
||||
});
|
||||
useStateStub.withState(
|
||||
new CategoryCollectionStateStub().withCollection(expectedCategoryCollection),
|
||||
);
|
||||
// act
|
||||
const { treeViewInputNodes } = returnObject;
|
||||
testCategoryId.value = undefined;
|
||||
// assert
|
||||
const actualInputNodes = treeViewInputNodes.value;
|
||||
expect(actualInputNodes).have.lengthOf(expectedNodeInputData.length);
|
||||
expect(actualInputNodes).include.members(expectedNodeInputData);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined>) {
|
||||
const useStateStub = new UseCollectionStateStub();
|
||||
const parserMock = mockCategoryNodeParser();
|
||||
const converterMock = mockConverter();
|
||||
let returnObject: ReturnType<typeof useTreeViewNodeInput>;
|
||||
|
||||
shallowMount({
|
||||
setup() {
|
||||
returnObject = useTreeViewNodeInput(categoryIdWatcher, parserMock.mock, converterMock.mock);
|
||||
},
|
||||
template: '<div></div>',
|
||||
}, {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
returnObject,
|
||||
useStateStub,
|
||||
parserMock,
|
||||
converterMock,
|
||||
};
|
||||
}
|
||||
|
||||
interface ConversionScenario {
|
||||
readonly givenMetadata: NodeMetadata;
|
||||
readonly convertedNode: TreeInputNodeData;
|
||||
}
|
||||
|
||||
function mockConverter() {
|
||||
const scenarios = new Array<ConversionScenario>();
|
||||
|
||||
const mock: typeof convertToNodeInput = (metadata) => {
|
||||
const scenario = scenarios.find((s) => s.givenMetadata === metadata);
|
||||
if (scenario) {
|
||||
return scenario.convertedNode;
|
||||
}
|
||||
return new TreeInputNodeData();
|
||||
};
|
||||
|
||||
function setupConversionScenario(scenario: ConversionScenario) {
|
||||
scenarios.push(scenario);
|
||||
}
|
||||
|
||||
return {
|
||||
mock,
|
||||
setupConversionScenario,
|
||||
};
|
||||
}
|
||||
|
||||
interface ParseSingleScenario {
|
||||
readonly givenId: number;
|
||||
readonly givenCollection: ICategoryCollection;
|
||||
readonly parseResult: NodeMetadata[];
|
||||
}
|
||||
|
||||
interface ParseAllScenario {
|
||||
readonly givenCollection: ICategoryCollection;
|
||||
readonly parseResult: NodeMetadata[];
|
||||
}
|
||||
|
||||
function mockCategoryNodeParser() {
|
||||
const parseSingleScenarios = new Array<ParseSingleScenario>();
|
||||
|
||||
const parseAllScenarios = new Array<ParseAllScenario>();
|
||||
|
||||
const mock: CategoryNodeParser = {
|
||||
parseSingle: (id, collection) => {
|
||||
const scenario = parseSingleScenarios
|
||||
.find((s) => s.givenId === id && s.givenCollection === collection);
|
||||
if (scenario) {
|
||||
return scenario.parseResult;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
parseAll: (collection) => {
|
||||
const scenario = parseAllScenarios
|
||||
.find((s) => s.givenCollection === collection);
|
||||
if (scenario) {
|
||||
return scenario.parseResult;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
function setupParseSingleScenario(scenario: ParseSingleScenario) {
|
||||
parseSingleScenarios.push(scenario);
|
||||
}
|
||||
|
||||
function setupParseAllScenario(scenario: ParseAllScenario) {
|
||||
parseAllScenarios.push(scenario);
|
||||
}
|
||||
|
||||
return {
|
||||
mock,
|
||||
setupParseAllScenario,
|
||||
setupParseSingleScenario,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user