@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-confirm-dialog/__tests__/WtConfirmDialog.spec.js

@@ -0,0 +1,92 @@
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+
+import WtConfirmDialog from '../wt-confirm-dialog.vue';
+
+describe('WtConfirmDialog', () => {
+	it('renders a component with the given title', () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-confirm-dialog');
+		expect(wrapper.text()).toContain('Delete item?');
+	});
+
+	it('renders the custom delete message when provided', () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				deleteMessage: 'Are you absolutely sure?',
+				callback: vi.fn(),
+			},
+		});
+		expect(wrapper.text()).toContain('Are you absolutely sure?');
+	});
+
+	it('emits close when the popup emits close', async () => {
+		const wrapper = shallowMount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-popup',
+			})
+			.vm.$emit('close');
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('emits close when cancel action button is clicked', async () => {
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback: vi.fn(),
+			},
+		});
+		const [cancelButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await cancelButton.trigger('click');
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('calls callback and emits close when confirm action button is clicked', async () => {
+		const callback = vi.fn().mockResolvedValue();
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback,
+			},
+		});
+		const [, confirmButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await confirmButton.trigger('click');
+		await flushPromises();
+
+		expect(callback).toHaveBeenCalled();
+		expect(wrapper.emitted().close).toBeTruthy();
+	});
+
+	it('exposes isDeleting and confirm/close via the actions slot', () => {
+		const callback = vi.fn().mockResolvedValue();
+		const wrapper = mount(WtConfirmDialog, {
+			props: {
+				title: 'Delete item?',
+				callback,
+			},
+			slots: {
+				actions: `<template #actions="{ isDeleting, confirm, close }">
+					<span class="slot-check">{{ typeof isDeleting }}-{{ typeof confirm }}-{{ typeof close }}</span>
+				</template>`,
+			},
+		});
+		expect(wrapper.find('.slot-check').text()).toBe(
+			'boolean-function-function',
+		);
+	});
+});

package/src/components/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -1,7 +1,51 @@
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 
+import WtPopover from '../../wt-popover/wt-popover.vue';
 import WtContextMenu from '../wt-context-menu.vue';
 
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+/**
+ * wt-popover doesn't wire the `visible` prop through to PrimeVue's Popover — the
+ * panel only opens via the activator slot's imperative `show()`. Since the panel
+ * content is teleported to document.body, tests attach to the body and open it
+ * through a real activator before asserting on the option list.
+ */
+const mountOpen = (props) => {
+	const TestHost = {
+		components: {
+			WtContextMenu,
+		},
+		props: [
+			'options',
+			'disabled',
+		],
+		template: `
+			<WtContextMenu ref="contextMenu" :options="options" :disabled="disabled">
+				<template #activator="{ show }">
+					<button class="opener" @click="show">open</button>
+				</template>
+			</WtContextMenu>
+		`,
+	};
+	return mount(TestHost, {
+		props,
+		attachTo: document.body,
+		global: {
+			stubs: {
+				WtPopover: false,
+			},
+			components: {
+				WtPopover,
+			},
+		},
+	});
+};
+
 describe('WtContextMenu', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtContextMenu, {
@@ -11,4 +55,105 @@ describe('WtContextMenu', () => {
 		});
 		expect(wrapper.classes('wt-context-menu')).toBe(true);
 	});
+
+	it('renders an option for each entry once opened', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items.length).toBe(options.length);
+		expect(items[0].textContent.trim()).toBe('Option 1');
+		expect(items[1].textContent.trim()).toBe('Option 2');
+
+		wrapper.unmount();
+	});
+
+	it('renders plain string options via their string value', async () => {
+		const options = [
+			'Foo',
+			'Bar',
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items[0].textContent.trim()).toBe('Foo');
+		expect(items[1].textContent.trim()).toBe('Bar');
+
+		wrapper.unmount();
+	});
+
+	it('emits click with the option and index when an option is clicked', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		document.body.querySelectorAll('.wt-context-menu__option')[1].click();
+		await flushPromises();
+
+		const contextMenu = wrapper.findComponent({
+			ref: 'contextMenu',
+		});
+		expect(contextMenu.emitted().click[0]).toEqual([
+			{
+				option: options[1],
+				index: 1,
+			},
+		]);
+
+		wrapper.unmount();
+	});
+
+	it('applies the disabled modifier class to disabled options', async () => {
+		const options = [
+			{
+				text: 'Option 1',
+				disabled: true,
+			},
+			{
+				text: 'Option 2',
+			},
+		];
+		const wrapper = mountOpen({
+			options,
+		});
+		await flushPromises();
+		await wrapper.find('.opener').trigger('click');
+		await flushPromises();
+
+		const items = document.body.querySelectorAll('.wt-context-menu__option');
+		expect(items[0].classList).toContain('wt-context-menu__option--disabled');
+		expect(items[1].classList).not.toContain(
+			'wt-context-menu__option--disabled',
+		);
+
+		wrapper.unmount();
+	});
 });

