@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/components/wt-single-select/__tests__/WtSingleSelect.spec.js

@@ -0,0 +1,117 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtSingleSelect from '../wt-single-select.vue';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));
+
+describe('WtSingleSelect', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtSingleSelect);
+		expect(wrapper.classes()).toContain('wt-single-select');
+	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtSingleSelect);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders the label text when passed', () => {
+		const wrapper = mount(WtSingleSelect, {
+			props: {
+				label: 'Choose one',
+			},
+		});
+		expect(wrapper.find('.wt-select__label').text()).toBe('Choose one');
+	});
+
+	it('appends an asterisk to the label when required', () => {
+		const wrapper = mount(WtSingleSelect, {
+			props: {
+				label: 'Choose one',
+				required: true,
+			},
+		});
+		expect(wrapper.find('.wt-select__label').text()).toBe('Choose one*');
+	});
+
+	it('applies the has-value modifier class once a value is selected', () => {
+		const wrapper = shallowMount(WtSingleSelect, {
+			props: {
+				modelValue: 'a',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-single-select--has-value');
+	});
+
+	it('does not apply the has-value modifier class without a value', () => {
+		const wrapper = shallowMount(WtSingleSelect);
+		expect(wrapper.classes()).not.toContain('wt-single-select--has-value');
+	});
+
+	it('normalizes an empty object model to an empty string', () => {
+		const wrapper = mount(WtSingleSelect, {
+			props: {
+				modelValue: {},
+			},
+		});
+		expect(wrapper.classes()).not.toContain('wt-single-select--has-value');
+	});
+
+	it('passes disabled and options down to the underlying select', () => {
+		const options = [
+			{
+				label: 'One',
+				value: 1,
+			},
+			{
+				label: 'Two',
+				value: 2,
+			},
+		];
+		const wrapper = shallowMount(WtSingleSelect, {
+			props: {
+				disabled: true,
+				options,
+			},
+		});
+		const select = wrapper.findComponent({
+			name: 'Select',
+		});
+		expect(select.attributes('disabled')).toBe('true');
+	});
+
+	it('maps size prop to the PrimeVue size scale', () => {
+		const wrapper = shallowMount(WtSingleSelect, {
+			props: {
+				size: 'sm',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Select',
+				})
+				.attributes('size'),
+		).toBe('small');
+	});
+
+	it('emits hide when the dropdown hides', async () => {
+		const wrapper = shallowMount(WtSingleSelect);
+		await wrapper
+			.findComponent({
+				name: 'Select',
+			})
+			.vm.$emit('hide');
+		expect(wrapper.emitted().hide).toBeTruthy();
+	});
+});

package/src/components/wt-slider/__tests__/WtSlider.spec.js

@@ -0,0 +1,100 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtSlider from '../wt-slider.vue';
+
+describe('WtSlider', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtSlider);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Slider',
+				})
+				.exists(),
+		).toBe(true);
+	});
+
+	it('applies default min/max/step to the underlying slider', () => {
+		const wrapper = shallowMount(WtSlider);
+		const slider = wrapper.findComponent({
+			name: 'Slider',
+		});
+		expect(slider.attributes('min')).toBe('0');
+		expect(slider.attributes('max')).toBe('100');
+		expect(slider.attributes('step')).toBe('1');
+	});
+
+	it('passes custom min/max/step/disabled down', () => {
+		const wrapper = shallowMount(WtSlider, {
+			props: {
+				min: 10,
+				max: 20,
+				step: 5,
+				disabled: true,
+			},
+		});
+		const slider = wrapper.findComponent({
+			name: 'Slider',
+		});
+		expect(slider.attributes('min')).toBe('10');
+		expect(slider.attributes('max')).toBe('20');
+		expect(slider.attributes('step')).toBe('5');
+		expect(slider.attributes('disabled')).toBe('true');
+	});
+
+	it('defaults to horizontal orientation', () => {
+		const wrapper = shallowMount(WtSlider);
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Slider',
+				})
+				.attributes('orientation'),
+		).toBe('horizontal');
+	});
+
+	it('uses vertical orientation and applies height style when vertical is true', () => {
+		const wrapper = shallowMount(WtSlider, {
+			props: {
+				vertical: true,
+				height: 200,
+			},
+		});
+		const slider = wrapper.findComponent({
+			name: 'Slider',
+		});
+		expect(slider.attributes('orientation')).toBe('vertical');
+		expect(slider.attributes('style')).toContain('height: 200px');
+	});
+
+	it('applies width style when horizontal and width is provided', () => {
+		const wrapper = shallowMount(WtSlider, {
+			props: {
+				width: 300,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'Slider',
+				})
+				.attributes('style'),
+		).toContain('width: 300px');
+	});
+
+	it('emits update:modelValue when the slider value changes', async () => {
+		const wrapper = shallowMount(WtSlider, {
+			props: {
+				modelValue: 5,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'Slider',
+			})
+			.vm.$emit('update:modelValue', 42);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			42,
+		]);
+	});
+});

