@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-multi-select/__tests__/WtMultiSelect.spec.js

@@ -0,0 +1,106 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtMultiSelect from '../wt-multi-select.vue';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+describe('WtMultiSelect', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtMultiSelect);
+		expect(wrapper.classes()).toContain('wt-multi-select');
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtMultiSelect);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders the label text when passed', () => {
+		const wrapper = mount(WtMultiSelect, {
+			props: {
+				label: 'Choose options',
+			},
+		});
+		expect(wrapper.find('.wt-select__label').text()).toBe('Choose options');
+	});
+
+	it('appends an asterisk to the label when required', () => {
+		const wrapper = mount(WtMultiSelect, {
+			props: {
+				label: 'Choose options',
+				required: true,
+			},
+		});
+		expect(wrapper.find('.wt-select__label').text()).toBe('Choose options*');
+	});
+
+	it('passes disabled down to the underlying multiselect', () => {
+		const wrapper = shallowMount(WtMultiSelect, {
+			props: {
+				disabled: true,
+			},
+		});
+		const select = wrapper.findComponent({
+			name: 'MultiSelect',
+		});
+		expect(select.attributes('disabled')).toBe('true');
+	});
+
+	it('normalizes the model to an array', () => {
+		const wrapper = mount(WtMultiSelect, {
+			props: {
+				modelValue: null,
+			},
+		});
+		const select = wrapper.findComponent({
+			name: 'MultiSelect',
+		});
+		expect(select.props('modelValue')).toEqual([]);
+	});
+
+	it('displays chips when chipsView is true', () => {
+		const wrapper = shallowMount(WtMultiSelect, {
+			props: {
+				chipsView: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'MultiSelect',
+				})
+				.attributes('display'),
+		).toBe('chip');
+	});
+
+	it('displays comma-separated values by default', () => {
+		const wrapper = shallowMount(WtMultiSelect);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'MultiSelect',
+				})
+				.attributes('display'),
+		).toBe('comma');
+	});
+
+	it('emits hide when the dropdown hides', async () => {
+		const wrapper = shallowMount(WtMultiSelect);
+		await wrapper
+			.findComponent({
+				name: 'MultiSelect',
+			})
+			.vm.$emit('hide');
+		expect(wrapper.emitted().hide).toBeTruthy();
+	});
+});

package/src/components/wt-page-header/__tests__/WtPageHeader.spec.js

@@ -0,0 +1,111 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtPageHeader from '../wt-page-header.vue';
+
+describe('WtPageHeader', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtPageHeader);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders default slot content in the title wrapper', () => {
+		const wrapper = mount(WtPageHeader, {
+			slots: {
+				default: 'Header content',
+			},
+		});
+		expect(wrapper.text()).toContain('Header content');
+	});
+
+	it('renders title slot content', () => {
+		const wrapper = mount(WtPageHeader, {
+			slots: {
+				title: 'Page title',
+			},
+		});
+		expect(wrapper.text()).toContain('Page title');
+	});
+
+	it('renders a default primary button labeled "Add" that emits primaryAction on click', async () => {
+		const primaryAction = vi.fn();
+		const wrapper = mount(WtPageHeader, {
+			props: {
+				primaryAction,
+			},
+		});
+		const [primaryButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		expect(primaryButton.text()).toBe('Add');
+
+		await primaryButton.trigger('click');
+		expect(primaryAction).toHaveBeenCalled();
+	});
+
+	it('uses custom primaryText and disables the primary button', () => {
+		const wrapper = mount(WtPageHeader, {
+			props: {
+				primaryText: 'Create',
+				primaryDisabled: true,
+			},
+		});
+		const [primaryButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		expect(primaryButton.text()).toBe('Create');
+		expect(primaryButton.attributes('disabled')).toBeDefined();
+	});
+
+	it('hides the primary button when hidePrimary is true', () => {
+		const wrapper = mount(WtPageHeader, {
+			props: {
+				hidePrimary: true,
+			},
+		});
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-button',
+			}).length,
+		).toBe(0);
+	});
+
+	it('does not render a secondary button by default', () => {
+		const wrapper = mount(WtPageHeader);
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-button',
+			}).length,
+		).toBe(1);
+	});
+
+	it('renders a secondary button when secondaryText or secondaryAction is provided', async () => {
+		const secondaryAction = vi.fn();
+		const wrapper = mount(WtPageHeader, {
+			props: {
+				secondaryAction,
+			},
+		});
+		const buttons = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		expect(buttons.length).toBe(2);
+		expect(buttons[1].text()).toBe('Close');
+
+		await buttons[1].trigger('click');
+		expect(secondaryAction).toHaveBeenCalled();
+	});
+
+	it('hides the secondary button when hideSecondary is true even with secondaryText set', () => {
+		const wrapper = mount(WtPageHeader, {
+			props: {
+				hideSecondary: true,
+				secondaryText: 'Cancel',
+			},
+		});
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-button',
+			}).length,
+		).toBe(1);
+	});
+});

