@webitel/ui-sdk 26.4.16 → 26.4.18

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-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-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-pagination/wt-pagination.vue

@@ -7,7 +7,7 @@
       <wt-input-number
         :max="1000"
         :min="1"
-        :model-value="size"
+        :model-value="internalSize"
         class="wt-pagination__size-input"
         @update:model-value="inputHandler"
       />
@@ -35,6 +35,8 @@
 <script>
 import debounce from '../../scripts/debounce.js';
 
+const DEFAULT_SIZE = 10;
+
 export default {
 	name: 'WtPagination',
 	model: {
@@ -103,14 +105,20 @@ export default {
 		'next',
 	],
 
-	data: () => ({
-		defaultSize: '10',
-	}),
+	data() {
+		return {
+			internalSize: this.size != null ? +this.size : DEFAULT_SIZE,
+		};
+	},
 
 	watch: {
-		size(value) {
+		internalSize(value) {
+			if (value === null) return;
 			this.changeSize(value);
 		},
+		size(value) {
+			this.internalSize = value != null ? +value : DEFAULT_SIZE;
+		},
 	},
 
 	created() {
@@ -120,10 +128,22 @@ export default {
 
 	methods: {
 		inputHandler(value) {
-			const size =
-				value != null && value >= 0 && value <= 1000 ? value : this.defaultSize;
+			if (value === null) {
+				// @author r.zaritskyi
+				// https://github.com/webitel/webitel-ui-sdk/pull/1283#issue-4194972887
+				// If internalSize is already DEFAULT_SIZE, Vuex won't detect a change,
+				// Vue won't re-render wt-input-number, and the field stays empty.
+				// Setting null first forces a DOM update; nextTick restores the value.
+				this.internalSize = null;
+				this.$nextTick(() => {
+					this.internalSize = DEFAULT_SIZE;
+					this.$emit('input', DEFAULT_SIZE);
+				});
+				return;
+			}
+			const size = value >= 0 && value <= 1000 ? value : DEFAULT_SIZE;
+			this.internalSize = size;
 			this.$emit('input', size);
-			this.changeSize(size);
 		},
 		changeSize(value) {
 			this.$emit('change', value);

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/wt-rounded-action.vue

@@ -1,13 +1,18 @@
 <template>
   <button
-:class="[
-    `wt-rounded-action--size-${size}`,
-    { 'wt-rounded-action--active': active },
-    { 'wt-rounded-action--disabled': disabled },
-    { 'wt-rounded-action--rounded': rounded },
-    { 'wt-rounded-action--wide': wide },
-    { 'wt-button--loading': showLoader },
-  ]" class="wt-rounded-action" type="button" @click="emit('click', $event)">
+    :class="[
+      `wt-rounded-action--size-${size}`,
+      { 'wt-rounded-action--active': active },
+      { 'wt-rounded-action--disabled': disabled },
+      { 'wt-rounded-action--rounded': rounded },
+      { 'wt-rounded-action--wide': wide },
+      { 'wt-button--loading': showLoader },
+    ]"
+    class="wt-rounded-action"
+    type="button"
+    v-tooltip="tooltip"
+    @click="emit('click', $event)"
+  >
     <wt-loader v-if="showLoader" color="main" :size="loaderSize" />
     <wt-icon v-else :color="iColor" :icon="icon" :icon-prefix="iconPrefix" :size="size" />
   </button>
@@ -109,6 +114,14 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+
+	/**
+	 * Tooltip text displayed on hover via v-tooltip directive
+	 * @type {string}
+	 */
+	tooltip: {
+		type: String,
+	},
 });
 const emit = defineEmits([
 	'click',

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

package/src/components/wt-time-input/__tests__/WtTimeInput.spec.js

@@ -10,7 +10,7 @@ describe('WtTimeInput', () => {
 				WtLabel,
 			},
 		});
-		expect(wrapper.classes('wt-time-input')).toBe(true);
+		expect(wrapper.exists()).toBe(true);
 	});
 
 	it('renders label text when passed', () => {
@@ -25,4 +25,21 @@ describe('WtTimeInput', () => {
 		});
 		expect(wrapper.find('.wt-label').text()).toBe(label);
 	});
+
+	it('emits model update from input-number', () => {
+		const wrapper = shallowMount(WtTimeInput, {
+			props: {
+				modelValue: 0,
+			},
+		});
+
+		wrapper
+			.findComponent({
+				name: 'wt-input-number',
+			})
+			.vm.$emit('update:modelValue', 7);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			7,
+		]);
+	});
 });

package/src/components/wt-timepicker/__tests__/WtTimepicker.spec.js

@@ -26,49 +26,43 @@ describe('WtTimepicker', () => {
 	});
 
 	it('Correctly converts value from MIN time-input to output', async () => {
-		const value = 0;
 		const wrapper = mount(WtTimepicker, {
-			// stubs: {
-			//   WtTimeInput,
-			// },
 			props: {
-				value,
+				modelValue: 0,
 			},
 		});
-		wrapper.findAllComponents(WtTimeInput).at(0).vm.$emit('input', 21);
-		expect(wrapper.emitted().input[0]).toEqual([
+		wrapper.findAllComponents(WtTimeInput)[0].vm.$emit('update:modelValue', 21);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
 			21 * 60 * 60,
 		]);
 	});
 
 	it('Correctly converts value from HOUR time-input to output', () => {
-		const value = 0;
 		const wrapper = mount(WtTimepicker, {
 			stubs: {
 				WtTimeInput,
 			},
 			props: {
-				value,
+				modelValue: 0,
 			},
 		});
-		wrapper.findAllComponents(WtTimeInput).at(1).vm.$emit('input', 21);
-		expect(wrapper.emitted().input[0]).toEqual([
+		wrapper.findAllComponents(WtTimeInput)[1].vm.$emit('update:modelValue', 21);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
 			21 * 60,
 		]);
 	});
 
 	it('Correctly converts value from SEC time-input to output', () => {
-		const value = 0;
 		const wrapper = mount(WtTimepicker, {
 			stubs: {
 				WtTimeInput,
 			},
 			props: {
-				value,
+				modelValue: 0,
 			},
 		});
-		wrapper.findAllComponents(WtTimeInput).at(2).vm.$emit('input', 21);
-		expect(wrapper.emitted().input[0]).toEqual([
+		wrapper.findAllComponents(WtTimeInput)[2].vm.$emit('update:modelValue', 21);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
 			21,
 		]);
 	});