@webitel/ui-sdk 26.8.75 → 26.8.76

package/src/components/wt-tree/__tests__/WtTree.spec.js

@@ -1,14 +1,138 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { WtTreeMode } from '../types/WtTreeMode';
 import WtTree from '../wt-tree.vue';
 
+const data = [
+	{
+		label: 'Parent 1',
+		children: [
+			{
+				label: 'Child 1.1',
+			},
+			{
+				label: 'Child 1.2',
+			},
+		],
+	},
+	{
+		label: 'Parent 2',
+	},
+];
+
 describe('WtTree', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtTree, {
-			stubs: {
-				WtTree: true,
+			props: {
+				data: [],
 			},
 		});
 		expect(wrapper.classes('wt-tree')).toBe(true);
 	});
+
+	it('renders a wt-tree-line per top-level item in tree mode by default', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+			},
+		});
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-tree-line',
+			}).length,
+		).toBe(data.length);
+		expect(wrapper.find('.wt-tree__list-content').exists()).toBe(false);
+	});
+
+	it('forwards update:modelValue from a tree-line up', async () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-tree-line',
+			})
+			.vm.$emit('update:modelValue', data[0]);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			data[0],
+		]);
+	});
+
+	it('renders a flattened list of all nested items in list mode', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+			},
+		});
+		const labels = wrapper.findAll('.wt-tree__label');
+		expect(labels.length).toBe(4);
+		expect(labels.map((l) => l.text())).toEqual([
+			'Parent 1',
+			'Child 1.1',
+			'Child 1.2',
+			'Parent 2',
+		]);
+	});
+
+	it('emits update:modelValue when a list item is clicked', async () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+			},
+		});
+		await wrapper.findAll('.wt-tree__label')[1].trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			data[0].children[0],
+		]);
+	});
+
+	it('marks the selected list item as active', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+				modelValue: data[1],
+			},
+		});
+		const wrappers = wrapper.findAll('.wt-tree__label-wrapper');
+		expect(wrappers.at(-1).classes()).toContain('active');
+		expect(wrappers[0].classes()).not.toContain('active');
+	});
+
+	it('uses itemData to compare/select values when provided', async () => {
+		const keyedData = [
+			{
+				id: 'a',
+				label: 'A',
+			},
+			{
+				id: 'b',
+				label: 'B',
+			},
+		];
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data: keyedData,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+				itemData: 'id',
+				modelValue: 'b',
+			},
+		});
+		expect(
+			wrapper.findAll('.wt-tree__label-wrapper').at(-1).classes(),
+		).toContain('active');
+
+		await wrapper.findAll('.wt-tree__label')[0].trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			'a',
+		]);
+	});
 });

package/src/components/wt-tree-line/__tests__/WtTreeLine.spec.js