package/src/components/wt-password/__tests__/WtPassword.spec.js

@@ -0,0 +1,107 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtPassword from '../wt-password.vue';
+
+describe('WtPassword', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtPassword);
+		expect(wrapper.classes()).toContain('wt-password');
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtPassword);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders the label text when passed', () => {
+		const wrapper = mount(WtPassword, {
+			props: {
+				label: 'Password',
+			},
+		});
+		expect(wrapper.find('.wt-label').text()).toBe('Password');
+	});
+
+	it('renders a mask toggle button by default', () => {
+		const wrapper = mount(WtPassword);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('does not render a mask toggle button when toggleMask is false', () => {
+		const wrapper = mount(WtPassword, {
+			props: {
+				toggleMask: false,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('toggles the input type and icon when the mask toggle is clicked', async () => {
+		const wrapper = mount(WtPassword);
+		const toggleBtn = wrapper.findComponent({
+			name: 'wt-icon-btn',
+		});
+		expect(toggleBtn.attributes('icon')).toBe('eye--opened');
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Password',
+				})
+				.props('inputProps'),
+		).toEqual({
+			type: 'password',
+		});
+
+		await toggleBtn.trigger('click');
+
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('icon'),
+		).toBe('eye--closed');
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Password',
+				})
+				.props('inputProps'),
+		).toEqual({
+			type: 'text',
+		});
+	});
+
+	it('passes disabled down to the underlying password input', () => {
+		const wrapper = mount(WtPassword, {
+			props: {
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Password',
+				})
+				.props('disabled'),
+		).toBe(true);
+	});
+});

package/src/components/wt-popover/__tests__/WtPopover.spec.js

@@ -0,0 +1,73 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import WtPopover from '../wt-popover.vue';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+describe('WtPopover', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtPopover);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders the activator slot content', () => {
+		const wrapper = mount(WtPopover, {
+			slots: {
+				activator: '<button class="opener">open</button>',
+			},
+		});
+		expect(wrapper.find('.opener').exists()).toBe(true);
+	});
+
+	it('opens the panel when show() is called via the activator slot', async () => {
+		const wrapper = mount(WtPopover, {
+			attachTo: document.body,
+			slots: {
+				activator: `<template #activator="{ show }"><button class="opener" @click="show">open</button></template>`,
+				default: 'Popover content',
+			},
+		});
+		await flushPromises();
+
+		expect(document.body.textContent).not.toContain('Popover content');
+
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		expect(document.body.textContent).toContain('Popover content');
+
+		wrapper.unmount();
+	});
+
+	it('does not open when disabled is true', async () => {
+		const wrapper = mount(WtPopover, {
+			attachTo: document.body,
+			props: {
+				disabled: true,
+			},
+			slots: {
+				activator: `<template #activator="{ show }"><button class="opener" @click="show">open</button></template>`,
+				default: 'Popover content',
+			},
+		});
+		await flushPromises();
+
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		expect(document.body.textContent).not.toContain('Popover content');
+
+		wrapper.unmount();
+	});
+
+	it('exposes show, hide and toggle methods', () => {
+		const wrapper = mount(WtPopover);
+		expect(typeof wrapper.vm.show).toBe('function');
+		expect(typeof wrapper.vm.hide).toBe('function');
+		expect(typeof wrapper.vm.toggle).toBe('function');
+	});
+});

package/src/components/wt-progress-bar/__tests__/WtProgressBar.spec.js

@@ -25,4 +25,38 @@ describe('WtProgressBar', () => {
 		});
 		expect(wrapper.vm.isOverflow).toBe(false);
 	});
+
+	it('clamps progress width to 100% when value exceeds max', () => {
+		const wrapper = shallowMount(WtProgressBar, {
+			props: {
+				value: 150,
+				max: 100,
+			},
+		});
+		expect(wrapper.find('.wt-progress-bar__progress').attributes('style')).toBe(
+			'width: 100%;',
+		);
+		expect(wrapper.classes()).toContain('wt-progress-bar--overflow');
+	});
+
+	it('computes progress width as a percentage when not overflowing', () => {
+		const wrapper = shallowMount(WtProgressBar, {
+			props: {
+				value: 25,
+				max: 50,
+			},
+		});
+		expect(wrapper.find('.wt-progress-bar__progress').attributes('style')).toBe(
+			'width: 50%;',
+		);
+	});
+
+	it('applies the color modifier class', () => {
+		const wrapper = shallowMount(WtProgressBar, {
+			props: {
+				color: 'error',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-progress-bar--error');
+	});
 });

package/src/components/wt-radio/__tests__/WtRadio.spec.js

@@ -53,4 +53,49 @@ describe('WtRadio', () => {
 			value,
 		]);
 	});
