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.
195 lines
6.6 KiB
TypeScript
195 lines
6.6 KiB
TypeScript
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,
|
|
};
|
|
}
|