@@ -0,0 +1,205 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtTreeLine from '../wt-tree-line.vue';
+
+const leaf = {
+	label: 'Leaf',
+};
+const parent = {
+	label: 'Parent',
+	children: [
+		{
+			label: 'Child 1',
+		},
+		{
+			label: 'Child 2',
+		},
+	],
+};
+
+describe('WtTreeLine', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		expect(wrapper.find('.wt-tree-line').exists()).toBe(true);
+	});
+
+	it('renders the item label', () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		expect(wrapper.find('.wt-tree-line__label').text()).toBe('Leaf');
+	});
+
+	it('does not render an expand toggle for a leaf node', () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders an expand toggle for a node with children', () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: parent,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('renders a nested wt-tree-line per child', () => {
+		const wrapper = mount(WtTreeLine, {
+			props: {
+				data: parent,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		const labels = wrapper.findAll('.wt-tree-line__label').map((l) => l.text());
+		expect(labels).toEqual([
+			'Parent',
+			'Child 1',
+			'Child 2',
+		]);
+	});
+
+	it('emits update:modelValue with the raw data for a leaf when clicked', async () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		await wrapper.find('.wt-tree-line__label-wrapper').trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			leaf,
+		]);
+	});
+
+	it('emits update:modelValue with itemData value when itemData is provided', async () => {
+		const keyedLeaf = {
+			id: 'a',
+			label: 'A',
+		};
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: keyedLeaf,
+				modelValue: null,
+				itemLabel: 'label',
+				itemData: 'id',
+			},
+		});
+		await wrapper.find('.wt-tree-line__label-wrapper').trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			'a',
+		]);
+	});
+
+	it('toggles collapsed state (and does not emit) when clicking a node with children, unless allowParent', async () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: parent,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		await wrapper.find('.wt-tree-line__label-wrapper').trigger('click');
+		expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+	});
+
+	// NOTE: `allowParent`'s early-return branch only applies to nodes without children,
+	// and for those it emits the exact same value as the default (final) emit below it —
+	// so toggling `allowParent` has no observable effect on a leaf's click behavior, and
+	// none at all on a node with children (the collapse-toggle branch always wins first).
+	// Asserting the current (seemingly no-op) behavior rather than an intended one.
+	it('has no observable effect on click behavior for a leaf node', async () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: null,
+				itemLabel: 'label',
+				allowParent: true,
+			},
+		});
+		await wrapper.find('.wt-tree-line__label-wrapper').trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			leaf,
+		]);
+	});
+
+	it('marks the node active when it matches modelValue', () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: leaf,
+				itemLabel: 'label',
+			},
+		});
+		expect(wrapper.find('.wt-tree-line__label-wrapper').classes()).toContain(
+			'active',
+		);
+	});
+
+	it('marks the node searched when data has the searched flag', () => {
+		const searchedLeaf = {
+			label: 'Leaf',
+			searched: true,
+		};
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: searchedLeaf,
+				modelValue: null,
+				itemLabel: 'label',
+			},
+		});
+		expect(wrapper.find('.wt-tree-line__label-wrapper').classes()).toContain(
+			'searched',
+		);
+	});
+
+	it('toggles multi-select values into an array in multiple mode', async () => {
+		const wrapper = shallowMount(WtTreeLine, {
+			props: {
+				data: leaf,
+				modelValue: [],
+				itemLabel: 'label',
+				itemData: 'label',
+				multiple: true,
+			},
+		});
+		await wrapper.find('.wt-tree-line__label-wrapper').trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			[
+				'Leaf',
+			],
+		]);
+	});
+});

package/src/components/wt-tree-table/__tests__/WtTreeTable.spec.js

@@ -0,0 +1,155 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtTreeTable from '../wt-tree-table.vue';
+
+const headers = [
+	{
+		value: 'name',
+		text: 'Name',
+	},
+	{
+		value: 'age',
+		text: 'Age',
+	},
+];
+
+const data = [
+	{
+		id: 1,
+		name: 'Alice',
+		age: 30,
+	},
+	{
+		id: 2,
+		name: 'Bob',
+		age: 25,
+	},
+];
+
+describe('WtTreeTable', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-tree-table');
+	});
+
+	it('renders a header cell per header, an actions header, and a row per data item', () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+			},
+		});
+		expect(wrapper.findAll('.wt-tree-table-th').length).toBe(headers.length);
+		expect(wrapper.find('.wt-tree-table-th__actions').exists()).toBe(true);
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-tree-table-row',
+			}).length,
+		).toBe(data.length);
+	});
+
+	it('does not render the actions header when gridActions is false', () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+				gridActions: false,
+			},
+		});
+		expect(wrapper.find('.wt-tree-table-th__actions').exists()).toBe(false);
+	});
+
+	it('renders a select-all checkbox on the first header when selectable', () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-checkbox',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('emits sort with the next sort order for a sortable column', async () => {
+		const sortableHeaders = [
+			{
+				value: 'name',
+				text: 'Name',
+				sort: null,
+			},
+		];
+		const wrapper = mount(WtTreeTable, {
+			props: {
+				headers: sortableHeaders,
+				data,
+				childrenProp: 'children',
+				selected: [],
+				sortable: true,
+			},
+		});
+		await wrapper.find('.wt-tree-table-th').trigger('click');
+		expect(wrapper.emitted().sort).toBeTruthy();
+	});
+
+	it('emits update:selected when a row toggles selection, given an explicit selected prop', async () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+			},
+		});
+		const row = wrapper.findComponent({
+			name: 'wt-tree-table-row',
+		});
+		await row.vm.$emit('update:selected', {
+			data: data[0],
+			select: true,
+		});
+
+		expect(wrapper.emitted()['update:selected'][0]).toEqual([
+			[
+				data[0],
+			],
+		]);
+	});
+
+	it('emits update:selected with all nested elements when select-all is toggled on', async () => {
+		const wrapper = shallowMount(WtTreeTable, {
+			props: {
+				headers,
+				data,
+				childrenProp: 'children',
+				selected: [],
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-checkbox',
+			})
+			.vm.$emit('update:selected', true);
+
+		expect(wrapper.emitted()['update:selected'][0]).toEqual([
+			data,
+		]);
+	});
+});

