@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-image/__tests__/WtImage.spec.js

@@ -0,0 +1,83 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtImage from '../wt-image.vue';
+
+describe('WtImage', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtImage);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('applies width/height in px based on the size preset', () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				size: 'sm',
+				src: 'pic.png',
+			},
+		});
+		expect(wrapper.attributes('style')).toContain('width: 128px');
+		expect(wrapper.attributes('style')).toContain('height: 128px');
+	});
+
+	it('uses explicit width/height props when size is not passed', () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				width: '50%',
+				height: 300,
+				src: 'pic.png',
+			},
+		});
+		expect(wrapper.attributes('style')).toContain('width: 50%');
+		expect(wrapper.attributes('style')).toContain('height: 300px');
+	});
+
+	it('does not render an overlay icon by default', () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				src: 'pic.png',
+			},
+		});
+		expect(wrapper.find('.wt-image__overlay-icon').exists()).toBe(false);
+	});
+
+	it('renders an overlay icon and uses a pointer cursor when overlayIcon is set', () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				overlayIcon: 'edit',
+				src: 'pic.png',
+			},
+		});
+		expect(wrapper.find('.wt-image__overlay-icon').exists()).toBe(true);
+		expect(wrapper.attributes('style')).toContain('cursor: pointer');
+	});
+
+	it('emits click when clicked', async () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				src: 'pic.png',
+			},
+		});
+		await wrapper.trigger('click');
+		expect(wrapper.emitted().click).toBeTruthy();
+	});
+
+	it('renders custom content via default slot instead of the image', () => {
+		const wrapper = shallowMount(WtImage, {
+			props: {
+				src: 'pic.png',
+				alt: 'Alt text',
+			},
+			slots: {
+				default: `<template #default="{ src, alt }"><span class="custom">{{ src }}-{{ alt }}</span></template>`,
+			},
+		});
+		expect(wrapper.find('.custom').text()).toBe('pic.png-Alt text');
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Image',
+				})
+				.exists(),
+		).toBe(false);
+	});
+});

package/src/components/wt-indicator/__tests__/WtIndicator.spec.js

@@ -28,4 +28,27 @@ describe('WtIndicator', () => {
 			'wt-indicator__indicator--primary',
 		);
 	});
+
+	it('does not render text when text prop is not passed', () => {
+		const wrapper = shallowMount(WtIndicator);
+		expect(wrapper.find('.wt-indicator__text').exists()).toBe(false);
+	});
+
+	it('renders numeric text values', () => {
+		const wrapper = shallowMount(WtIndicator, {
+			props: {
+				text: 0,
+			},
+		});
+		expect(wrapper.find('.wt-indicator__text').text()).toBe('0');
+	});
+
+	it('applies the size modifier class', () => {
+		const wrapper = shallowMount(WtIndicator, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-indicator--size-sm');
+	});
 });

package/src/components/wt-input-number/__tests__/WtInputNumber.spec.js

@@ -0,0 +1,77 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtInputNumber from '../wt-input-number.vue';
+
+describe('WtInputNumber', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtInputNumber);
+		expect(wrapper.classes()).toContain('wt-input-number');
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtInputNumber);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders the label text when passed', () => {
+		const wrapper = mount(WtInputNumber, {
+			props: {
+				label: 'Amount',
+			},
+		});
+		expect(wrapper.find('.wt-label').text()).toBe('Amount');
+	});
+
+	it('appends an asterisk to the label when required', () => {
+		const wrapper = mount(WtInputNumber, {
+			props: {
+				label: 'Amount',
+				required: true,
+			},
+		});
+		expect(wrapper.find('.wt-label').text()).toBe('Amount*');
+	});
+
+	it('passes disabled and modelValue down to the underlying input', () => {
+		const wrapper = mount(WtInputNumber, {
+			props: {
+				disabled: true,
+				modelValue: 42,
+			},
+		});
+		const input = wrapper.findComponent({
+			name: 'InputNumber',
+		});
+		expect(input.props('disabled')).toBe(true);
+		expect(input.props('modelValue')).toBe(42);
+	});
+
+	it('emits update:modelValue when the underlying input changes', async () => {
+		const wrapper = mount(WtInputNumber);
+		const input = wrapper.findComponent({
+			name: 'InputNumber',
+		});
+		await input.vm.$emit('update:model-value', 7);
+		expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			7,
+		]);
+	});
+
+	it('renders prefix and suffix slots', () => {
+		const wrapper = mount(WtInputNumber, {
+			slots: {
+				prefix: '$',
+				suffix: 'USD',
+			},
+		});
+		expect(wrapper.text()).toContain('$');
+		expect(wrapper.text()).toContain('USD');
+	});
+});

