@webitel/ui-sdk 26.8.75 → 26.8.77

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);
+	});
+});

package/src/components/wt-vidstack-player/__tests__/WtVidstackPlayer.spec.js

@@ -0,0 +1,82 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import { ComponentSize } from '../../../enums';
+import WtVidstackPlayer from '../wt-vidstack-player.vue';
+
+describe('WtVidstackPlayer', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtVidstackPlayer);
+		expect(wrapper.classes()).toContain('wt-vidstack-player');
+	});
+
+	it('defaults to the sm size class', () => {
+		const wrapper = shallowMount(WtVidstackPlayer);
+		expect(wrapper.classes()).toContain('wt-vidstack-player--sm');
+	});
+
+	it('applies a custom size class', () => {
+		const wrapper = shallowMount(WtVidstackPlayer, {
+			props: {
+				size: ComponentSize.LG,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-vidstack-player--lg');
+	});
+
+	it('applies the video-object-fit modifier class', () => {
+		const wrapper = shallowMount(WtVidstackPlayer, {
+			props: {
+				videoObjectFit: 'cover',
+			},
+		});
+		expect(wrapper.classes()).toContain(
+			'wt-vidstack-player-video-object-fit--cover',
+		);
+	});
+
+	it('applies stretch/static/hide-background/mirror modifier classes', () => {
+		const wrapper = shallowMount(WtVidstackPlayer, {
+			props: {
+				stretch: true,
+				static: true,
+				hideBackground: true,
+				mirrorVideo: true,
+			},
+		});
+		expect(wrapper.classes()).toEqual(
+			expect.arrayContaining([
+				'wt-vidstack-player--stretch',
+				'wt-vidstack-player--static',
+				'wt-vidstack-player--hide-background',
+				'wt-vidstack-player--mirror-video',
+			]),
+		);
+	});
+
+	it('emits close when the layout requests close', async () => {
+		const wrapper = shallowMount(WtVidstackPlayer);
+		await wrapper
+			.findComponent({
+				name: 'VideoLayout',
+			})
+			.vm.$emit('close-player');
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('renders default content/controls-panel slots with the current size scope', () => {
+		const wrapper = mount(WtVidstackPlayer, {
+			props: {
+				size: ComponentSize.MD,
+			},
+			slots: {
+				content: `<template #content="{ size }"><div class="content-size">{{ size }}</div></template>`,
+			},
+		});
+		expect(wrapper.find('.content-size').text()).toBe(ComponentSize.MD);
+	});
+
+	it('exposes the root element ref', () => {
+		const wrapper = shallowMount(WtVidstackPlayer);
+		expect(wrapper.vm.rootEl).toBeInstanceOf(HTMLElement);
+	});
+});

package/src/enums/IconAction/{IconAction.enum.js → IconAction.ts}

@@ -1,4 +1,4 @@
-const IconAction = Object.freeze({
+export const IconAction = {
 	REFRESH: 'refresh',
 	ADD: 'add',
 	RESET_MEMBERS: 'reset-members',
@@ -26,6 +26,8 @@ const IconAction = Object.freeze({
 	CHAT: 'chat',
 	SORT: 'sort',
 	LOGOUT: 'logout',
-});
+} as const;
+
+export type IconAction = (typeof IconAction)[keyof typeof IconAction];
 
 export default IconAction;

package/src/enums/index.ts

@@ -21,7 +21,7 @@ export { DefaultWorkspaceTabSettings } from './DefaultWorkspaceTabSettings/Defau
 export { EmptyCause } from './EmptyCause/EmptyCause';
 export { ExportFormat } from './ExportFormat/ExportFormat.enum';
 export { FormatDateMode } from './FormatDateMode/FormatDateMode';
-export { default as IconAction } from './IconAction/IconAction.enum.js';
+export { IconAction } from './IconAction/IconAction';
 export { IconColor } from './IconColor/IconColor';
 export { LoginOptions } from './LoginOptions/LoginOptions';
 export { MessageColor } from './MessageColor/MessageColor';

package/src/modules/ObjectPermissions/components/_internal/permissions-tab-content.vue

@@ -98,7 +98,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import IconAction from '../../../../enums/IconAction/IconAction.enum';
+import { IconAction } from '../../../../enums';
 import { useTableEmpty } from '../../../TableComponentModule/composables/useTableEmpty';
 import { AccessMode, AccessRuleName } from '../../enums';
 import { DEFAULT_PERMISSIONS_USER_ACCESS } from '../../types/PermissionsUserAccess';