@webitel/ui-sdk 26.4.17 → 26.4.18

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

package/src/composables/useRepresentableAgentPauseCause/__tests__/useRepresentableAgentPauseCause.spec.js

@@ -2,137 +2,117 @@ import { useRepresentableAgentPauseCause } from '../useRepresentableAgentPauseCa
 
 describe('useRepresentableAgentPauseCause', () => {
 	it('correctly computes duration', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 10,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 10,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].duration).toBe('00:10');
 	});
 	it('isOverflow with limit = 0 returns false', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 10,
-					limitMin: 0,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 10,
+				limitMin: 0,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].isOverflow).toBe(false);
 	});
 	it('isOverflow with duration < limit returns false', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 10,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 10,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].isOverflow).toBe(false);
 	});
 	it('isOverflow with duration > limit returns true', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 14,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 14,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].isOverflow).toBe(true);
 	});
 
 	it('isOverflow with duration = limit returns false', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 12,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 12,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].isOverflow).toBe(false);
 	});
 
 	it('correctly computes progressColor', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 10,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 10,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].progressColor).toBe('primary');
 	});
 
 	it('correctly computes progressColor with duration > limit', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 14,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 14,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].progressColor).toBe('error');
 	});
 
 	it('correctly computes progressColor with duration < limit', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 3,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 3,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].progressColor).toBe('success');
 	});
 
 	it('correctly computes progressColor with duration = limit', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 12,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 12,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].progressColor).toBe('primary');
 	});
 
 	it('correctly computes limit', () => {
-		const pauseCauses = {
-			value: [
-				{
-					durationMin: 12,
-					limitMin: 12,
-				},
-			],
-		};
+		const pauseCauses = [
+			{
+				durationMin: 12,
+				limitMin: 12,
+			},
+		];
 		const { representablePauseCause } =
 			useRepresentableAgentPauseCause(pauseCauses);
 		expect(representablePauseCause.value[0].limit).toBe('00:12');