@webitel/ui-sdk 26.8.75 → 26.8.76

package/src/components/wt-action-bar/wt-action-bar.vue

@@ -8,6 +8,14 @@
       v-bind="{ size }"
     />
 
+    <!--    @slot switcher here
+            @scope `{ size<ComponentSize> }`
+     -->
+    <slot
+      name="switcher"
+      v-bind="{ size }"
+    />
+
     <!--    @slot custom actions here
             @scope `{ size<ComponentSize> }`
      -->
@@ -23,7 +31,7 @@
     >
       <wt-icon-action
         :action="action"
-        :disabled="props[`disabled:${kebabToCamel(action)}`]"
+        :disabled="isActionDisabled(action)"
         v-bind="getActionProps(action)"
         @click="handleActionClick(action)"
       />
@@ -31,26 +39,27 @@
   </div>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
 
-import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { IconAction, type IconAction as IconActionValue } from '../../enums';
 import { kebabToCamel } from '../../scripts/caseConverters.js';
-import { SortSymbols } from '../../scripts/sortQueryAdapters.js';
 import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
 import {
 	sectionActionsOrder,
 	tableActionsOrder,
 } from './WtActionBarActionsOrder.js';
 
+type SortOrder = 'asc' | 'desc' | null;
+
 const props = defineProps({
 	/**
 	 * [`'table'`, `'section'`]
-	 * */
+	 */
 	mode: {
-		type: String,
+		type: String as PropType<'table' | 'section'>,
 		default: 'table',
-		validator: (v) =>
+		validator: (v: string) =>
 			[
 				'table',
 				'section',
@@ -62,59 +71,69 @@ const props = defineProps({
 	 */
 	size: {
 		type: String,
-		// default: 'md',
-		// validator: (v) => ['sm', 'md', 'lg'].includes(v),
 	},
 
 	/**
 	 * Leave the default value for the mode only listed in includes prop
 	 */
-
 	include: {
-		type: Array,
+		type: Array as PropType<IconActionValue[]>,
 		default: () => [],
 	},
 
 	/**
 	 * Leave the default values for the mode, except for those in exclude prop
 	 */
-
 	exclude: {
-		type: Array,
+		type: Array as PropType<IconActionValue[]>,
 		default: () => [],
 	},
 
 	'sort:order': {
-		type: String,
+		type: String as unknown as PropType<SortOrder>,
 		default: null,
 		required: false,
-		validator: (v) => Object.values(SortSymbols).includes(v),
+		validator: (v: SortOrder) =>
+			[
+				'asc',
+				'desc',
+				null,
+			].includes(v),
 	},
 
 	/**
 	 * Built dynamically on `disabled:[IconAction]` pattern for all available [IconActions](../../enums/IconAction/Readme.md).
 	 */
-
 	disabled: {
-		// Not implemented, but can be used to disable all actions
 		type: Boolean,
 		default: false,
 	},
 
-	...Object.values(IconAction).reduce((acc, action) => {
-		acc[`disabled:${action}`] = {
-			type: Boolean,
-			default: false,
-		};
-		return acc;
-	}, {}),
-});
-const emit = defineEmits([
 	/**
-	 * click:IconAction
+	 * Vue SFC cannot resolve mapped types over imported `typeof` aliases, so
+	 * `disabled:*` stay runtime-declared (same as pre-TS version).
 	 */
-	...Object.values(IconAction).map((action) => `click:${action}`),
-]);
+	...Object.values(IconAction).reduce(
+		(acc, action) => {
+			acc[`disabled:${action}`] = {
+				type: Boolean,
+				default: false,
+			};
+			return acc;
+		},
+		{} as Record<
+			`disabled:${IconActionValue}`,
+			{
+				type: BooleanConstructor;
+				default: false;
+			}
+		>,
+	),
+});
+
+const emit = defineEmits(
+	Object.values(IconAction).map((action) => `click:${action}` as const),
+);
 
 const shownActions = computed(() => {
 	const actionsOrder =
@@ -129,15 +148,20 @@ const shownActions = computed(() => {
 	return actionsOrder;
 });
 
-const handleActionClick = (action) => {
+const handleActionClick = (action: IconActionValue) => {
 	emit(`click:${action}`);
 };
 
-const getActionProps = (action) => {
+const isActionDisabled = (action: IconActionValue): boolean => {
+	const key = `disabled:${kebabToCamel(action)}` as keyof typeof props;
+	return Boolean(props[key]);
+};
+
+const getActionProps = (action: IconActionValue) => {
 	switch (action) {
 		case IconAction.SORT:
 			return {
-				'sort:order': props['sort:order'],
+				'sort:order': props['sort:order'] ?? undefined,
 			};
 		default:
 			return {};

package/src/components/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import { WtApplication } from '@webitel/ui-sdk/enums';
 import WtAppNavigator from '../wt-app-navigator.vue';
@@ -6,22 +6,24 @@ import WtAppNavigator from '../wt-app-navigator.vue';
 const apps = [
 	{
 		name: WtApplication.Admin,
-		href: '',
+		href: '/admin',
 	},
 	{
 		name: WtApplication.History,
-		href: '',
+		href: '/history',
 	},
 	{
 		name: WtApplication.Supervisor,
-		href: '',
+		href: '/supervisor',
 	},
 ];
+
 describe('WtAppNavigator', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtAppNavigator);
 		expect(wrapper.classes('wt-app-navigator')).toBe(true);
 	});
+
 	it('renders specified app cards', () => {
 		const wrapper = shallowMount(WtAppNavigator, {
 			props: {
@@ -30,4 +32,63 @@ describe('WtAppNavigator', () => {
 		});
 		expect(wrapper.findAll('.wt-app-navigator__card').length).toBe(3);
 	});
+
+	it('renders app cards ordered by the fixed navigator order, not input order', () => {
+		const wrapper = shallowMount(WtAppNavigator, {
+			props: {
+				apps: [
+					{
+						name: WtApplication.Crm,
+						href: '',
+					},
+					{
+						name: WtApplication.Agent,
+						href: '',
+					},
+					{
+						name: WtApplication.Admin,
+						href: '',
+					},
+				],
+			},
+		});
+		const links = wrapper.findAll('.wt-app-navigator__card__link');
+		expect(links.map((l) => l.attributes('href'))).toEqual(
+			wrapper.vm.formattedApps.map((app) => app.href),
+		);
+		expect(wrapper.vm.formattedApps.map((app) => app.name)).toEqual([
+			WtApplication.Agent,
+			WtApplication.Admin,
+			WtApplication.Crm,
+		]);
+	});
+
+	it('marks the current app as active', () => {
+		const wrapper = shallowMount(WtAppNavigator, {
+			props: {
+				apps,
+				currentApp: WtApplication.History,
+			},
+		});
+		const activeCard = wrapper.find('.wt-app-navigator__card.active');
+		expect(activeCard.exists()).toBe(true);
+		expect(activeCard.text()).toContain('History');
+	});
+
+	it('is closed by default and toggles open when the trigger button is clicked', async () => {
+		const wrapper = mount(WtAppNavigator, {
+			props: {
+				apps,
+			},
+		});
+		expect(wrapper.find('nav').attributes('style')).toContain('display: none');
+
+		await wrapper.find('.wt-app-navigator__btn').trigger('click');
+		expect(wrapper.find('nav').attributes('style') || '').not.toContain(
+			'display: none',
+		);
+
+		await wrapper.find('.wt-app-navigator__btn').trigger('click');
+		expect(wrapper.find('nav').attributes('style')).toContain('display: none');
+	});
 });

package/src/components/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtHeaderActions from '../wt-header-actions.vue';
 
@@ -8,7 +8,7 @@ describe('WtHeaderActions', () => {
 		expect(wrapper.classes('wt-header-actions')).toBe(true);
 	});
 
-	it('renders user data', () => {
+	it('renders user data from name/account fields', () => {
 		const user = {
 			name: 'user nanme',
 			account: 'acc@ou.nt',
@@ -23,4 +23,83 @@ describe('WtHeaderActions', () => {
 			user.account,
 		);
 	});
+
+	it('falls back to username/preferredUsername fields', () => {
+		const user = {
+			username: 'fallback-username',
+			preferredUsername: 'fallback@account',
+		};
+		const wrapper = shallowMount(WtHeaderActions, {
+			props: {
+				user,
+			},
+		});
+		expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.username);
+		expect(wrapper.find('.wt-header-actions__account').text()).toBe(
+			user.preferredUsername,
+		);
+	});
+
+	it('does not render header when user has no name or account', () => {
+		const wrapper = shallowMount(WtHeaderActions);
+		expect(wrapper.find('.wt-header-actions__header').exists()).toBe(false);
+	});
+
+	it('does not render footer when buildInfo is not passed', () => {
+		const wrapper = shallowMount(WtHeaderActions);
+		expect(wrapper.find('.wt-header-actions__footer').exists()).toBe(false);
+	});
+
+	it('renders build version in footer when buildInfo is passed', () => {
+		const wrapper = shallowMount(WtHeaderActions, {
+			props: {
+				buildInfo: {
+					release: '1.2.3',
+					build: '456',
+				},
+			},
+		});
+		const footer = wrapper.find('.wt-header-actions__build__version');
+		expect(footer.exists()).toBe(true);
+		expect(footer.text()).toContain('1.2.3-456');
+	});
+
+	it('emits settings and closes the panel when settings is clicked', async () => {
+		const wrapper = mount(WtHeaderActions);
+		await wrapper.find('.wt-header-actions__btn').trigger('click');
+
+		const settingsLink = wrapper.findAll('.wt-header-actions__action__link')[1];
+		await settingsLink.trigger('click');
+		expect(wrapper.emitted().settings).toBeTruthy();
+		expect(
+			wrapper.find('.wt-header-actions__panel-wrapper').attributes('style'),
+		).toContain('display: none');
+	});
+
+	it('emits logout and closes the panel when logout is clicked', async () => {
+		const wrapper = mount(WtHeaderActions);
+		await wrapper.find('.wt-header-actions__btn').trigger('click');
+
+		const logoutLink = wrapper.find(
+			'.wt-header-actions__action--logout .wt-header-actions__action__link',
+		);
+		await logoutLink.trigger('click');
+		expect(wrapper.emitted().logout).toBeTruthy();
+		expect(
+			wrapper.find('.wt-header-actions__panel-wrapper').attributes('style'),
+		).toContain('display: none');
+	});
+
+	it('toggles panel visibility when the account button is clicked', async () => {
+		const wrapper = mount(WtHeaderActions);
+		expect(
+			wrapper.find('.wt-header-actions__panel-wrapper').attributes('style'),
+		).toContain('display: none');
+
+		await wrapper.find('.wt-header-actions__btn').trigger('click');
+		const style =
+			wrapper.find('.wt-header-actions__panel-wrapper').attributes('style') ||
+			'';
+		expect(style).not.toContain('display: none');
+	});
 });

package/src/components/wt-avatar/__tests__/WtAvatar.spec.js

@@ -0,0 +1,111 @@
+import { mount, shallowMount } from '@vue/test-utils';
+
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum.js';
+import WtAvatar from '../wt-avatar.vue';
+
+describe('WtAvatar', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtAvatar);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('renders an image when src is provided', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				src: 'http://example.com/pic.png',
+			},
+		});
+		const img = wrapper.find('.wt-avatar__img');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('http://example.com/pic.png');
+	});
+
+	it('renders "N/A" letters when no src or username is provided', () => {
+		const wrapper = mount(WtAvatar);
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('N/A');
+	});
+
+	it('renders letters from username when src is not provided', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'John Doe',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('JD');
+	});
+
+	it('renders single letter for a single-word username', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'Cher',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__letters-text').text()).toBe('C');
+	});
+
+	it('renders bot icon when bot prop is true, ignoring username/src', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				bot: true,
+				username: 'John Doe',
+			},
+		});
+		expect(wrapper.find('.wt-avatar__bot').exists()).toBe(true);
+		expect(wrapper.find('.wt-avatar__letters-text').exists()).toBe(false);
+		expect(wrapper.find('.wt-avatar__img').exists()).toBe(false);
+	});
+
+	it('does not render a badge by default', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				username: 'John Doe',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-badge',
+				})
+				.exists(),
+		).toBe(false);
+	});
+
+	it('renders a badge for eligible statuses when badge is true', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				badge: true,
+				status: AbstractUserStatus.ONLINE,
+			},
+		});
+		const badge = wrapper.findComponent({
+			name: 'wt-badge',
+		});
+		expect(badge.exists()).toBe(true);
+		expect(badge.props('iconBadge')).toBe(AbstractUserStatus.ONLINE);
+	});
+
+	it('renders a badge without an icon for non-eligible statuses when badge is true', () => {
+		const wrapper = mount(WtAvatar, {
+			props: {
+				badge: true,
+				status: AbstractUserStatus.OFFLINE,
+			},
+		});
+		const badge = wrapper.findComponent({
+			name: 'wt-badge',
+		});
+		expect(badge.exists()).toBe(true);
+		expect(badge.props('iconBadge')).toBe(null);
+	});
+
+	it('applies the size class', () => {
+		const wrapper = shallowMount(WtAvatar, {
+			props: {
+				size: 'lg',
+			},
+		});
+		expect(wrapper.classes()).toContain('p-avatar-lg');
+	});
+});

