@webitel/ui-sdk 26.8.75 → 26.8.76

package/src/components/wt-filters-panel-wrapper/__tests__/WtFiltersPanelWrapper.spec.js

@@ -1,22 +1,93 @@
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 
+import WtTableActions from '../../wt-table-actions/wt-table-actions.vue';
 import FiltersPanelWrapper from '../wt-filters-panel-wrapper.vue';
 
+const mountWithTableActions = (options) =>
+	mount(FiltersPanelWrapper, {
+		...options,
+		global: {
+			...options?.global,
+			stubs: {
+				WtTableActions: false,
+				...options?.global?.stubs,
+			},
+			components: {
+				WtTableActions,
+				...options?.global?.components,
+			},
+		},
+	});
+
 describe('Filters Panel Wrapper', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(FiltersPanelWrapper);
 		expect(wrapper.exists()).toBe(true);
 	});
-	it('emits "reset" event at wt-table-actions "filterReset" event', () => {
-		const wrapper = shallowMount(FiltersPanelWrapper);
-		wrapper.vm.tableActionsHandler('filterReset');
+
+	it('renders default slot content in the filters wrap', () => {
+		const wrapper = shallowMount(FiltersPanelWrapper, {
+			slots: {
+				default: 'Filter fields',
+			},
+		});
+		expect(wrapper.find('.filters-wrap').text()).toBe('Filter fields');
+	});
+
+	it('emits "reset" event when wt-table-actions emits input with "filterReset"', async () => {
+		const wrapper = mountWithTableActions();
+		await flushPromises();
+		await wrapper
+			.findComponent({
+				name: 'wt-table-actions',
+			})
+			.vm.$emit('input', 'filterReset');
 		expect(wrapper.emitted().reset).toBeTruthy();
 	});
-	it(`toggles "filters-panel-wrapper--opened" class at
-   wt-table-actions "settings" event`, async () => {
-		const wrapper = shallowMount(FiltersPanelWrapper);
-		const toggleSpy = vi.spyOn(wrapper.vm, 'toggleFiltersExpansion');
-		wrapper.vm.tableActionsHandler('settings');
-		expect(toggleSpy).toHaveBeenCalled();
+
+	// NOTE: the "opened" class is bound to the `isOpened` prop in the template, but
+	// toggleFiltersExpansion (triggered by the "settings" table action) mutates the
+	// separate `localIsOpened` data property, which nothing reads. So this handler
+	// currently has no visible effect on the rendered class — asserting that as the
+	// actual current behavior rather than the presumably-intended toggle.
+	it('does not change "filters-panel-wrapper--opened" class when wt-table-actions emits input with "settings"', async () => {
+		const wrapper = mountWithTableActions();
+		await flushPromises();
+		expect(wrapper.classes()).not.toContain('filters-panel-wrapper--opened');
+
+		await wrapper
+			.findComponent({
+				name: 'wt-table-actions',
+			})
+			.vm.$emit('input', 'settings');
+		expect(wrapper.classes()).not.toContain('filters-panel-wrapper--opened');
+	});
+
+	it('starts opened when isOpened prop is true', () => {
+		const wrapper = shallowMount(FiltersPanelWrapper, {
+			props: {
+				isOpened: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('filters-panel-wrapper--opened');
+	});
+
+	it('passes tableActionIcons down to wt-table-actions', async () => {
+		const icons = [
+			'filter-reset',
+		];
+		const wrapper = mountWithTableActions({
+			props: {
+				tableActionIcons: icons,
+			},
+		});
+		await flushPromises();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-table-actions',
+				})
+				.props('icons'),
+		).toEqual(icons);
 	});
 });

package/src/components/wt-hint/__tests__/WtHint.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 
 import WtHint from '../wt-hint.vue';
 
@@ -7,4 +7,47 @@ describe('WtHint', () => {
 		const wrapper = shallowMount(WtHint);
 		expect(wrapper.isVisible()).toBe(true);
 	});
+
+	it('renders the default info icon color', async () => {
+		const wrapper = mount(WtHint);
+		await flushPromises();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('color'),
+		).toBe('info');
+	});
+
+	it('applies a custom icon color', async () => {
+		const wrapper = mount(WtHint, {
+			props: {
+				iconColor: 'error',
+			},
+		});
+		await flushPromises();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('color'),
+		).toBe('error');
+	});
+
+	it('renders default slot content once the tooltip is shown', async () => {
+		const content = 'Hint text';
+		const wrapper = mount(WtHint, {
+			slots: {
+				default: content,
+			},
+		});
+		await flushPromises();
+
+		await wrapper.find('.wt-tooltip__activator').trigger('mouseenter');
+		await flushPromises();
+
+		expect(wrapper.text()).toContain(content);
+	});
 });

package/src/components/wt-icon/__tests__/WtIcon.spec.js

@@ -39,4 +39,33 @@ describe('WtIcon', () => {
 			]),
 		);
 	});
