@webitel/ui-sdk 26.8.75 → 26.8.76

package/src/components/wt-table/__tests__/WtTable.spec.js

@@ -0,0 +1,237 @@
+import { mount } from '@vue/test-utils';
+
+import WtTable from '../wt-table.vue';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+const headers = [
+	{
+		value: 'name',
+		text: 'Name',
+	},
+	{
+		value: 'age',
+		text: 'Age',
+	},
+];
+
+const data = [
+	{
+		id: 1,
+		name: 'Alice',
+		age: 30,
+	},
+	{
+		id: 2,
+		name: 'Bob',
+		age: 25,
+	},
+];
+
+describe('WtTable', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtTable);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'DataTable',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('passes data and column headers down to the underlying table', () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers,
+				data,
+			},
+		});
+		const table = wrapper.findComponent({
+			name: 'DataTable',
+		});
+		expect(table.props('value')).toEqual(data);
+
+		const columns = wrapper.findAllComponents({
+			name: 'Column',
+		});
+		const dataColumns = columns.filter((c) =>
+			headers.some((h) => h.value === c.props('columnKey')),
+		);
+		expect(dataColumns.length).toBe(headers.length);
+	});
+
+	it('renders row-select column by default and can be disabled', () => {
+		const withSelect = mount(WtTable, {
+			props: {
+				headers,
+				data,
+			},
+		});
+		expect(
+			withSelect
+				.findAllComponents({
+					name: 'Column',
+				})
+				.some((c) => c.props('columnKey') === 'row-select'),
+		).toBe(true);
+
+		const withoutSelect = mount(WtTable, {
+			props: {
+				headers,
+				data,
+				selectable: false,
+			},
+		});
+		expect(
+			withoutSelect
+				.findAllComponents({
+					name: 'Column',
+				})
+				.some((c) => c.props('columnKey') === 'row-select'),
+		).toBe(false);
+	});
+
+	it('renders the row-actions column when gridActions is true (default)', () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers,
+				data,
+			},
+		});
+		expect(
+			wrapper
+				.findAllComponents({
+					name: 'Column',
+				})
+				.some((c) => c.props('columnKey') === 'row-actions'),
+		).toBe(true);
+	});
+
+	it('does not render the row-actions column when gridActions is false', () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers,
+				data,
+				gridActions: false,
+			},
+		});
+		expect(
+			wrapper
+				.findAllComponents({
+					name: 'Column',
+				})
+				.some((c) => c.props('columnKey') === 'row-actions'),
+		).toBe(false);
+	});
+
+	it('emits sort with the next sort order for a sortable column', async () => {
+		const sortableHeaders = [
+			{
+				value: 'name',
+				text: 'Name',
+				field: 'name',
+				sort: null,
+			},
+		];
+		const wrapper = mount(WtTable, {
+			props: {
+				headers: sortableHeaders,
+				data,
+				sortable: true,
+			},
+		});
+		const table = wrapper.findComponent({
+			name: 'DataTable',
+		});
+		await table.vm.$emit('sort', {
+			sortField: 'name',
+		});
+
+		expect(wrapper.emitted().sort).toBeTruthy();
+		expect(wrapper.emitted().sort[0][0]).toEqual(sortableHeaders[0]);
+	});
+
+	it('does not emit sort for a non-sortable table', async () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers,
+				data,
+				sortable: false,
+			},
+		});
+		const table = wrapper.findComponent({
+			name: 'DataTable',
+		});
+		await table.vm.$emit('sort', {
+			sortField: 'name',
+		});
+
+		expect(wrapper.emitted().sort).toBeFalsy();
+	});
+
+	it('resolves locale-based header text', () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers: [
+					{
+						value: 'name',
+						locale: 'reusable.add',
+					},
+				],
+				data,
+			},
+		});
+		expect(wrapper.text()).toContain('Add');
+	});
+
+	it('hides columns with show: false', () => {
+		const wrapper = mount(WtTable, {
+			props: {
+				headers: [
+					{
+						value: 'name',
+						text: 'Name',
+						show: false,
+					},
+				],
+				data,
+			},
+		});
+		const col = wrapper
+			.findAllComponents({
+				name: 'Column',
+			})
+			.find((c) => c.props('columnKey') === 'name');
+		expect(col.props('hidden')).toBe(true);
+	});
+
+	it('toggles all row selections via the header checkbox when no selected prop is given', async () => {
+		const rows = [
+			{
+				id: 1,
+				name: 'Alice',
+			},
+			{
+				id: 2,
+				name: 'Bob',
+			},
+		];
+		const wrapper = mount(WtTable, {
+			props: {
+				headers,
+				data: rows,
+			},
+		});
+		const headerCheckbox = wrapper.findComponent({
+			name: 'wt-checkbox',
+		});
+		await headerCheckbox.vm.$emit('update:selected', true);
+
+		expect(rows.every((r) => r._isSelected)).toBe(true);
+	});
+});

package/src/components/wt-table-actions/__tests__/WtTableActions.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtTableActions from '../wt-table-actions.vue';
 