package/src/components/wt-badge/__tests__/WtBadge.spec.js

@@ -0,0 +1,80 @@
+import { shallowMount } from '@vue/test-utils';
+
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum.js';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtBadge);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+
+	it('applies compat-mode class when there is no default slot content', () => {
+		const wrapper = shallowMount(WtBadge);
+		expect(wrapper.classes()).toContain('wt-badge--compat-mode');
+	});
+
+	it('does not apply compat-mode class when default slot has content', () => {
+		const wrapper = shallowMount(WtBadge, {
+			slots: {
+				default: 'content',
+			},
+		});
+		expect(wrapper.classes()).not.toContain('wt-badge--compat-mode');
+	});
+
+	it('applies the outside class when outside prop is true', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				outside: true,
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-badge--outside');
+	});
+
+	it('hides the indicator when hidden prop is true', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				hidden: true,
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator').attributes('style')).toContain(
+			'display: none',
+		);
+	});
+
+	it('does not render an icon pic when iconBadge is not a known status', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				iconBadge: 'unknown',
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator__pic').exists()).toBe(false);
+	});
+
+	it.each([
+		AbstractUserStatus.DND,
+		AbstractUserStatus.ONLINE,
+		AbstractUserStatus.PAUSE,
+	])('renders an icon pic for iconBadge=%s', (status) => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				iconBadge: status,
+			},
+		});
+		const pic = wrapper.find('.wt-badge-indicator__pic');
+		expect(pic.exists()).toBe(true);
+		expect(pic.attributes('alt')).toBe(status);
+	});
+
+	it('applies the colorVariable as background color', () => {
+		const wrapper = shallowMount(WtBadge, {
+			props: {
+				colorVariable: 'success-color',
+			},
+		});
+		expect(wrapper.find('.wt-badge-indicator').attributes('style')).toContain(
+			'var(--success-color)',
+		);
+	});
+});