package/src/components/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,57 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+
+vi.mock('clipboard-copy', () => ({
+	default: vi.fn().mockResolvedValue(),
+}));
+
+import copy from 'clipboard-copy';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+		copy.mockClear();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtCopyAction);
+		expect(wrapper.classes()).toContain('copy-action');
+	});
+
+	it('renders the copy icon by default', () => {
+		const wrapper = shallowMount(WtCopyAction);
+		expect(wrapper.attributes('icon')).toBe('copy');
+	});
+
+	it('copies the value prop when clicked', async () => {
+		const wrapper = shallowMount(WtCopyAction, {
+			props: {
+				value: 'hello world',
+			},
+		});
+		await wrapper.trigger('click');
+		await flushPromises();
+		expect(copy).toHaveBeenCalledWith('hello world');
+	});
+
+	it('shows the done icon after copying, then reverts after the timeout', async () => {
+		const wrapper = shallowMount(WtCopyAction, {
+			props: {
+				value: 'hello world',
+			},
+		});
+		await wrapper.trigger('click');
+		await flushPromises();
+
+		expect(wrapper.attributes('icon')).toBe('done');
+
+		vi.advanceTimersByTime(1500);
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.attributes('icon')).toBe('copy');
+	});
+});

package/src/components/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -28,4 +28,57 @@ describe('WtDatepicker', () => {
 		});
 		expect(wrapper.find('.wt-label').text()).toBe(label);
 	});
+
+	it('appends an asterisk to the label when required', () => {
+		const label = 'Hello there';
+		const wrapper = mount(WtDatepicker, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				label,
+				required: true,
+			},
+		});
+		expect(wrapper.find('.wt-label').text()).toBe(`${label}*`);
+	});
+
+	it('passes the disabled prop down to the underlying datepicker', () => {
+		const wrapper = shallowMount(WtDatepicker, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'DatePicker',
+				})
+				.attributes('disabled'),
+		).toBe('true');
+	});
+
+	it('uses a default placeholder based on showTime', () => {
+		const wrapper = shallowMount(WtDatepicker, {
+			stubs: {
+				WtLabel,
+				WtIcon,
+			},
+			props: {
+				showTime: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'DatePicker',
+				})
+				.attributes('placeholder'),
+		).toBe('dd/mm/yyyy hh:mm');
+	});
 });

package/src/components/wt-datetime-text/__tests__/WtDatetimeText.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils';
+
+import { FormatDateMode } from '../../../enums';
+import WtDatetimeText from '../wt-datetime-text.vue';
+
+describe('WtDatetimeText', () => {
+	it('renders the datetime formatted in datetime mode by default', () => {
+		const wrapper = mount(WtDatetimeText, {
+			props: {
+				datetime: 1700000000000,
+				timezone: 'UTC',
+			},
+		});
+		expect(wrapper.text()).toBe('14.11.2023, 22:13:20');
+	});
+
+	it('renders using date mode', () => {
+		const wrapper = mount(WtDatetimeText, {
+			props: {
+				datetime: 1700000000000,
+				mode: FormatDateMode.DATE,
+				timezone: 'UTC',
+			},
+		});
+		expect(wrapper.text()).toBe('14.11.2023');
+	});
+
+	it('renders using time mode', () => {
+		const wrapper = mount(WtDatetimeText, {
+			props: {
+				datetime: 1700000000000,
+				mode: FormatDateMode.TIME,
+				timezone: 'UTC',
+			},
+		});
+		expect(wrapper.text()).toBe('22:13');
+	});
+
+	it('renders using a different timezone', () => {
+		const wrapper = mount(WtDatetimeText, {
+			props: {
+				datetime: 1700000000000,
+				mode: FormatDateMode.DATETIME_SHORT,
+				timezone: 'Europe/Kyiv',
+			},
+		});
+		expect(wrapper.text()).toBe('15.11.2023, 0:13');
+	});
+});

package/src/components/wt-divider/__tests__/WtDivider.spec.js

@@ -0,0 +1,30 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtDivider from '../wt-divider.vue';
+
+describe('WtDivider', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtDivider);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Divider',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('defaults to horizontal layout', () => {
+		const wrapper = shallowMount(WtDivider);
+		expect(wrapper.attributes('layout')).toBe('horizontal');
+	});
+
+	it('passes a custom variant as the layout prop', () => {
+		const wrapper = shallowMount(WtDivider, {
+			props: {
+				variant: 'vertical',
+			},
+		});
+		expect(wrapper.attributes('layout')).toBe('vertical');
+	});
+});

package/src/components/wt-dual-panel/__tests__/WtDualPanel.spec.js