package/src/components/wt-tree-table-row/__tests__/WtTreeTableRow.spec.js

@@ -0,0 +1,176 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtTreeTableRow from '../wt-tree-table-row.vue';
+
+const dataHeaders = [
+	{
+		value: 'name',
+		text: 'Name',
+	},
+	{
+		value: 'age',
+		text: 'Age',
+	},
+];
+
+const leafRow = {
+	id: 1,
+	name: 'Alice',
+	age: 30,
+};
+const parentRow = {
+	id: 2,
+	name: 'Bob',
+	age: 40,
+	children: [
+		{
+			id: 3,
+			name: 'Charlie',
+			age: 10,
+		},
+	],
+};
+
+describe('WtTreeTableRow', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		expect(wrapper.find('.wt-tree-table-row').exists()).toBe(true);
+	});
+
+	it('renders a cell with the value for each header', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		const cells = wrapper.findAll('.wt-tree-table-td');
+		expect(cells[0].text()).toContain('Alice');
+		expect(cells[1].text()).toContain('30');
+	});
+
+	it('applies the alternate class on odd row positions', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 1,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		expect(wrapper.find('.wt-tree-table-row').classes()).toContain(
+			'wt-tree-table-row--alternate',
+		);
+	});
+
+	it('does not render an expand toggle for a row without children', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders an expand toggle and nested rows once expanded, for a row with children', async () => {
+		const wrapper = mount(WtTreeTableRow, {
+			props: {
+				data: parentRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		const toggle = wrapper.findComponent({
+			name: 'wt-icon-btn',
+		});
+		expect(toggle.exists()).toBe(true);
+		expect(wrapper.findAll('tr').length).toBe(1);
+
+		await toggle.trigger('click');
+
+		expect(wrapper.findAll('tr').length).toBe(2);
+		expect(wrapper.findAll('tr')[1].text()).toContain('Charlie');
+	});
+
+	it('does not render a selection checkbox unless selectable', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-checkbox',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('emits update:selected with the row data when the checkbox is toggled', async () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+				selectable: true,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-checkbox',
+			})
+			.vm.$emit('update:selected', true);
+
+		expect(wrapper.emitted()['update:selected'][0]).toEqual([
+			{
+				data: leafRow,
+				select: true,
+			},
+		]);
+	});
+
+	it('does not render an actions cell when gridActions is false', () => {
+		const wrapper = shallowMount(WtTreeTableRow, {
+			props: {
+				data: leafRow,
+				rowPosition: 0,
+				childrenProp: 'children',
+				selectedElements: [],
+				dataHeaders,
+				gridActions: false,
+			},
+		});
+		expect(wrapper.find('.wt-tree-table-td__actions').exists()).toBe(false);
+	});
+});