@webitel/ui-sdk 26.8.75 → 26.8.77

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

package/src/components/wt-tree/__tests__/WtTree.spec.js

@@ -1,14 +1,138 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { WtTreeMode } from '../types/WtTreeMode';
 import WtTree from '../wt-tree.vue';
 
+const data = [
+	{
+		label: 'Parent 1',
+		children: [
+			{
+				label: 'Child 1.1',
+			},
+			{
+				label: 'Child 1.2',
+			},
+		],
+	},
+	{
+		label: 'Parent 2',
+	},
+];
+
 describe('WtTree', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtTree, {
-			stubs: {
-				WtTree: true,
+			props: {
+				data: [],
 			},
 		});
 		expect(wrapper.classes('wt-tree')).toBe(true);
 	});
+
+	it('renders a wt-tree-line per top-level item in tree mode by default', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+			},
+		});
+		expect(
+			wrapper.findAllComponents({
+				name: 'wt-tree-line',
+			}).length,
+		).toBe(data.length);
+		expect(wrapper.find('.wt-tree__list-content').exists()).toBe(false);
+	});
+
+	it('forwards update:modelValue from a tree-line up', async () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-tree-line',
+			})
+			.vm.$emit('update:modelValue', data[0]);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			data[0],
+		]);
+	});
+
+	it('renders a flattened list of all nested items in list mode', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+			},
+		});
+		const labels = wrapper.findAll('.wt-tree__label');
+		expect(labels.length).toBe(4);
+		expect(labels.map((l) => l.text())).toEqual([
+			'Parent 1',
+			'Child 1.1',
+			'Child 1.2',
+			'Parent 2',
+		]);
+	});
+
+	it('emits update:modelValue when a list item is clicked', async () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+			},
+		});
+		await wrapper.findAll('.wt-tree__label')[1].trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			data[0].children[0],
+		]);
+	});
+
+	it('marks the selected list item as active', () => {
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+				modelValue: data[1],
+			},
+		});
+		const wrappers = wrapper.findAll('.wt-tree__label-wrapper');
+		expect(wrappers.at(-1).classes()).toContain('active');
+		expect(wrappers[0].classes()).not.toContain('active');
+	});
+
+	it('uses itemData to compare/select values when provided', async () => {
+		const keyedData = [
+			{
+				id: 'a',
+				label: 'A',
+			},
+			{
+				id: 'b',
+				label: 'B',
+			},
+		];
+		const wrapper = shallowMount(WtTree, {
+			props: {
+				data: keyedData,
+				mode: WtTreeMode.List,
+				itemLabel: 'label',
+				itemData: 'id',
+				modelValue: 'b',
+			},
+		});
+		expect(
+			wrapper.findAll('.wt-tree__label-wrapper').at(-1).classes(),
+		).toContain('active');
+
+		await wrapper.findAll('.wt-tree__label')[0].trigger('click');
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			'a',
+		]);
+	});
 });