@@ -0,0 +1,120 @@
+import { shallowMount } from '@vue/test-utils';
+
+import { ComponentSize } from '../../../enums';
+import WtDualPanel from '../wt-dual-panel.vue';
+
+describe('WtDualPanel', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtDualPanel);
+		expect(wrapper.classes('wt-dual-panel')).toBe(true);
+	});
+
+	it('renders dual panel header via header slot', () => {
+		const content = 'Dual Panel header';
+		const wrapper = shallowMount(WtDualPanel, {
+			slots: {
+				header: content,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__header').text()).toBe(content);
+	});
+
+	it('does not render the header when hideHeader is true', () => {
+		const wrapper = shallowMount(WtDualPanel, {
+			props: {
+				hideHeader: true,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__header').exists()).toBe(false);
+	});
+
+	it('renders dual panel actions panel via actions panel slot when actionsPanel prop is true', () => {
+		const content = 'Dual Panel actions panel content';
+		const wrapper = shallowMount(WtDualPanel, {
+			props: {
+				actionsPanel: true,
+			},
+			slots: {
+				'actions-panel': content,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__actions-panel').text()).toBe(content);
+	});
+
+	it('does not render actions panel when actionsPanel prop is false', () => {
+		const wrapper = shallowMount(WtDualPanel, {
+			props: {
+				actionsPanel: false,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__actions-panel').exists()).toBe(false);
+	});
+
+	it('renders dual panel side panel via side-panel slot', () => {
+		const content = 'Dual Panel side panel';
+		const wrapper = shallowMount(WtDualPanel, {
+			slots: {
+				'side-panel': content,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__side-panel').text()).toBe(content);
+	});
+
+	it('renders dual panel main content via main slot', () => {
+		const content = 'Dual Panel main panel';
+		const wrapper = shallowMount(WtDualPanel, {
+			slots: {
+				main: content,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__main').text()).toBe(content);
+	});
+
+	it('renders the resize icon action by default', () => {
+		const wrapper = shallowMount(WtDualPanel);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-action',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('does not render the resize icon action when disableResize is true', () => {
+		const wrapper = shallowMount(WtDualPanel, {
+			props: {
+				disableResize: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-action',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('collapses the side panel and emits the new size when the resize action is clicked', async () => {
+		const content = 'side content';
+		const wrapper = shallowMount(WtDualPanel, {
+			slots: {
+				'side-panel': content,
+			},
+		});
+		expect(wrapper.find('.wt-dual-panel__side-panel--md').exists()).toBe(true);
+
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-action',
+			})
+			.vm.$emit('click');
+
+		expect(wrapper.find('.wt-dual-panel__side-panel--sm').exists()).toBe(true);
+		expect(wrapper.text()).not.toContain(content);
+		expect(wrapper.emitted()['update:side-panel-size'][0]).toEqual([
+			ComponentSize.SM,
+		]);
+	});
+});

package/src/components/wt-dummy/__tests__/WtDummy.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtDummy from '../wt-dummy.vue';
 
@@ -7,4 +7,66 @@ describe('WtDummy', () => {
 		const wrapper = shallowMount(WtDummy);
 		expect(wrapper.isVisible()).toBe(true);
 	});
+
+	it('renders default localized text when text prop is not passed', () => {
+		const wrapper = mount(WtDummy);
+		expect(wrapper.find('.wt-dummy__text').text()).toBe(
+			'There are no records yet',
+		);
+	});
+
+	it('renders custom text when passed', () => {
+		const wrapper = mount(WtDummy, {
+			props: {
+				text: 'Custom empty message',
+			},
+		});
+		expect(wrapper.find('.wt-dummy__text').text()).toBe('Custom empty message');
+	});
+
+	it('hides text when hiddenText is true', () => {
+		const wrapper = mount(WtDummy, {
+			props: {
+				hiddenText: true,
+			},
+		});
+		expect(wrapper.find('.wt-dummy__text').exists()).toBe(false);
+	});
+
+	it('does not render an action button by default', () => {
+		const wrapper = shallowMount(WtDummy);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-button',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders an action button and emits create when clicked', async () => {
+		const wrapper = shallowMount(WtDummy, {
+			props: {
+				showAction: true,
+			},
+		});
+		const button = wrapper.findComponent({
+			name: 'wt-button',
+		});
+		expect(button.exists()).toBe(true);
+
+		await button.vm.$emit('click');
+		expect(wrapper.emitted().create).toBeTruthy();
+	});
+
+	it('uses the given size for the dummy image', () => {
+		const wrapper = mount(WtDummy, {
+			props: {
+				size: 100,
+			},
+		});
+		const img = wrapper.find('.wt-dummy__img img');
+		expect(img.attributes('width')).toBe('100');
+		expect(img.attributes('height')).toBe('100');
+	});
 });