@webitel/ui-sdk 26.8.75 → 26.8.76

package/src/components/wt-breadcrumb/__tests__/WtBreadcrumb.spec.js

@@ -0,0 +1,117 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtBreadcrumb from '../wt-breadcrumb.vue';
+
+describe('WtBreadcrumb', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtBreadcrumb, {
+			props: {
+				path: [],
+			},
+		});
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders an item for each path entry', () => {
+		const path = [
+			{
+				name: 'directory',
+			},
+			{
+				name: 'users',
+				route: '/directory/users',
+			},
+		];
+		const wrapper = mount(WtBreadcrumb, {
+			props: {
+				path,
+			},
+			global: {
+				stubs: {
+					RouterLink: {
+						template: '<a><slot /></a>',
+					},
+				},
+			},
+		});
+		const items = wrapper.findAll('.wt-breadcrumb__text');
+		expect(items.length).toBe(path.length);
+		expect(items[0].text()).toBe('directory');
+		expect(items[1].text()).toBe('users');
+	});
+
+	it('renders a router-link for items with a route', () => {
+		const path = [
+			{
+				name: 'directory',
+			},
+			{
+				name: 'users',
+				route: '/directory/users',
+			},
+		];
+		const wrapper = mount(WtBreadcrumb, {
+			props: {
+				path,
+			},
+			global: {
+				stubs: {
+					RouterLink: {
+						template: '<a><slot /></a>',
+					},
+				},
+			},
+		});
+		const links = wrapper.findAll('a');
+		expect(links.length).toBe(1);
+		expect(links[0].text()).toBe('users');
+	});
+
+	it('renders a plain span for items without a route', () => {
+		const path = [
+			{
+				name: 'directory',
+			},
+		];
+		const wrapper = mount(WtBreadcrumb, {
+			props: {
+				path,
+			},
+			global: {
+				stubs: {
+					RouterLink: {
+						template: '<a><slot /></a>',
+					},
+				},
+			},
+		});
+		expect(wrapper.find('span.wt-breadcrumb__text').exists()).toBe(true);
+		expect(wrapper.find('a').exists()).toBe(false);
+	});
+
+	it('marks the last item with the last modifier class', () => {
+		const path = [
+			{
+				name: 'directory',
+			},
+			{
+				name: 'users',
+			},
+		];
+		const wrapper = mount(WtBreadcrumb, {
+			props: {
+				path,
+			},
+			global: {
+				stubs: {
+					RouterLink: {
+						template: '<a><slot /></a>',
+					},
+				},
+			},
+		});
+		const items = wrapper.findAll('.wt-breadcrumb__text');
+		expect(items.at(-1).classes()).toContain('wt-breadcrumb__text--last');
+		expect(items[0].classes()).not.toContain('wt-breadcrumb__text--last');
+	});
+});

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -1,6 +1,6 @@
 import { mount, shallowMount } from '@vue/test-utils';
 
-import WtSelectButton from '../wt-button-select.vue';
+import WtButtonSelect from '../wt-button-select.vue';
 
 // helps to mock @floating-ui/vue autoUpdate method
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -9,9 +9,9 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
 	disconnect: vi.fn(),
 }));
 
