@webitel/ui-sdk 26.4.17 → 26.4.19

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -135,17 +135,14 @@ const order = [
 
 const formattedApps = computed(() =>
 	props.apps
-		.reduce(
-			(apps, app) => [
-				...apps,
-				{
-					...app,
-					img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
-					currentApp: props.currentApp === app.name,
-				},
-			],
-			[],
-		)
+		.reduce((apps, app) => {
+			apps.push({
+				...app,
+				img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
+				currentApp: props.currentApp === app.name,
+			});
+			return apps;
+		}, [])
 		.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)),
 );
 

package/src/components/wt-button/__tests__/WtButton.spec.js

@@ -1,6 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
-import WtLoader from '../../wt-loader/wt-loader.vue';
 import WtButton from '../wt-button.vue';
 
 describe('WtButton', () => {
@@ -11,12 +10,12 @@ describe('WtButton', () => {
 
 	it('renders a button content via default slot', () => {
 		const content = 'button content';
-		const wrapper = shallowMount(WtButton, {
+		const wrapper = mount(WtButton, {
 			slots: {
 				default: content,
 			},
 		});
-		expect(wrapper.find('.wt-button').text()).toBe(content);
+		expect(wrapper.text()).toContain(content);
 	});
 
 	it('renders button spinner', () => {
@@ -25,6 +24,12 @@ describe('WtButton', () => {
 				loading: true,
 			},
 		});
-		expect(wrapper.findComponent(WtLoader).exists()).toBe(true);
+		expect(wrapper.classes('p-button--loading')).toBe(true);
+	});
+
+	it('emits click event', async () => {
+		const wrapper = shallowMount(WtButton);
+		await wrapper.trigger('click');
+		expect(wrapper.emitted().click).toBeTruthy();
 	});
 });

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

@@ -11,13 +11,20 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
 
 describe('WtSelectButton', () => {
 	it('renders a component', () => {
-		const wrapper = shallowMount(WtSelectButton);
+		const wrapper = shallowMount(WtSelectButton, {
+			props: {
+				options: [],
+			},
+		});
 		expect(wrapper.classes('wt-button-select')).toBe(true);
 	});
 
 	it('renders a button content via default slot', () => {
 		const content = 'button content';
 		const wrapper = mount(WtSelectButton, {
+			props: {
+				options: [],
+			},
 			slots: {
 				default: content,
 			},
@@ -25,24 +32,14 @@ describe('WtSelectButton', () => {
 		expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
 	});
 
-	it('should rotate the arrow', async () => {
-		const wrapper = mount(WtSelectButton, {
+	it('emits click from main action button', async () => {
+		const wrapper = shallowMount(WtSelectButton, {
 			props: {
 				options: [],
 			},
 		});
-		const arrowBtn = wrapper
-			.findAllComponents({
-				name: 'wt-button',
-			})
-			.find((component) =>
-				component.classes().includes('wt-button-select__select-btn'),
-			);
-		arrowBtn.vm.$emit('click');
-		await wrapper.vm.$nextTick();
-		const wtIcon = wrapper.find('.wt-button-select__select-arrow');
-		expect(wtIcon.classes()).toContain(
-			'wt-button-select__select-arrow--active',
-		);
+
+		await wrapper.find('.wt-button-select__button').trigger('click');
+		expect(wrapper.emitted().click).toBeTruthy();
 	});
 });

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

@@ -7,6 +7,9 @@ import WtCheckbox from '../wt-checkbox.vue';
 describe('WtCheckbox', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtCheckbox, {
+			props: {
+				selected: false,
+			},
 			stubs: {
 				WtLabel,
 				WtIcon,
@@ -24,6 +27,7 @@ describe('WtCheckbox', () => {
 			},
 			props: {
 				label,
+				selected: false,
 			},
 		});
 		expect(wrapper.find('.wt-checkbox__label').text()).toBe(label);
@@ -40,8 +44,8 @@ describe('WtCheckbox', () => {
 				selected,
 			},
 		});
-		wrapper.find('.wt-checkbox__input').trigger('change');
-		expect(wrapper.emitted().change[0]).toEqual([
+		wrapper.find('input[type="checkbox"]').setValue(!selected);
+		expect(wrapper.emitted()['update:selected'][0]).toEqual([
 			!selected,
 		]);
 	});

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtChip from '../wt-chip.vue';
 
@@ -10,11 +10,11 @@ describe('WtChip', () => {
 
 	it('renders a chip content via default slot', () => {
 		const content = 'chip content';
-		const wrapper = shallowMount(WtChip, {
+		const wrapper = mount(WtChip, {
 			slots: {
 				default: content,
 			},
 		});
-		expect(wrapper.find('.wt-chip').text()).toBe(content);
+		expect(wrapper.text()).toContain(content);
 	});
 });

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

@@ -9,27 +9,14 @@ describe('Filters Panel Wrapper', () => {
 	});
 	it('emits "reset" event at wt-table-actions "filterReset" event', () => {
 		const wrapper = shallowMount(FiltersPanelWrapper);
-		wrapper
-			.findComponent({
-				name: 'wt-table-actions',
-			})
-			.vm.$emit('input', 'filterReset');
+		wrapper.vm.tableActionsHandler('filterReset');
 		expect(wrapper.emitted().reset).toBeTruthy();
 	});
 	it(`toggles "filters-panel-wrapper--opened" class at
    wt-table-actions "settings" event`, async () => {
 		const wrapper = shallowMount(FiltersPanelWrapper);
-		expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(
-			false,
-		);
-		wrapper
-			.findComponent({
-				name: 'wt-table-actions',
-			})
-			.vm.$emit('input', 'settings');
-		await wrapper.vm.$nextTick();
-		expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(
-			true,
-		);
+		const toggleSpy = vi.spyOn(wrapper.vm, 'toggleFiltersExpansion');
+		wrapper.vm.tableActionsHandler('settings');
+		expect(toggleSpy).toHaveBeenCalled();
 	});
 });

package/src/components/wt-galleria/wt-galleria.vue

@@ -192,7 +192,7 @@ const handleDelete = () => {
 watch(
 	() => currentImage.value,
 	(oldValue, newValue) => {
-		if (oldValue?.src == newValue?.src) return;
+		if (oldValue?.src === newValue?.src) return;
 		isImageOnLoad.value = true;
 	},
 	{

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

@@ -12,7 +12,7 @@ describe('WtIcon', () => {
 		expect(wrapper.classes('wt-icon')).toBe(true);
 	});
 	it('correctly computes icon name', () => {
-		const iconName = '#jest-bucket';
+		const iconName = 'jest-bucket';
 		const wrapper = shallowMount(WtIcon, {
 			props: {
 				icon: 'bucket',
@@ -20,6 +20,23 @@ describe('WtIcon', () => {
 				iconPrefix: 'jest',
 			},
 		});
-		expect(wrapper.vm.iconName).toBe(iconName);
+		expect(wrapper.vm.iconSvg).toBe(iconName);
+	});
+
+	it('applies size and color classes', () => {
+		const wrapper = shallowMount(WtIcon, {
+			props: {
+				icon: 'bucket',
+				size: 'sm',
+				color: 'error',
+			},
+		});
+
+		expect(wrapper.classes()).toEqual(
+			expect.arrayContaining([
+				'wt-icon--size-sm',
+				'wt-icon--color-error',
+			]),
+		);
 	});
 });

package/src/components/wt-intersection-observer/wt-intersection-observer.vue

@@ -27,7 +27,7 @@ const emit = defineEmits([
 
 const intersectionTarget = ref(null);
 
-let stopObs;
+let stopObs: (() => void) | undefined;
 
 onMounted(() => {
 	/**

package/src/components/wt-pagination/__tests__/WtPagination.spec.js

@@ -3,42 +3,106 @@ import { mount, shallowMount } from '@vue/test-utils';
 import WtPagination from '../wt-pagination.vue';
 
 describe('WtPagination', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtPagination);
 		expect(wrapper.classes('wt-pagination')).toBe(true);
 	});
 
 	it('debounces size change event when debounce prop is true', async () => {
-		const props = {
-			size: '10',
-			debounce: true,
-			debounceDelay: 100,
-		};
 		const wrapper = shallowMount(WtPagination, {
-			props,
+			props: {
+				size: '10',
+				debounce: true,
+				debounceDelay: 100,
+			},
+		});
+
+		await wrapper.setProps({
+			size: '20',
 		});
-		props.size = '20';
-		wrapper.setProps(props);
+
 		expect(wrapper.emitted().change).toBeFalsy();
-		await setTimeout(() => {
-			expect(wrapper.emitted().change[0].length).toBe(1);
-		}, 1000);
+
+		vi.advanceTimersByTime(1000);
+		expect(wrapper.emitted().change ?? []).toHaveLength(1);
+		expect(wrapper.emitted().change[0]).toEqual([
+			20,
+		]);
 	});
 
 	it('changes pages at icon btn click', async () => {
 		const wrapper = mount(WtPagination, {
 			props: {
-				isNext: true,
-				page: 2,
+				prev: true,
+				next: true,
 			},
 		});
 		const pageControls = wrapper.findAllComponents({
 			name: 'wt-icon-btn',
 		});
-		pageControls.at(0).vm.$emit('click');
-		pageControls.at(1).vm.$emit('click');
-		console.info(wrapper.emitted());
+
+		pageControls[0].vm.$emit('click');
+		pageControls[1].vm.$emit('click');
+
 		expect(wrapper.emitted().prev.length).toBe(1);
 		expect(wrapper.emitted().next.length).toBe(1);
 	});
+
+	it('resets to default size when input value is null', async () => {
+		const wrapper = shallowMount(WtPagination, {
+			props: {
+				size: 25,
+			},
+		});
+
+		wrapper.vm.inputHandler(null);
+		expect(wrapper.vm.internalSize).toBeNull();
+
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.vm.internalSize).toBe(10);
+		expect(wrapper.emitted().input).toBeTruthy();
+		expect(wrapper.emitted().input[0]).toEqual([
+			10,
+		]);
+		expect(wrapper.emitted().change).toBeTruthy();
+		expect(wrapper.emitted().change[0]).toEqual([
+			10,
+		]);
+	});
+
+	it('normalizes out-of-range input values to default size', async () => {
+		const wrapper = shallowMount(WtPagination, {
+			props: {
+				size: 11,
+			},
+		});
+
+		wrapper.vm.inputHandler(2000);
+		wrapper.vm.inputHandler(-1);
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.emitted().input).toEqual([
+			[
+				10,
+			],
+			[
+				10,
+			],
+		]);
+		expect(wrapper.emitted().change).toEqual([
+			[
+				10,
+			],
+		]);
+	});
 });

package/src/components/wt-player/src/components/buttons/mute-button.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script setup lang="ts">
-
 </script>
 
 <style scoped>

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

@@ -7,6 +7,10 @@ import WtRadio from '../wt-radio.vue';
 describe('WtRadio', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtRadio, {
+			props: {
+				selected: '',
+				value: 'v',
+			},
 			stubs: {
 				WtLabel,
 				WtIcon,
@@ -24,6 +28,8 @@ describe('WtRadio', () => {
 			},
 			props: {
 				label,
+				selected: '',
+				value: 'v',
 			},
 		});
 		expect(wrapper.find('.wt-radio__label').text()).toBe(label);
@@ -42,8 +48,8 @@ describe('WtRadio', () => {
 				value,
 			},
 		});
-		wrapper.find('.wt-radio__input').trigger('input');
-		expect(wrapper.emitted().input[0]).toEqual([
+		wrapper.find('input[type="radio"]').setValue();
+		expect(wrapper.emitted()['update:selected'][0]).toEqual([
 			value,
 		]);
 	});

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

@@ -11,4 +11,102 @@ describe('WtRoundedAction', () => {
 		});
 		expect(wrapper.classes('wt-rounded-action')).toBe(true);
 	});
+
+	it('applies state classes from props', () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+				active: true,
+				disabled: true,
+				rounded: true,
+				wide: true,
+				size: 'sm',
+			},
+		});
+
+		expect(wrapper.classes()).toEqual(
+			expect.arrayContaining([
+				'wt-rounded-action--active',
+				'wt-rounded-action--disabled',
+				'wt-rounded-action--rounded',
+				'wt-rounded-action--wide',
+				'wt-rounded-action--size-sm',
+			]),
+		);
+	});
+
+	it('emits click event', async () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+			},
+		});
+
+		await wrapper.trigger('click');
+		expect(wrapper.emitted().click).toHaveLength(1);
+	});
+
+	it('shows loader when loading is true', () => {
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+				loading: true,
+			},
+		});
+
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-loader',
+				})
+				.exists(),
+		).toBe(true);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('hides loader 1s after loading becomes false', async () => {
+		vi.useFakeTimers();
+		const wrapper = shallowMount(WtRoundedAction, {
+			props: {
+				icon: 'call',
+				loading: true,
+			},
+		});
+
+		await wrapper.setProps({
+			loading: false,
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-loader',
+				})
+				.exists(),
+		).toBe(true);
+
+		vi.advanceTimersByTime(1000);
+		await wrapper.vm.$nextTick();
+
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-loader',
+				})
+				.exists(),
+		).toBe(false);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon',
+				})
+				.exists(),
+		).toBe(true);
+		vi.useRealTimers();
+	});
 });

package/src/components/wt-rounded-action/_variables.css

@@ -12,6 +12,3 @@
 
 	--rounded-action-active-color: var(--dp-10-surface-color);
 }
-
-:root.theme--dark {
-}

package/src/components/wt-select/mixins/multiselectMixin.js

@@ -1,7 +1,6 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
 
-import validationMixin from '../../../mixins/validationMixin/validationMixin.js';
 import debounce from '../../../scripts/debounce.js';
 import isEmpty from '../../../scripts/isEmpty.js';
 import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin.js';

package/src/components/wt-select/multiselect.css

@@ -1,3 +1,5 @@
+/* THIS FILE IS ADDED TO BIOME IGNORE coz it fails to parse Vue :deep() selector*/
+
 :deep(.multiselect) {
     position: relative;
     cursor: pointer;

package/src/components/wt-select/wt-select-v2.vue

@@ -140,9 +140,10 @@ const search = async (event) => {
 	console.log('event.query', event);
 
 	if (!isApiMode.value) {
-		return (suggestions.value = [
+		suggestions.value = [
 			...props.options,
-		]);
+		];
+		return suggestions.value;
 	}
 
 	const fetchedOptions = await fetchOptions({

package/src/components/wt-status-select/wt-status-select.vue

@@ -100,10 +100,8 @@ export default {
 					// skip breakout option
 					return options;
 				}
-				return [
-					...options,
-					opt,
-				];
+				options.push(opt);
+				return options;
 			}, []);
 		},
 		duration() {

package/src/components/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -6,6 +6,9 @@ import WtSwitcher from '../wt-switcher.vue';
 describe('WtSwitcher', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtSwitcher, {
+			props: {
+				modelValue: false,
+			},
 			stubs: {
 				WtLabel,
 			},
@@ -21,24 +24,19 @@ describe('WtSwitcher', () => {
 			},
 			props: {
 				label,
+				modelValue: false,
 			},
 		});
 		expect(wrapper.find('.wt-switcher__label').text()).toBe(label);
 	});
 
-	it('toggles passed value at click', () => {
-		const value = true;
-		const wrapper = mount(WtSwitcher, {
-			stubs: {
-				WtLabel,
-			},
+	it('reflects left-label modifier class', () => {
+		const wrapper = shallowMount(WtSwitcher, {
 			props: {
-				value,
+				modelValue: false,
+				labelLeft: true,
 			},
 		});
-		wrapper.find('.wt-switcher__input').trigger('change');
-		expect(wrapper.emitted().change[0]).toEqual([
-			!value,
-		]);
+		expect(wrapper.classes('wt-switcher--label-left')).toBe(true);
 	});
 });

package/src/components/wt-switcher/wt-switcher.vue

@@ -36,7 +36,7 @@ import type { ToggleSwitchProps } from 'primevue/toggleswitch';
 import { computed, nextTick, ref, useSlots } from 'vue';
 
 interface LabelProps {
-	[key: string]: any;
+	[key: string]: unknown;
 }
 
 /**

package/src/components/wt-table/wt-table.vue

@@ -299,7 +299,7 @@ interface Props extends DataTableProps {
 
 	//lazy loading
 	lazy?: boolean;
-	onLoading?: (event: VirtualScrollerLazyEvent) => Promise<any>;
+	onLoading?: (event: VirtualScrollerLazyEvent) => Promise<unknown>;
 	loading?: boolean;
 	itemSize?: number | undefined;
 }

package/src/components/wt-tabs/wt-tabs.vue

@@ -74,8 +74,7 @@ export default {
 
 		moveActiveLine(newValue) {
 			if (!this.current) return;
-			if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0])
-				return;
+			if (!this.$refs?.[newValue]?.[0]) return;
 			const element = this.$refs[newValue][0];
 			this.activeLineWidth = element.clientWidth;
 			this.activeLineOffset = element.offsetLeft;

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -35,7 +35,7 @@ describe('WtTextarea', () => {
 				autoresize: true,
 			},
 		});
-		wrapper.find('.wt-textarea__textarea').trigger('keypress', {
+		wrapper.find('.wt-textarea__textarea').trigger('keydown', {
 			key: 'Enter',
 		});
 		expect(wrapper.emitted().enter).toBeTruthy();
@@ -47,7 +47,7 @@ describe('WtTextarea', () => {
 				WtLabel,
 			},
 		});
-		wrapper.find('.wt-textarea__textarea').trigger('keypress', {
+		wrapper.find('.wt-textarea__textarea').trigger('keydown', {
 			key: 'Enter',
 		});
 		expect(wrapper.emitted().enter).toBeFalsy();