@@ -7,4 +7,156 @@ describe('WtTableActions', () => {
 		const wrapper = shallowMount(WtTableActions);
 		expect(wrapper.classes('wt-table-actions')).toBe(true);
 	});
+
+	it('renders only the refresh icon by default', () => {
+		const wrapper = shallowMount(WtTableActions);
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-icon-btn',
+			}).length,
+		).toBe(1);
+	});
+
+	it('renders default slot content', () => {
+		const wrapper = shallowMount(WtTableActions, {
+			slots: {
+				default: 'Custom action',
+			},
+		});
+		expect(wrapper.text()).toContain('Custom action');
+	});
+
+	it.each([
+		[
+			'import',
+			'import',
+		],
+		[
+			'export',
+			'export',
+		],
+		[
+			'filter-reset',
+			'filterReset',
+		],
+		[
+			'column-select',
+			'columnSelect',
+		],
+		[
+			'refresh',
+			'refresh',
+		],
+	])('emits input with "%s" when the %s icon is clicked', async (icon, emitted) => {
+		const wrapper = mount(WtTableActions, {
+			props: {
+				icons: [
+					icon,
+				],
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.trigger('click');
+		expect(wrapper.emitted().input[0]).toEqual([
+			emitted,
+		]);
+	});
+
+	// NOTE: the settings icon-btn is nested inside <wt-badge v-if="isSettingsBadge">,
+	// so it only renders (and can be clicked) when isSettingsBadge is true, even
+	// though `icons` includes 'settings' independently. This looks like an accidental
+	// regression (wt-badge supports a `hidden` prop for exactly this "always mount,
+	// toggle visibility" case), but the tests assert current, not intended, behavior.
+	it('emits input with "settings" when the settings icon is clicked, given isSettingsBadge is true', async () => {
+		const wrapper = mount(WtTableActions, {
+			props: {
+				icons: [
+					'settings',
+				],
+				isSettingsBadge: true,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.trigger('click');
+		expect(wrapper.emitted().input[0]).toEqual([
+			'settings',
+		]);
+	});
+
+	it('does not render the settings icon when isSettingsBadge is false, even if icons includes "settings"', () => {
+		const wrapper = mount(WtTableActions, {
+			props: {
+				icons: [
+					'settings',
+				],
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders multiple icons in the icons array', () => {
+		const wrapper = shallowMount(WtTableActions, {
+			props: {
+				icons: [
+					'import',
+					'export',
+					'refresh',
+				],
+			},
+		});
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-icon-btn',
+			}).length,
+		).toBe(3);
+	});
+
+	it('shows a visible badge on the settings button when isSettingsBadge is true', () => {
+		const wrapper = shallowMount(WtTableActions, {
+			props: {
+				icons: [
+					'settings',
+				],
+				isSettingsBadge: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-badge',
+				})
+				.props('hidden'),
+		).toBe(false);
+	});
+
+	it('marks the settings button active when isSettingsActive is true', () => {
+		const wrapper = mount(WtTableActions, {
+			props: {
+				icons: [
+					'settings',
+				],
+				isSettingsBadge: true,
+				isSettingsActive: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-btn',
+				})
+				.classes(),
+		).toContain('active');
+	});
 });

package/src/components/wt-table-column-select/__tests__/WtTableColumnSelect.spec.js

@@ -33,4 +33,151 @@ describe('WtTableColumnSelect', () => {
 		await wrapper.vm.$nextTick();
 		expect(wrapper.find('.wt-popup__popup').exists()).toBe(true);
 	});
+
+	it('renders a checkbox for each non-static header once opened', async () => {
+		const headers = [
+			{
+				value: 'name',
+				text: 'Name',
+				show: true,
+			},
+			{
+				value: 'age',
+				text: 'Age',
+				show: false,
+			},
+		];
+		const wrapper = mount(WtTableColumnSelect, {
+			props: {
+				headers,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.vm.$emit('click');
+		await wrapper.vm.$nextTick();
+
+		const checkboxes = wrapper.findAllComponents({
+			name: 'wt-checkbox',
+		});
+		expect(checkboxes.length).toBe(2);
+	});
+
+	it('excludes staticHeaders from the changeable list', async () => {
+		const headers = [
+			{
+				value: 'name',
+				text: 'Name',
+				show: true,
+			},
+			{
+				value: 'id',
+				text: 'ID',
+				show: true,
+			},
+		];
+		const wrapper = mount(WtTableColumnSelect, {
+			props: {
+				headers,
+				staticHeaders: [
+					'id',
+				],
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.vm.$emit('click');
+		await wrapper.vm.$nextTick();
+
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-checkbox',
+			}).length,
+		).toBe(1);
+	});
+
+	it('shows an empty state when there are no changeable headers', async () => {
+		const wrapper = mount(WtTableColumnSelect, {
+			props: {
+				headers: [],
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.vm.$emit('click');
+		await wrapper.vm.$nextTick();
+
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-empty',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('emits change with the draft headers and closes when "Add" is clicked', async () => {
+		const headers = [
+			{
+				value: 'name',
+				text: 'Name',
+				show: true,
+			},
+		];
+		const wrapper = mount(WtTableColumnSelect, {
+			props: {
+				headers,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.vm.$emit('click');
+		await wrapper.vm.$nextTick();
+
+		const [addButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await addButton.trigger('click');
+
+		expect(wrapper.emitted().change).toBeTruthy();
+		expect(wrapper.emitted().change[0][0]).toEqual(headers);
+		expect(wrapper.find('.wt-popup__popup').exists()).toBe(false);
+	});
+
+	it('closes without emitting change when "Cancel" is clicked', async () => {
+		const headers = [
+			{
+				value: 'name',
+				text: 'Name',
+				show: true,
+			},
+		];
+		const wrapper = mount(WtTableColumnSelect, {
+			props: {
+				headers,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-btn',
+			})
+			.vm.$emit('click');
+		await wrapper.vm.$nextTick();
+
+		const [, cancelButton] = wrapper.findAllComponents({
+			name: 'wt-button',
+		});
+		await cancelButton.trigger('click');
+
+		expect(wrapper.emitted().change).toBeFalsy();
+		expect(wrapper.find('.wt-popup__popup').exists()).toBe(false);
+	});
 });

package/src/components/wt-tabs/__tests__/WtTabs.spec.js

@@ -47,4 +47,59 @@ describe('WtTabs', () => {
 		});
 		expect(wrapper.find('.wt-tab').text()).toBe(custom);
 	});
+
+	it('highlights the tab matching current.value', () => {
+		const wrapper = shallowMount(WtTabs, {
+			props: {
+				tabs,
+				current: {
+					value: 'tab1',
+				},
+			},
+		});
+		expect(wrapper.find('.wt-tab').classes()).toContain('wt-tab--highlight');
+	});
+
+	it('does not highlight when current does not match any tab', () => {
+		const wrapper = shallowMount(WtTabs, {
+			props: {
+				tabs,
+				current: {
+					value: 'other',
+				},
+			},
+		});
+		expect(wrapper.find('.wt-tab').classes()).not.toContain(
+			'wt-tab--highlight',
+		);
+	});
+
+	it('applies the wide modifier class', () => {
+		const wrapper = shallowMount(WtTabs, {
+			props: {
+				tabs,
+				wide: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-tabs--wide');
+	});
+
+	it('renders a button for every tab', () => {
+		const multiTabs = [
+			{
+				value: 'a',
+				text: 'A',
+			},
+			{
+				value: 'b',
+				text: 'B',
+			},
+		];
+		const wrapper = shallowMount(WtTabs, {
+			props: {
+				tabs: multiTabs,
+			},
+		});
+		expect(wrapper.findAll('.wt-tab').length).toBe(multiTabs.length);
+	});
 });

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -52,4 +52,53 @@ describe('WtTextarea', () => {
 		});
 		expect(wrapper.emitted().enter).toBeFalsy();
 	});
+
+	it('always emits keydown regardless of autoresize', () => {
+		const wrapper = shallowMount(WtTextarea, {
+			stubs: {
+				WtLabel,
+			},
+		});
+		wrapper.find('.wt-textarea__textarea').trigger('keydown', {
+			key: 'a',
+		});
+		expect(wrapper.emitted().keydown).toBeTruthy();
+	});
+
+	it('does not emit enter for shift+Enter even with autoresize', () => {
+		const wrapper = shallowMount(WtTextarea, {
+			stubs: {
+				WtLabel,
+			},
+			props: {
+				autoresize: true,
+			},
+		});
+		wrapper.find('.wt-textarea__textarea').trigger('keydown', {
+			key: 'Enter',
+			shiftKey: true,
+		});
+		expect(wrapper.emitted().enter).toBeFalsy();
+	});
+
+	it('emits paste and blur events', () => {
+		const wrapper = shallowMount(WtTextarea, {
+			stubs: {
+				WtLabel,
+			},
+		});
+		wrapper.find('.wt-textarea__textarea').trigger('paste');
+		wrapper.find('.wt-textarea__textarea').trigger('blur');
+		expect(wrapper.emitted().paste).toBeTruthy();
+		expect(wrapper.emitted().blur).toBeTruthy();
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtTextarea, {
+			stubs: {
+				WtLabel,
+			},
+		});
+		expect(wrapper.findComponent(WtLabel).exists()).toBe(false);
+	});
 });

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

@@ -42,4 +42,33 @@ describe('WtTimeInput', () => {
 			7,
 		]);
 	});
+
+	it('passes min/max/disabled/required down to wt-input-number', () => {
+		const wrapper = shallowMount(WtTimeInput, {
+			props: {
+				minValue: 5,
+				maxValue: 60,
+				disabled: true,
+				required: true,
+			},
+		});
+		const input = wrapper.findComponent({
+			name: 'wt-input-number',
+		});
+		expect(input.props('min')).toBe(5);
+		expect(input.props('max')).toBe(60);
+		expect(input.props('disabled')).toBe(true);
+		expect(input.props('required')).toBe(true);
+	});
+
+	it('defaults minValue to 0', () => {
+		const wrapper = shallowMount(WtTimeInput);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-input-number',
+				})
+				.props('min'),
+		).toBe(0);
+	});
 });