@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-empty/__tests__/WtEmpty.spec.js

@@ -0,0 +1,84 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtEmpty from '../wt-empty.vue';
+
+describe('WtEmpty', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtEmpty);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('does not render media/info/actions sections by default', () => {
+		const wrapper = shallowMount(WtEmpty);
+		expect(wrapper.find('.wt-empty__media').exists()).toBe(false);
+		expect(wrapper.find('.wt-empty__info').exists()).toBe(false);
+		expect(wrapper.find('.wt-empty__actions').exists()).toBe(false);
+	});
+
+	it('renders media when image prop is provided', () => {
+		const wrapper = shallowMount(WtEmpty, {
+			props: {
+				image: 'image.svg',
+			},
+		});
+		expect(wrapper.find('.wt-empty__media').exists()).toBe(true);
+	});
+
+	it('renders headline, title and text when provided', () => {
+		const wrapper = mount(WtEmpty, {
+			props: {
+				headline: 'Headline',
+				title: 'Title',
+				text: 'Text',
+			},
+		});
+		expect(wrapper.find('.wt-empty__headline').text()).toBe('Headline');
+		expect(wrapper.find('.wt-empty__title').text()).toBe('Title');
+		expect(wrapper.find('.wt-empty__text').text()).toBe('Text');
+	});
+
+	it('renders primary and secondary action buttons and emits click handlers', async () => {
+		const wrapper = mount(WtEmpty, {
+			props: {
+				primaryActionText: 'Retry',
+				secondaryActionText: 'Cancel',
+			},
+		});
+		const buttons = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		expect(buttons.length).toBe(2);
+		expect(buttons[0].text()).toBe('Retry');
+		expect(buttons[1].text()).toBe('Cancel');
+
+		await buttons[0].trigger('click');
+		expect(wrapper.emitted()['click:primary']).toBeTruthy();
+
+		await buttons[1].trigger('click');
+		expect(wrapper.emitted()['click:secondary']).toBeTruthy();
+	});
+
+	it('disables primary/secondary action buttons independently', () => {
+		const wrapper = shallowMount(WtEmpty, {
+			props: {
+				primaryActionText: 'Retry',
+				secondaryActionText: 'Cancel',
+				disabledPrimaryAction: true,
+			},
+		});
+		const buttons = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		expect(buttons[0].props('disabled')).toBe(true);
+		expect(buttons[1].props('disabled')).toBe(false);
+	});
+
+	it('applies the size modifier class', () => {
+		const wrapper = shallowMount(WtEmpty, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-empty--size-sm');
+	});
+});

package/src/components/wt-error-page/__tests__/WtErrorPage.spec.js

@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ErrorPage from '../wt-error-page.vue';
+
+describe('Error Page', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(ErrorPage, {
+			props: {
+				type: '',
+			},
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders 404-specific title, text and image alt', () => {
+		const wrapper = shallowMount(ErrorPage, {
+			props: {
+				type: '404',
+			},
+		});
+		expect(wrapper.find('.wt-error-page__title').text()).toBe(
+			"Looks like you're lost",
+		);
+		expect(wrapper.find('.wt-error-page__text').text().length).toBeGreaterThan(
+			0,
+		);
+		expect(wrapper.find('.wt-error-page__img').attributes('alt')).toBe(
+			'Not found pic',
+		);
+	});
+
+	it('renders 403-specific title, text and image alt', () => {
+		const wrapper = shallowMount(ErrorPage, {
+			props: {
+				type: '403',
+			},
+		});
+		expect(wrapper.find('.wt-error-page__title').text()).toBe('Access denied');
+		expect(wrapper.find('.wt-error-page__text').text().length).toBeGreaterThan(
+			0,
+		);
+		expect(wrapper.find('.wt-error-page__img').attributes('alt')).toBe(
+			'Forbidden pic',
+		);
+	});
+
+	it('emits back when the action button is clicked', async () => {
+		const wrapper = shallowMount(ErrorPage, {
+			props: {
+				type: '404',
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-button',
+			})
+			.vm.$emit('click');
+		expect(wrapper.emitted().back).toBeTruthy();
+	});
+});

package/src/components/wt-expansion-card/__tests__/WtExpansionCard.spec.js