+
+	it('applies the disabled class when disabled', () => {
+		const wrapper = shallowMount(WtIcon, {
+			props: {
+				icon: 'bucket',
+				disabled: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-icon--disabled');
+	});
+
+	it('falls back to the raw icon name when not found in the repository', () => {
+		const wrapper = shallowMount(WtIcon, {
+			props: {
+				icon: 'totally-unknown-icon',
+			},
+		});
+		expect(wrapper.vm.iconSvg).toBe('totally-unknown-icon');
+	});
+
+	it('emits click when clicked', async () => {
+		const wrapper = shallowMount(WtIcon, {
+			props: {
+				icon: 'bucket',
+			},
+		});
+		await wrapper.trigger('click');
+		expect(wrapper.emitted().click).toBeTruthy();
+	});
 });

package/src/components/wt-icon-action/__tests__/WtIconAction.spec.js

@@ -1,5 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { IconAction } from '../../../enums';
+import { SortSymbols } from '../../../scripts/sortQueryAdapters.js';
 import WtIconAction from '../wt-icon-action.vue';
 
 describe('WtIconAction', () => {
@@ -11,4 +13,81 @@ describe('WtIconAction', () => {
 		});
 		expect(wrapper.isVisible()).toBe(true);
 	});
+
+	it('maps a known action to its icon', () => {
+		const wrapper = shallowMount(WtIconAction, {
+			props: {
+				action: IconAction.DELETE,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('icon'),
+		).toBe('bucket');
+	});
+
+	it('uses sort-asc icon by default for the sort action', () => {
+		const wrapper = shallowMount(WtIconAction, {
+			props: {
+				action: IconAction.SORT,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('icon'),
+		).toBe('sort-asc');
+	});
+
+	it('uses sort-desc icon for the sort action when sort:order is desc', () => {
+		const wrapper = shallowMount(WtIconAction, {
+			props: {
+				action: IconAction.SORT,
+				'sort:order': SortSymbols.DESC,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.attributes('icon'),
+		).toBe('sort-desc');
+	});
+
+	it('passes disabled and size down to wt-icon-btn', () => {
+		const wrapper = shallowMount(WtIconAction, {
+			props: {
+				action: IconAction.EDIT,
+				disabled: true,
+				size: 'lg',
+			},
+		});
+		const iconBtn = wrapper.findComponent({
+			name: 'wt-icon-btn',
+		});
+		expect(iconBtn.props('disabled')).toBe(true);
+		expect(iconBtn.attributes('size')).toBe('lg');
+	});
+
+	it('emits click and mousedown from the underlying icon button', async () => {
+		const wrapper = shallowMount(WtIconAction, {
+			props: {
+				action: IconAction.EDIT,
+			},
+		});
+		const iconBtn = wrapper.findComponent({
+			name: 'wt-icon-btn',
+		});
+		await iconBtn.vm.$emit('click');
+		await iconBtn.vm.$emit('mousedown');
+
+		expect(wrapper.emitted().click).toBeTruthy();
+		expect(wrapper.emitted().mousedown).toBeTruthy();
+	});
 });

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -13,7 +13,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { IconAction } from '../../enums';
 import { SortSymbols } from '../../scripts/sortQueryAdapters.js';
 import { WtIconActionIconMappings } from './iconMappings.js';
 

package/src/components/wt-icon-btn/__tests__/WtIconBtn.spec.js

@@ -15,4 +15,50 @@ describe('WtIconBtn', () => {
 		});
 		expect(wrapper.classes('wt-icon-btn')).toBe(true);
 	});
+
+	it('passes icon and other attrs through to wt-icon', () => {
+		const wrapper = shallowMount(WtIconBtn, {
+			stubs: {
+				WtIcon,
+			},
+			attrs: {
+				icon: 'bucket',
+				color: 'error',
+			},
+		});
+		const icon = wrapper.findComponent(WtIcon);
+		expect(icon.props('icon')).toBe('bucket');
+		expect(icon.props('color')).toBe('error');
+	});
+
+	it('applies the disabled class and forwards disabled to wt-icon', () => {
+		const wrapper = shallowMount(WtIconBtn, {
+			stubs: {
+				WtIcon,
+			},
+			props: {
+				disabled: true,
+			},
+			attrs: {
+				icon: 'bucket',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-icon-btn--disabled');
+		expect(wrapper.findComponent(WtIcon).props('disabled')).toBe(true);
+	});
+
+	it('emits click and mousedown', async () => {
+		const wrapper = shallowMount(WtIconBtn, {
+			stubs: {
+				WtIcon,
+			},
+			attrs: {
+				icon: 'bucket',
+			},
+		});
+		await wrapper.trigger('click');
+		await wrapper.trigger('mousedown');
+		expect(wrapper.emitted().click).toBeTruthy();
+		expect(wrapper.emitted().mousedown).toBeTruthy();
+	});
 });

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