package/src/components/wt-input-text/__tests__/WtInputText.spec.js

@@ -0,0 +1,85 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtInputText from '../wt-input-text.vue';
+
+describe('WtInputText', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtInputText);
+		expect(wrapper.classes()).toContain('wt-input-text');
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtInputText);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders the label text when passed', () => {
+		const wrapper = mount(WtInputText, {
+			props: {
+				label: 'Name',
+			},
+		});
+		expect(wrapper.find('.wt-label').text()).toBe('Name');
+	});
+
+	it('trims the value by default on input', () => {
+		const wrapper = mount(WtInputText);
+		const input = wrapper.findComponent({
+			name: 'InputText',
+		});
+		input.vm.$emit('update:model-value', '  hello  ');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			'hello',
+		]);
+	});
+
+	it('does not trim the value when preventTrim is true', () => {
+		const wrapper = mount(WtInputText, {
+			props: {
+				preventTrim: true,
+			},
+		});
+		const input = wrapper.findComponent({
+			name: 'InputText',
+		});
+		input.vm.$emit('update:model-value', '  hello  ');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			'  hello  ',
+		]);
+	});
+
+	it('toggles the eye icon and masks the input when hideInputValue is true', async () => {
+		const wrapper = mount(WtInputText, {
+			props: {
+				hideInputValue: true,
+				modelValue: 'secret',
+			},
+		});
+		const input = wrapper.find('.wt-input-text__input');
+		expect(input.classes()).toContain('wt-input-text__input--masked');
+
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.trigger('click');
+		expect(wrapper.find('.wt-input-text__input').classes()).not.toContain(
+			'wt-input-text__input--masked',
+		);
+	});
+
+	it('emits focus when the underlying input is focused', async () => {
+		const wrapper = mount(WtInputText);
+		const input = wrapper.findComponent({
+			name: 'InputText',
+		});
+		await input.vm.$emit('focus', new Event('focus'));
+		expect(wrapper.emitted().focus).toBeTruthy();
+	});
+});

package/src/components/wt-intersection-observer/__tests__/WtIntersectionObserver.spec.js

@@ -3,13 +3,34 @@ import { shallowMount } from '@vue/test-utils';
 import WtIntersectionObserver from '../wt-intersection-observer.vue';
 
 describe('WtIntersectionObserver', () => {
-	const next = () => true;
 	it('renders a component', () => {
+		const wrapper = shallowMount(WtIntersectionObserver);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('does not render a loader by default', () => {
+		const wrapper = shallowMount(WtIntersectionObserver);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-loader',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders a loader when loading is true', () => {
 		const wrapper = shallowMount(WtIntersectionObserver, {
 			props: {
-				next,
+				loading: true,
 			},
 		});
-		expect(wrapper.exists()).toBe(true);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-loader',
+				})
+				.exists(),
+		).toBe(true);
 	});
 });

package/src/components/wt-item-link/__tests__/WtItemLink.spec.js

@@ -2,9 +2,101 @@ import { shallowMount } from '@vue/test-utils';
 
 import WtItemLink from '../wt-item-link.vue';
 
+const stubs = {
+	RouterLink: {
+		props: [
+			'to',
+			'target',
+		],
+		template:
+			'<a :href="typeof to === \'string\' ? to : JSON.stringify(to)" :target="target"><slot /></a>',
+	},
+};
+
 describe('WtItemLink', () => {
 	it('renders a component', () => {
-		const wrapper = shallowMount(WtItemLink);
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+		});
 		expect(wrapper.exists()).toBe(true);
 	});
