@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-avatar/__tests__/WtAvatar.spec.js

@@ -0,0 +1,111 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum.js';
+import WtAvatar from '../wt-avatar.vue';
+
+describe('WtAvatar', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtAvatar);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders an image when src is provided', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				src: 'http://example.com/pic.png',
+			},
+		});
+		const img = wrapper.find('.wt-avatar__img');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('http://example.com/pic.png');
+	});
+
+	it('renders "N/A" letters when no src or username is provided', () => {
+		const wrapper = mount(WtAvatar);
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('N/A');
+	});
+
+	it('renders letters from username when src is not provided', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'John Doe',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('JD');
+	});
+
+	it('renders single letter for a single-word username', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'Cher',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('C');
+	});
+
+	it('renders bot icon when bot prop is true, ignoring username/src', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				bot: true,
+				username: 'John Doe',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__bot').exists()).toBe(true);
+		expect(wrapper.find('.wt-avatar__letters-text').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+	});
+
+	it('does not render a badge by default', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'John Doe',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-badge',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders a badge for eligible statuses when badge is true', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				badge: true,
+				status: AbstractUserStatus.ONLINE,
+			},
+		});
+		const badge = wrapper.findComponent({
+			name: 'wt-badge',
+		});
+		expect(badge.exists()).toBe(true);
+		expect(badge.props('iconBadge')).toBe(AbstractUserStatus.ONLINE);
+	});
+
+	it('renders a badge without an icon for non-eligible statuses when badge is true', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				badge: true,
+				status: AbstractUserStatus.OFFLINE,
+			},
+		});
+		const badge = wrapper.findComponent({
+			name: 'wt-badge',
+		});
+		expect(badge.exists()).toBe(true);
+		expect(badge.props('iconBadge')).toBe(null);
+	});
+
+	it('applies the size class', () => {
+		const wrapper = shallowMount(WtAvatar, {
+			props: {
+				size: 'lg',
+			},
+		});
+		expect(wrapper.classes()).toContain('p-avatar-lg');
+	});
+});

package/src/components/wt-badge/__tests__/WtBadge.spec.js

@@ -0,0 +1,80 @@
+import { shallowMount } from '@vue/test-utils';
+
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum.js';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtBadge);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('applies compat-mode class when there is no default slot content', () => {
+		const wrapper = shallowMount(WtBadge);
+		expect(wrapper.classes()).toContain('wt-badge--compat-mode');
+	});
+
+	it('does not apply compat-mode class when default slot has content', () => {
+		const wrapper = shallowMount(WtBadge, {
+			slots: {
+				default: 'content',
+			},
+		});
+		expect(wrapper.classes()).not.toContain('wt-badge--compat-mode');
+	});
+
+	it('applies the outside class when outside prop is true', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				outside: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-badge--outside');
+	});
+
+	it('hides the indicator when hidden prop is true', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				hidden: true,
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator').attributes('style')).toContain(
+			'display: none',
+		);
+	});
+
+	it('does not render an icon pic when iconBadge is not a known status', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				iconBadge: 'unknown',
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator__pic').exists()).toBe(false);
+	});
+
+	it.each([
+		AbstractUserStatus.DND,
+		AbstractUserStatus.ONLINE,
+		AbstractUserStatus.PAUSE,
+	])('renders an icon pic for iconBadge=%s', (status) => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				iconBadge: status,
+			},
+		});
+		const pic = wrapper.find('.wt-badge-indicator__pic');
+		expect(pic.exists()).toBe(true);
+		expect(pic.attributes('alt')).toBe(status);
+	});
+
+	it('applies the colorVariable as background color', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				colorVariable: 'success-color',
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator').attributes('style')).toContain(
+			'var(--success-color)',
+		);
+	});
+});

package/src/components/wt-badge-new/__tests__/WtBadge.spec.js

@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils';
+
+import { ComponentSize } from '../../../enums';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge (new)', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtBadge);
+		expect(wrapper.classes()).toContain('wt-badge');
+	});
+
+	it('renders the value prop', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				value: '5',
+			},
+		});
+		expect(wrapper.text()).toContain('5');
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(WtBadge, {
+			slots: {
+				default: 'slot content',
+			},
+		});
+		expect(wrapper.text()).toContain('slot content');
+	});
+
+	it('applies the default md size class', () => {
+		const wrapper = mount(WtBadge);
+		expect(wrapper.classes()).toContain(`p-badge--${ComponentSize.MD}`);
+	});
+
+	it('applies a custom size class', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				size: ComponentSize.SM,
+			},
+		});
+		expect(wrapper.classes()).toContain(`p-badge--${ComponentSize.SM}`);
+	});
+
+	it('applies a severity class when provided', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				severity: 'success',
+			},
+		});
+		expect(wrapper.classes()).toContain('p-badge--success');
+	});
+
+	it('does not apply a severity class when severity is null', () => {
+		const wrapper = mount(WtBadge);
+		expect(
+			wrapper
+				.classes()
+				.some((c) => c.startsWith('p-badge--') && c !== 'p-badge--md'),
+		).toBe(false);
+	});
+});

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