@@ -0,0 +1,63 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtExpansionCard from '../wt-expansion-card.vue';
+
+describe('WtExpansionCard', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtExpansionCard);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders header, body and actions slots', () => {
+		const wrapper = mount(WtExpansionCard, {
+			slots: {
+				header: 'Header content',
+				body: 'Body content',
+				actions: 'Actions content',
+			},
+		});
+		expect(wrapper.find('.wt-expansion-card-header').text()).toBe(
+			'Header content',
+		);
+		expect(wrapper.find('.wt-expansion-card-body').text()).toBe('Body content');
+		expect(wrapper.text()).toContain('Actions content');
+	});
+
+	it('is open by default and toggles closed when the footer is clicked', async () => {
+		const wrapper = mount(WtExpansionCard, {
+			slots: {
+				body: 'Body content',
+			},
+		});
+		expect(
+			wrapper.find('.wt-expansion-card-body').element.parentElement.style
+				.display,
+		).not.toBe('none');
+
+		await wrapper.find('.wt-expansion-card-actions').trigger('click');
+		expect(wrapper.emitted().closed).toBeTruthy();
+
+		await wrapper.find('.wt-expansion-card-actions').trigger('click');
+		expect(wrapper.emitted().opened).toBeTruthy();
+	});
+
+	it('starts collapsed when the collapsed prop is true', () => {
+		const wrapper = shallowMount(WtExpansionCard, {
+			props: {
+				collapsed: true,
+			},
+		});
+		expect(wrapper.find('.wt-expansion-card-arrow').classes()).not.toContain(
+			'wt-expansion-card-arrow--opened',
+		);
+	});
+
+	it('applies the size modifier class', () => {
+		const wrapper = shallowMount(WtExpansionCard, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-expansion-card--sm');
+	});
+});

package/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtExpansionPanel from '../wt-expansion-panel.vue';
 
@@ -7,16 +7,55 @@ describe('WtExpansionPanel', () => {
 		const wrapper = shallowMount(WtExpansionPanel);
 		expect(wrapper.isVisible()).toBe(true);
 	});
-	it('emits "opened" event when opened', () => {
-		const wrapper = shallowMount(WtExpansionPanel);
-		wrapper.vm.opened = false;
-		wrapper.find('.wt-expansion-panel-header').trigger('click');
-		expect(wrapper.emitted().opened).toBeTruthy();
+
+	it('renders title, default and actions slots', () => {
+		const wrapper = mount(WtExpansionPanel, {
+			slots: {
+				title: 'Title content',
+				default: 'Body content',
+				actions: 'Actions content',
+			},
+		});
+		expect(wrapper.find('.wt-expansion-panel-header').text()).toContain(
+			'Title content',
+		);
+		expect(wrapper.find('.wt-expansion-panel-body').text()).toBe(
+			'Body content',
+		);
+		expect(wrapper.text()).toContain('Actions content');
 	});
-	it('emits "closed" event when closed', () => {
+
+	it('is open by default and emits "closed" on first click', async () => {
 		const wrapper = shallowMount(WtExpansionPanel);
-		wrapper.vm.opened = true;
-		wrapper.find('.wt-expansion-panel-header').trigger('click');
+		await wrapper.find('.wt-expansion-panel-header').trigger('click');
 		expect(wrapper.emitted().closed).toBeTruthy();
+		expect(wrapper.emitted().opened).toBeFalsy();
+	});
+
+	it('emits "opened" on the second click after closing', async () => {
+		const wrapper = shallowMount(WtExpansionPanel);
+		await wrapper.find('.wt-expansion-panel-header').trigger('click');
+		await wrapper.find('.wt-expansion-panel-header').trigger('click');
+		expect(wrapper.emitted().opened).toBeTruthy();
+	});
+
+	it('starts collapsed when the collapsed prop is true', () => {
+		const wrapper = shallowMount(WtExpansionPanel, {
+			props: {
+				collapsed: true,
+			},
+		});
+		expect(wrapper.find('.wt-expansion-panel-arrow').classes()).not.toContain(
+			'wt-expansion-panel-arrow--opened',
+		);
+	});
+
+	it('applies the size modifier class', () => {
+		const wrapper = shallowMount(WtExpansionPanel, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-expansion-panel--sm');
 	});
 });

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