+
+	it('renders default slot content', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+			slots: {
+				default: 'Link text',
+			},
+		});
+		expect(wrapper.text()).toBe('Link text');
+	});
+
+	it('uses the link prop as the route target when provided', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+			props: {
+				link: '/directory/users/3',
+			},
+		});
+		expect(wrapper.attributes('href')).toBe('/directory/users/3');
+	});
+
+	it('builds a route from the deprecated routeName/id props when link is not provided', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+			props: {
+				routeName: 'users',
+				id: 3,
+			},
+		});
+		expect(wrapper.attributes('href')).toBe(
+			JSON.stringify({
+				name: 'users-edit',
+				params: {
+					id: 3,
+				},
+			}),
+		);
+	});
+
+	it('applies the disabled class', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+			props: {
+				disabled: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-item-link--disabled');
+	});
+
+	it('applies the invisible class', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+			props: {
+				invisible: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-item-link--invisible');
+	});
+
+	it('defaults target to _self and forwards a custom target', () => {
+		const wrapper = shallowMount(WtItemLink, {
+			global: {
+				stubs,
+			},
+		});
+		expect(wrapper.attributes('target')).toBe('_self');
+	});
 });

package/src/components/wt-label/__tests__/WtLabel.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtLabel from '../wt-label.vue';
 
@@ -7,4 +7,52 @@ describe('WtLabel', () => {
 		const wrapper = shallowMount(WtLabel);
 		expect(wrapper.classes('wt-label')).toBe(true);
 	});
+
+	it('renders default slot content', () => {
+		const wrapper = shallowMount(WtLabel, {
+			slots: {
+				default: 'Field label',
+			},
+		});
+		expect(wrapper.text()).toContain('Field label');
+	});
+
+	it('applies disabled/invalid/required modifier classes', () => {
+		const wrapper = shallowMount(WtLabel, {
+			props: {
+				disabled: true,
+				invalid: true,
+				required: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-label--disabled');
+		expect(wrapper.classes()).toContain('wt-label--invalid');
+		expect(wrapper.classes()).toContain('wt-label--required');
+	});
+
+	it('does not render a hint by default', () => {
+		const wrapper = shallowMount(WtLabel);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-hint',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders a hint when the hint prop is passed', async () => {
+		const wrapper = mount(WtLabel, {
+			props: {
+				hint: 'Extra info',
+			},
+		});
+		const hint = wrapper.findComponent({
+			name: 'wt-hint',
+		});
+		expect(hint.exists()).toBe(true);
+
+		await hint.find('.wt-tooltip__activator').trigger('mouseenter');
+		expect(wrapper.text()).toContain('Extra info');
+	});
 });

package/src/components/wt-load-bar/__tests__/WtLoadBar.spec.js

@@ -7,4 +7,53 @@ describe('WtLoadBar', () => {
 		const wrapper = shallowMount(WtLoadBar);
 		expect(wrapper.exists()).toBe(true);
 	});
+
+	it('renders 0% width by default', () => {
+		const wrapper = shallowMount(WtLoadBar);
+		expect(wrapper.find('.wt-load-bar__progress').attributes('style')).toBe(
+			'width: 0%;',
+		);
+	});
+
+	it('computes progress width as a percentage of value/max', () => {
+		const wrapper = shallowMount(WtLoadBar, {
+			props: {
+				value: 25,
+				max: 50,
+			},
+		});
+		expect(wrapper.find('.wt-load-bar__progress').attributes('style')).toBe(
+			'width: 50%;',
+		);
+	});
+
+	// NOTE: progressWidth references `this.isOverflow`, which is never defined
+	// (no such data/computed property exists), so it's always undefined/falsy.
+	// Progress width is therefore never clamped to 100 and can overflow past
+	// it when value > max — documenting the current (likely unintended) behavior.
+	it('does not clamp progress width when value exceeds max', () => {
+		const wrapper = shallowMount(WtLoadBar, {
+			props: {
+				value: 150,
+				max: 100,
+			},
+		});
+		expect(wrapper.find('.wt-load-bar__progress').attributes('style')).toBe(
+			'width: 150%;',
+		);
+	});
+
+	it('applies the default primary color class', () => {
+		const wrapper = shallowMount(WtLoadBar);
+		expect(wrapper.classes()).toContain('wt-load-bar--color-primary');
+	});
+
+	it('applies a custom color class', () => {
+		const wrapper = shallowMount(WtLoadBar, {
+			props: {
+				color: 'error',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-load-bar--color-error');
+	});
 });

package/src/components/wt-loader/__tests__/WtLoader.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtLoader from '../wt-loader.vue';
 
@@ -7,4 +7,29 @@ describe('WtLoader', () => {
 		const wrapper = shallowMount(WtLoader);
 		expect(wrapper.classes('wt-loader')).toBe(true);
 	});
+
+	it('renders the brand loader by default (size md)', () => {
+		const wrapper = mount(WtLoader);
+		expect(wrapper.classes()).toContain('wt-brand-loader');
+	});
+
+	it('renders the spinner loader for non-md sizes', () => {
+		const wrapper = mount(WtLoader, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-spinner-loader');
+		expect(wrapper.classes()).toContain('wt-spinner-loader--sm');
+	});
+
+	it('applies the color to the spinner loader', () => {
+		const wrapper = mount(WtLoader, {
+			props: {
+				size: 'xs',
+				color: 'icon',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-spinner-loader--icon');
+	});
 });

package/src/components/wt-logo/__tests__/WtLogo.spec.js

@@ -0,0 +1,55 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtLogo from '../wt-logo.vue';
+
+describe('WtLogo', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtLogo);
+		expect(wrapper.exists()).toBeTruthy();
+	});
+
+	it('renders an anchor with logoHref by default', () => {
+		const wrapper = shallowMount(WtLogo, {
+			props: {
+				logoHref: 'https://example.com',
+			},
+		});
+		expect(wrapper.element.tagName).toBe('A');
+		expect(wrapper.attributes('href')).toBe('https://example.com');
+	});
+
+	it('renders a router-link when logoRoute is provided', () => {
+		const wrapper = shallowMount(WtLogo, {
+			props: {
+				logoRoute: '/home',
+			},
+			global: {
+				stubs: {
+					RouterLink: {
+						props: [
+							'to',
+						],
+						template: '<a :href="to"><slot /></a>',
+					},
+				},
+			},
+		});
+		expect(wrapper.attributes('href')).toBe('/home');
+	});
+
+	it('renders a plain span with no link attrs when disabled', () => {
+		const wrapper = shallowMount(WtLogo, {
+			props: {
+				disabled: true,
+				logoHref: 'https://example.com',
+			},
+		});
+		expect(wrapper.element.tagName).toBe('SPAN');
+		expect(wrapper.attributes('href')).toBeUndefined();
+	});
+
+	it('renders the logo image', () => {
+		const wrapper = shallowMount(WtLogo);
+		expect(wrapper.find('img.wt-logo').attributes('alt')).toBe('Webitel');
+	});
+});

package/src/components/wt-menubar/__tests__/WtMenubar.spec.js

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+
+import WtMenubar from '../wt-menubar.vue';
+
+describe('WtMenubar', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtMenubar);
+		expect(wrapper.classes()).toContain('wt-menubar');
+	});
+
+	it('forwards named slots through to PMenubar, excluding default', () => {
+		const wrapper = mount(WtMenubar, {
+			slots: {
+				start: 'Start content',
+				end: 'End content',
+			},
+		});
+		expect(wrapper.text()).toContain('Start content');
+		expect(wrapper.text()).toContain('End content');
+	});
+
+	it('does not render default slot content', () => {
+		const wrapper = mount(WtMenubar, {
+			slots: {
+				default: 'Default content',
+			},
+		});
+		expect(wrapper.text()).not.toContain('Default content');
+	});
+});