+
+	it('checks the radio input when value matches selected', () => {
+		const wrapper = mount(WtRadio, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				selected: 'v',
+				value: 'v',
+			},
+		});
+		expect(wrapper.find('input[type="radio"]').element.checked).toBe(true);
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = mount(WtRadio, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				selected: '',
+				value: 'v',
+			},
+		});
+		expect(wrapper.findComponent(WtLabel).exists()).toBe(false);
+	});
+
+	it('disables the underlying radio when disabled prop is true', () => {
+		const wrapper = mount(WtRadio, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				selected: '',
+				value: 'v',
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper.find('input[type="radio"]').attributes('disabled'),
+		).toBeDefined();
+	});
 });

package/src/components/wt-rounded-action/__tests__/WtRoundedAction.spec.js

@@ -109,4 +109,52 @@ describe('WtRoundedAction', () => {
 		).toBe(true);
 		vi.useRealTimers();
 	});
+
+	it('uses "default" icon color for the default secondary color', () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('color'),
+		).toBe('default');
+	});
+
+	it('uses "disabled" icon color when disabled, overriding the color prop', () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+				color: 'primary',
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('color'),
+		).toBe('disabled');
+	});
+
+	it('passes through non-secondary colors to the icon', () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+				color: 'error',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.props('color'),
+		).toBe('error');
+	});
 });

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { ref } from 'vue';
 
 import { useValidation } from '../../../mixins/validationMixin/useValidation';
@@ -12,6 +12,14 @@ useValidation.mockImplementation(() => ({
 }));
 
 describe('WtSearchBar', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtSearchBar, {
 			stubs: {
@@ -22,24 +30,77 @@ describe('WtSearchBar', () => {
 		expect(wrapper.classes('wt-search-bar')).toBe(true);
 	});
 
-	it('debounces search event when debounce prop is true', async () => {
-		const props = {
-			value: '',
-			debounce: true,
-			debounceDelay: 100,
-		};
+	it('emits input immediately and search after the debounce delay', () => {
+		const wrapper = shallowMount(WtSearchBar, {
+			stubs: {
+				WtIcon: true,
+				WtIconBtn: true,
+			},
+		});
+		const input = wrapper.findComponent({
+			name: 'wt-input-text',
+		});
+		input.vm.$emit('update:model-value', 'val');
+
+		expect(wrapper.emitted().input[0]).toEqual([
+			'val',
+		]);
+		expect(wrapper.emitted().search).toBeFalsy();
+
+		vi.advanceTimersByTime(1000);
+		expect(wrapper.emitted().search[0]).toEqual([
+			'val',
+		]);
+	});
+
+	it('does not render the suffix controls without a value, hint or searchMode', () => {
 		const wrapper = shallowMount(WtSearchBar, {
 			stubs: {
 				WtIcon: true,
 				WtIconBtn: true,
 			},
-			props,
 		});
-		props.value = 'val';
-		wrapper.setProps(props);
+		expect(wrapper.find('.wt-search-bar__icon-controls').exists()).toBe(false);
+	});
+
+	it('renders a reset button that clears the value when a value is present', async () => {
+		const wrapper = mount(WtSearchBar, {
+			props: {
+				value: 'something',
+			},
+		});
+		const resetBtn = wrapper.find('.wt-search-bar__reset-icon-btn');
+		expect(resetBtn.exists()).toBe(true);
+
+		await resetBtn.trigger('click');
+		expect(wrapper.emitted().input.at(-1)).toEqual([
+			'',
+		]);
+	});
+
+	it('emits search on Enter keyup once the debounce delay elapses', async () => {
+		const wrapper = mount(WtSearchBar, {
+			props: {
+				value: 'enter-value',
+			},
+		});
+		const nativeInput = wrapper.find('input');
+		nativeInput.element.value = 'enter-value';
+		await nativeInput.trigger('keyup', {
+			key: 'Enter',
+		});
+
 		expect(wrapper.emitted().search).toBeFalsy();
-		await setTimeout(() => {
-			expect(wrapper.emitted().search[0].length).toBe(1);
-		}, 1000);
+
+		vi.advanceTimersByTime(1000);
+		expect(wrapper.emitted().search[0]).toEqual([
+			'enter-value',
+		]);
+	});
+
+	it('emits focus when the underlying input is focused', async () => {
+		const wrapper = mount(WtSearchBar);
+		await wrapper.find('input').trigger('focus');
+		expect(wrapper.emitted().focus).toBeTruthy();
 	});
 });