-describe('WtSelectButton', () => {
+describe('WtButtonSelect', () => {
 	it('renders a component', () => {
-		const wrapper = shallowMount(WtSelectButton, {
+		const wrapper = shallowMount(WtButtonSelect, {
 			props: {
 				options: [],
 			},
@@ -21,7 +21,7 @@ describe('WtSelectButton', () => {
 
 	it('renders a button content via default slot', () => {
 		const content = 'button content';
-		const wrapper = mount(WtSelectButton, {
+		const wrapper = mount(WtButtonSelect, {
 			props: {
 				options: [],
 			},
@@ -33,7 +33,7 @@ describe('WtSelectButton', () => {
 	});
 
 	it('emits click from main action button', async () => {
-		const wrapper = shallowMount(WtSelectButton, {
+		const wrapper = shallowMount(WtButtonSelect, {
 			props: {
 				options: [],
 			},
@@ -42,4 +42,36 @@ describe('WtSelectButton', () => {
 		await wrapper.find('.wt-button-select__button').trigger('click');
 		expect(wrapper.emitted().click).toBeTruthy();
 	});
+
+	it('passes disabled prop down to the main action button', () => {
+		const wrapper = shallowMount(WtButtonSelect, {
+			props: {
+				options: [],
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-button',
+				})
+				.props('disabled'),
+		).toBe(true);
+	});
+
+	it('passes color prop down to the main action button', () => {
+		const wrapper = shallowMount(WtButtonSelect, {
+			props: {
+				options: [],
+				color: 'secondary',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-button',
+				})
+				.props('color'),
+		).toBe('secondary');
+	});
 });

package/src/components/wt-call-media-metric/__tests__/WtCallMediaMetric.spec.js

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+
+import { ConnectionQualityLevels } from '../../../enums';
+import WtCallMediaMetric from '../wt-call-media-metric.vue';
+
+describe('WtCallMediaMetric', () => {
+	it('renders nothing when neither quality nor mosAvg is provided', () => {
+		const wrapper = mount(WtCallMediaMetric);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders an icon matching the quality prop when provided directly', () => {
+		const wrapper = mount(WtCallMediaMetric, {
+			props: {
+				quality: ConnectionQualityLevels.High,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('icon'),
+		).toBe(`ws-signal-${ConnectionQualityLevels.High}`);
+	});
+
+	it('derives quality from mosAvg when quality is not provided', () => {
+		const wrapper = mount(WtCallMediaMetric, {
+			props: {
+				mosAvg: 4.5,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('icon'),
+		).toBe(`ws-signal-${ConnectionQualityLevels.High}`);
+	});
+
+	it('quality prop takes precedence over mosAvg', () => {
+		const wrapper = mount(WtCallMediaMetric, {
+			props: {
+				quality: ConnectionQualityLevels.Low,
+				mosAvg: 4.5,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('icon'),
+		).toBe(`ws-signal-${ConnectionQualityLevels.Low}`);
+	});
+
+	it('renders nothing when mosAvg does not resolve to a quality', () => {
+		const wrapper = mount(WtCallMediaMetric);
+		expect(wrapper.html()).toBe('<!--v-if-->');
+	});
+
+	it('passes size prop down to the icon', () => {
+		const wrapper = mount(WtCallMediaMetric, {
+			props: {
+				quality: ConnectionQualityLevels.Medium,
+				size: 'lg',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('size'),
+		).toBe('lg');
+	});
+});

package/src/components/wt-card/__tests__/WtCard.spec.js

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtCard from '../wt-card.vue';
+
+describe('WtCard', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtCard);
+		expect(wrapper.classes('wt-card')).toBe(true);
+	});
+
+	it('renders content via default slot', () => {
+		const content = 'card content';
+		const wrapper = shallowMount(WtCard, {
+			slots: {
+				default: content,
+			},
+		});
+		expect(wrapper.text()).toContain(content);
+	});
+});

package/src/components/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -49,4 +49,67 @@ describe('WtCheckbox', () => {
 			!selected,
 		]);
 	});
+
+	it('treats array model value as multi-select and checks by value membership', () => {
+		const wrapper = mount(WtCheckbox, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				value: 'b',
+				selected: [
+					'a',
+					'b',
+				],
+			},
+		});
+		expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(true);
+	});
+
+	it('is not checked when value is not present in array model', () => {
+		const wrapper = mount(WtCheckbox, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				value: 'c',
+				selected: [
+					'a',
+					'b',
+				],
+			},
+		});
+		expect(wrapper.find('input[type="checkbox"]').element.checked).toBe(false);
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = mount(WtCheckbox, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				selected: false,
+			},
+		});
+		expect(wrapper.findComponent(WtLabel).exists()).toBe(false);
+	});
+
+	it('disables the underlying checkbox when disabled prop is true', () => {
+		const wrapper = mount(WtCheckbox, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				selected: false,
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper.find('input[type="checkbox"]').attributes('disabled'),
+		).toBeDefined();
+	});
 });

package/src/components/wt-chip/__tests__/WtChip.spec.js

@@ -17,4 +17,36 @@ describe('WtChip', () => {
 		});
 		expect(wrapper.text()).toContain(content);
 	});
+
+	it('applies the default main color class', () => {
+		const wrapper = shallowMount(WtChip);
+		expect(wrapper.classes()).toContain('p-chip-main');
+	});
+
+	it('applies a custom color class', () => {
+		const wrapper = shallowMount(WtChip, {
+			props: {
+				color: 'danger',
+			},
+		});
+		expect(wrapper.classes()).toContain('p-chip-danger');
+	});
+
+	it('does not render a remove button by default', () => {
+		const wrapper = mount(WtChip);
+		expect(wrapper.find('.wt-chip__close-icon').exists()).toBe(false);
+	});
+
+	it('renders a remove button and emits remove when removable', async () => {
+		const wrapper = mount(WtChip, {
+			props: {
+				removable: true,
+			},
+		});
+		const closeIcon = wrapper.find('.wt-chip__close-icon');
+		expect(closeIcon.exists()).toBe(true);
+
+		await closeIcon.trigger('click');
+		expect(wrapper.emitted().remove).toBeTruthy();
+	});
 });

package/src/components/wt-confirm-dialog/__tests__/WtConfirmDialog.spec.js

@@ -0,0 +1,92 @@
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+
+import WtConfirmDialog from '../wt-confirm-dialog.vue';
+
+describe('WtConfirmDialog', () => {
+	it('renders a component with the given title', () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-confirm-dialog');
+		expect(wrapper.text()).toContain('Delete item?');
+	});
+
+	it('renders the custom delete message when provided', () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				deleteMessage: 'Are you absolutely sure?',
+				callback: vi.fn(),
+			},
+		});
+		expect(wrapper.text()).toContain('Are you absolutely sure?');
+	});
+
+	it('emits close when the popup emits close', async () => {
+		const wrapper = shallowMount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-popup',
+			})
+			.vm.$emit('close');
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('emits close when cancel action button is clicked', async () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		const [cancelButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await cancelButton.trigger('click');
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('calls callback and emits close when confirm action button is clicked', async () => {
+		const callback = vi.fn().mockResolvedValue();
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback,
+			},
+		});
+		const [, confirmButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await confirmButton.trigger('click');
+		await flushPromises();
+
+		expect(callback).toHaveBeenCalled();
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('exposes isDeleting and confirm/close via the actions slot', () => {
+		const callback = vi.fn().mockResolvedValue();
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback,
+			},
+			slots: {
+				actions: `<template #actions="{ isDeleting, confirm, close }">
+					<span class="slot-check">{{ typeof isDeleting }}-{{ typeof confirm }}-{{ typeof close }}</span>
+				</template>`,
+			},
+		});
+		expect(wrapper.find('.slot-check').text()).toBe(
+			'boolean-function-function',
+		);
+	});
+});

package/src/components/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -1,7 +1,51 @@
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 
+import WtPopover from '../../wt-popover/wt-popover.vue';
 import WtContextMenu from '../wt-context-menu.vue';
 
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+/**
+ * wt-popover doesn't wire the `visible` prop through to PrimeVue's Popover — the
+ * panel only opens via the activator slot's imperative `show()`. Since the panel
+ * content is teleported to document.body, tests attach to the body and open it
+ * through a real activator before asserting on the option list.
+ */
+const mountOpen = (props) => {
+	const TestHost = {
+		components: {
+			WtContextMenu,
+		},
+		props: [
+			'options',
+			'disabled',
+		],
+		template: `
+			<WtContextMenu ref="contextMenu" :options="options" :disabled="disabled">
+				<template #activator="{ show }">
+					<button class="opener" @click="show">open</button>
+				</template>
+			</WtContextMenu>
+		`,
+	};
+	return mount(TestHost, {
+		props,
+		attachTo: document.body,
+		global: {
+			stubs: {
+				WtPopover: false,
+			},
+			components: {
+				WtPopover,
+			},
+		},
+	});
+};
+
 describe('WtContextMenu', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtContextMenu, {
@@ -11,4 +55,105 @@ describe('WtContextMenu', () => {
 		});
 		expect(wrapper.classes('wt-context-menu')).toBe(true);
 	});
+
+	it('renders an option for each entry once opened', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items.length).toBe(options.length);
+		expect(items[0].textContent.trim()).toBe('Option 1');
+		expect(items[1].textContent.trim()).toBe('Option 2');
+
+		wrapper.unmount();
+	});
+
+	it('renders plain string options via their string value', async () => {
+		const options = [
+			'Foo',
+			'Bar',
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items[0].textContent.trim()).toBe('Foo');
+		expect(items[1].textContent.trim()).toBe('Bar');
+
+		wrapper.unmount();
+	});
+
+	it('emits click with the option and index when an option is clicked', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		document.body.querySelectorAll('.wt-context-menu__option')[1].click();
+		await flushPromises();
+
+		const contextMenu = wrapper.findComponent({
+			ref: 'contextMenu',
+		});
+		expect(contextMenu.emitted().click[0]).toEqual([
+			{
+				option: options[1],
+				index: 1,
+			},
+		]);
+
+		wrapper.unmount();
+	});
+
+	it('applies the disabled modifier class to disabled options', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+				disabled: true,
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items[0].classList).toContain('wt-context-menu__option--disabled');
+		expect(items[1].classList).not.toContain(
+			'wt-context-menu__option--disabled',
+		);
+
+		wrapper.unmount();
+	});
 });

package/src/components/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,57 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+
+vi.mock('clipboard-copy', () => ({
+	default: vi.fn().mockResolvedValue(),
+}));
+
+import copy from 'clipboard-copy';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+		copy.mockClear();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtCopyAction);
+		expect(wrapper.classes()).toContain('copy-action');
+	});
+
+	it('renders the copy icon by default', () => {
+		const wrapper = shallowMount(WtCopyAction);
+		expect(wrapper.attributes('icon')).toBe('copy');
+	});
+
+	it('copies the value prop when clicked', async () => {
+		const wrapper = shallowMount(WtCopyAction, {
+			props: {
+				value: 'hello world',
+			},
+		});
+		await wrapper.trigger('click');
+		await flushPromises();
+		expect(copy).toHaveBeenCalledWith('hello world');
+	});
+
+	it('shows the done icon after copying, then reverts after the timeout', async () => {
+		const wrapper = shallowMount(WtCopyAction, {
+			props: {
+				value: 'hello world',
+			},
+		});
+		await wrapper.trigger('click');
+		await flushPromises();
+
+		expect(wrapper.attributes('icon')).toBe('done');
+
+		vi.advanceTimersByTime(1500);
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.attributes('icon')).toBe('copy');
+	});
+});