package/src/components/wt-message/__tests__/WtMessage.spec.js

@@ -0,0 +1,46 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import { MessageColor, MessageVariant } from '../../../enums';
+import WtMessage from '../wt-message.vue';
+
+describe('WtMessage', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtMessage);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Message',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('applies default color, variant and size', () => {
+		const wrapper = shallowMount(WtMessage);
+		expect(wrapper.attributes('severity')).toBe(MessageColor.SECONDARY);
+		expect(wrapper.attributes('variant')).toBe(MessageVariant.FILLED);
+		expect(wrapper.attributes('size')).toBe('normal');
+	});
+
+	it('maps custom color, variant and size props', () => {
+		const wrapper = shallowMount(WtMessage, {
+			props: {
+				color: MessageColor.ERROR,
+				variant: MessageVariant.SIMPLE,
+				size: 'sm',
+			},
+		});
+		expect(wrapper.attributes('severity')).toBe(MessageColor.ERROR);
+		expect(wrapper.attributes('variant')).toBe(MessageVariant.SIMPLE);
+		expect(wrapper.attributes('size')).toBe('small');
+	});
+
+	it('renders default slot content', () => {
+		const wrapper = mount(WtMessage, {
+			slots: {
+				default: 'Something happened',
+			},
+		});
+		expect(wrapper.text()).toContain('Something happened');
+	});
+});