package/src/components/wt-stepper/__tests__/WtStepper.spec.js

@@ -0,0 +1,105 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import WtStepper from '../wt-stepper.vue';
+
+const steps = [
+	{
+		name: 'step 1',
+		description: 'description 1',
+	},
+	{
+		name: 'step 2',
+		description: 'description 2',
+	},
+	{
+		name: 'step 3',
+		description: 'description 3',
+	},
+];
+
+describe('WtStepper', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtStepper, {
+			props: {
+				steps,
+			},
+		});
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders a chip for each step', () => {
+		const wrapper = mount(WtStepper, {
+			props: {
+				steps,
+			},
+		});
+		const chips = wrapper.findAllComponents({
+			name: 'wt-chip',
+		});
+		expect(chips.length).toBe(steps.length);
+		expect(chips[0].text()).toBe('step 1');
+	});
+
+	it('marks steps before the active step as completed', () => {
+		const wrapper = shallowMount(WtStepper, {
+			props: {
+				steps,
+				activeStep: 2,
+			},
+		});
+		const chips = wrapper.findAllComponents({
+			name: 'wt-chip',
+		});
+		expect(chips[0].attributes('color')).toBe('primary');
+		expect(chips[1].attributes('color')).toBe('primary');
+		expect(chips[2].attributes('color')).toBe('secondary');
+	});
+
+	it('renders a divider between steps but not before the first one', () => {
+		const wrapper = shallowMount(WtStepper, {
+			props: {
+				steps,
+			},
+		});
+		expect(wrapper.findAll('.wt-stepper-steps__divider').length).toBe(
+			steps.length - 1,
+		);
+	});
+
+	it('renders the description of the active step by default', () => {
+		const wrapper = mount(WtStepper, {
+			props: {
+				steps,
+				activeStep: 2,
+			},
+		});
+		expect(wrapper.find('.wt-stepper-description').text()).toBe(
+			'description 2',
+		);
+	});
+
+	it('renders custom content via the description slot', () => {
+		const wrapper = shallowMount(WtStepper, {
+			props: {
+				steps,
+			},
+			slots: {
+				description: 'Custom description',
+			},
+		});
+		expect(wrapper.text()).toContain('Custom description');
+		expect(wrapper.find('.wt-stepper-description').exists()).toBe(false);
+	});
+
+	it('renders content via the main slot', () => {
+		const wrapper = shallowMount(WtStepper, {
+			props: {
+				steps,
+			},
+			slots: {
+				main: 'Main content',
+			},
+		});
+		expect(wrapper.text()).toContain('Main content');
+	});
+});

package/src/components/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -39,4 +39,51 @@ describe('WtSwitcher', () => {
 		});
 		expect(wrapper.classes('wt-switcher--label-left')).toBe(true);
 	});
+
+	it('does not render a label when no label prop or slot is passed', () => {
+		const wrapper = shallowMount(WtSwitcher, {
+			props: {
+				modelValue: false,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-label',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('emits update:modelValue with the inverted value when toggled', async () => {
+		const wrapper = shallowMount(WtSwitcher, {
+			props: {
+				modelValue: false,
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'ToggleSwitch',
+			})
+			.vm.$emit('update:modelValue', true);
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+			true,
+		]);
+	});
+
+	it('passes disabled down to the underlying switch', () => {
+		const wrapper = shallowMount(WtSwitcher, {
+			props: {
+				modelValue: false,
+				disabled: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'ToggleSwitch',
+				})
+				.attributes('disabled'),
+		).toBe('true');
+	});
 });

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