package/src/components/wt-badge-new/__tests__/WtBadge.spec.js

@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils';
+
+import { ComponentSize } from '../../../enums';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge (new)', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtBadge);
+		expect(wrapper.classes()).toContain('wt-badge');
+	});
+
+	it('renders the value prop', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				value: '5',
+			},
+		});
+		expect(wrapper.text()).toContain('5');
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(WtBadge, {
+			slots: {
+				default: 'slot content',
+			},
+		});
+		expect(wrapper.text()).toContain('slot content');
+	});
+
+	it('applies the default md size class', () => {
+		const wrapper = mount(WtBadge);
+		expect(wrapper.classes()).toContain(`p-badge--${ComponentSize.MD}`);
+	});
+
+	it('applies a custom size class', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				size: ComponentSize.SM,
+			},
+		});
+		expect(wrapper.classes()).toContain(`p-badge--${ComponentSize.SM}`);
+	});
+
+	it('applies a severity class when provided', () => {
+		const wrapper = mount(WtBadge, {
+			props: {
+				severity: 'success',
+			},
+		});
+		expect(wrapper.classes()).toContain('p-badge--success');
+	});
+
+	it('does not apply a severity class when severity is null', () => {
+		const wrapper = mount(WtBadge);
+		expect(
+			wrapper
+				.classes()
+				.some((c) => c.startsWith('p-badge--') && c !== 'p-badge--md'),
+		).toBe(false);
+	});
+});