@webitel/ui-sdk 26.8.75 → 26.8.76

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

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');
 	});
 });