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,237 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
Wrapper, shallowMount,
|
||||
mount,
|
||||
} from '@vue/test-utils';
|
||||
import { nextTick, defineComponent } from 'vue';
|
||||
import ToggleSwitch from '@/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue';
|
||||
|
||||
const DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR = 'input.toggle-input';
|
||||
const DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR = 'span.label-off';
|
||||
const DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR = 'span.label-on';
|
||||
|
||||
describe('ToggleSwitch.vue', () => {
|
||||
describe('initial state', () => {
|
||||
const testCases = [
|
||||
{
|
||||
initialValue: false,
|
||||
description: 'unchecked for false',
|
||||
},
|
||||
{
|
||||
initialValue: true,
|
||||
description: 'checked for true',
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ initialValue, description }) => {
|
||||
it(`renders as ${description}`, () => {
|
||||
// arrange
|
||||
const expectedState = initialValue;
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: initialValue,
|
||||
},
|
||||
});
|
||||
const { checkboxElement } = getCheckboxElement(wrapper);
|
||||
|
||||
// assert
|
||||
expect(checkboxElement.checked).to.equal(expectedState);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('label rendering', () => {
|
||||
const testCases = [
|
||||
{
|
||||
description: 'off label',
|
||||
selector: DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR,
|
||||
},
|
||||
{
|
||||
description: 'on label',
|
||||
selector: DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR,
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ selector, description }) => {
|
||||
it(description, () => {
|
||||
// arrange
|
||||
const expectedLabel = 'expected-test-label';
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
label: expectedLabel,
|
||||
},
|
||||
});
|
||||
|
||||
// assert
|
||||
const element = wrapper.find(selector);
|
||||
expect(element.text()).to.equal(expectedLabel);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('model updates', () => {
|
||||
describe('emission on change', () => {
|
||||
const testCases = [
|
||||
{
|
||||
initialValue: true,
|
||||
newCheckValue: false,
|
||||
},
|
||||
{
|
||||
initialValue: false,
|
||||
newCheckValue: true,
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ initialValue, newCheckValue }) => {
|
||||
it(`emits ${newCheckValue} when initial value is ${initialValue} and checkbox value changes`, async () => {
|
||||
// arrange
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: initialValue,
|
||||
},
|
||||
});
|
||||
const { checkboxWrapper } = getCheckboxElement(wrapper);
|
||||
|
||||
// act
|
||||
await checkboxWrapper.setChecked(newCheckValue);
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(wrapper.emitted().input).to.deep.equal([[newCheckValue]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('no emission on identical value', () => {
|
||||
const testCases = [
|
||||
{
|
||||
value: true,
|
||||
description: 'true',
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
description: 'false',
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ value, description }) => {
|
||||
it(`does not emit for an unchanged value of ${description}`, async () => {
|
||||
// arrange
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: value,
|
||||
},
|
||||
});
|
||||
const { checkboxWrapper } = getCheckboxElement(wrapper);
|
||||
|
||||
// act
|
||||
await checkboxWrapper.setChecked(value);
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(wrapper.emitted().input).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('click propagation', () => {
|
||||
it('stops propagation `stopClickPropagation` is true', async () => {
|
||||
// arrange
|
||||
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
|
||||
{ stopClickPropagation: true },
|
||||
);
|
||||
const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
|
||||
|
||||
// act
|
||||
switchWrapper.trigger('click');
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(switchWrapper.exists());
|
||||
const receivedEvents = parentWrapper.emitted(parentClickEventName);
|
||||
expect(receivedEvents).to.equal(undefined);
|
||||
});
|
||||
it('allows propagation `stopClickPropagation` is false', async () => {
|
||||
// arrange
|
||||
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
|
||||
{ stopClickPropagation: false },
|
||||
);
|
||||
const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
|
||||
|
||||
// act
|
||||
switchWrapper.trigger('click');
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(switchWrapper.exists());
|
||||
const receivedEvents = parentWrapper.emitted(parentClickEventName);
|
||||
expect(receivedEvents).to.have.lengthOf(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getCheckboxElement(wrapper: Wrapper<Vue>) {
|
||||
const checkboxWrapper = wrapper.find(DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR);
|
||||
const checkboxElement = checkboxWrapper.element as HTMLInputElement;
|
||||
return {
|
||||
checkboxWrapper,
|
||||
checkboxElement,
|
||||
};
|
||||
}
|
||||
|
||||
function mountComponent(options?: {
|
||||
readonly properties?: {
|
||||
readonly modelValue?: boolean,
|
||||
readonly label?: string,
|
||||
readonly stopClickPropagation?: boolean,
|
||||
}
|
||||
}) {
|
||||
const wrapper = shallowMount(ToggleSwitch as unknown, {
|
||||
propsData: {
|
||||
value: options?.properties?.modelValue,
|
||||
label: options?.properties?.label ?? 'test-label',
|
||||
stopClickPropagation: options?.properties?.stopClickPropagation,
|
||||
},
|
||||
});
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function mountToggleSwitchParent(options?: {
|
||||
readonly stopClickPropagation?: boolean,
|
||||
}) {
|
||||
const parentClickEventName = 'parent-clicked';
|
||||
const parentComponent = defineComponent({
|
||||
components: {
|
||||
ToggleSwitch,
|
||||
},
|
||||
emits: [parentClickEventName],
|
||||
template: `
|
||||
<div @click="handleParentClick">
|
||||
<ToggleSwitch
|
||||
:stopClickPropagation="stopClickPropagation"
|
||||
:label="'test-label'"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
setup(_, { emit }) {
|
||||
const stopClickPropagation = options?.stopClickPropagation;
|
||||
|
||||
function handleParentClick() {
|
||||
emit(parentClickEventName);
|
||||
}
|
||||
|
||||
return {
|
||||
handleParentClick,
|
||||
stopClickPropagation,
|
||||
};
|
||||
},
|
||||
});
|
||||
const wrapper = mount(
|
||||
parentComponent as unknown,
|
||||
{
|
||||
stubs: { ToggleSwitch: false },
|
||||
},
|
||||
);
|
||||
return {
|
||||
wrapper,
|
||||
parentClickEventName,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user