@webitel/ui-sdk 26.8.75 → 26.8.77

package/src/assets/icons/sprite/call.svg

@@ -1,4 +1,3 @@
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M4.12302 3.10133C5.60827 1.63289 7.91438 1.63289 9.39964 3.10133L10.6027 4.29076C11.2259 4.9069 11.5869 5.73865 11.5575 6.63726C11.5284 7.52905 11.1223 8.33214 10.5024 8.94495L10.1724 9.27129C10.5972 10.1021 11.2447 10.9718 12.1065 11.8238C12.8562 12.5651 13.7961 13.2183 14.7373 13.7196L15.151 13.3106C16.4357 12.0404 18.4411 12.0404 19.7258 13.3106L20.9289 14.5001C20.9565 14.5273 20.9832 14.5555 21.0089 14.5846C21.6712 15.333 21.9552 16.2553 21.9954 17.0906C22.0353 17.9188 21.8437 18.8023 21.3775 19.5396C21.3067 19.6516 21.2235 19.7551 21.1294 19.8481L20.4276 20.5419C19.2103 21.7455 17.6267 22.2099 15.9741 21.9128L15.9567 21.9097C12.9525 21.3385 9.7479 19.5567 7.14329 16.9861C4.41754 14.3941 2.73098 11.2318 2.14584 8.298C1.69091 6.54212 2.35115 4.85314 3.42124 3.79517L4.12302 3.10133ZM7.9935 4.52357C7.28741 3.82548 6.23525 3.82548 5.52916 4.52357L4.82738 5.21741C4.18471 5.85279 3.82621 6.83916 4.08694 7.81548C4.09266 7.83692 4.09767 7.85854 4.10196 7.88032C4.59644 10.3918 6.06806 13.2061 8.52787 15.5428L8.54193 15.5565C10.9164 17.9022 13.7769 19.4581 16.3254 19.9439L16.3279 19.9444C17.3568 20.1293 18.279 19.8537 19.0215 19.1197L19.7019 18.447C19.9107 18.104 20.02 17.6492 19.9978 17.1868C19.9752 16.7174 19.818 16.2601 19.5166 15.9162L18.3197 14.7329C17.8141 14.233 17.0627 14.233 16.5571 14.7329L15.6549 15.6249C15.5539 15.7248 15.4416 15.7973 15.3302 15.8463C15.0674 15.9619 14.7675 15.959 14.5069 15.8383C13.2047 15.2347 11.8074 14.3406 10.7004 13.2461C9.48869 12.0481 8.56777 10.7419 8.04775 9.4224C7.96653 9.2163 7.95604 8.98907 8.01793 8.77636C8.06828 8.60332 8.16411 8.44433 8.29426 8.31566L9.0963 7.52271C9.40888 7.21366 9.54863 6.8778 9.5586 6.57204C9.56854 6.26744 9.45095 5.96452 9.19655 5.713L7.9935 4.52357Z"/>
+    <path d="M6.30249 2.01553C6.68416 2.06455 7.04671 2.2239 7.34644 2.46963L7.49194 2.59951L7.49878 2.60732L10.0994 5.29971C10.4621 5.6659 10.6785 6.15519 10.6941 6.66689C10.7097 7.18146 10.5196 7.67751 10.158 8.04092L10.1589 8.04189C10.0499 8.15217 9.7815 8.47237 9.54077 8.81631L9.37573 9.06436C9.32602 9.14388 9.28241 9.21956 9.24683 9.28799C9.21139 9.3562 9.18861 9.40996 9.17554 9.44814C9.17172 9.45931 9.16819 9.46714 9.16675 9.47256C9.17905 9.73281 9.29259 9.99233 9.48999 10.1923L13.7898 14.4862L13.8699 14.5575C14.0104 14.6727 14.1735 14.7506 14.3425 14.787L14.5134 14.8095C14.5189 14.8081 14.5274 14.8055 14.5388 14.8017C14.5772 14.7885 14.6317 14.7658 14.7 14.7304C14.837 14.6592 15.002 14.5556 15.1726 14.4364C15.517 14.1959 15.8375 13.9272 15.948 13.8183C16.3119 13.4576 16.8089 13.2688 17.323 13.2841C17.8372 13.2997 18.3307 13.5177 18.698 13.8827L21.3972 16.5614L21.4001 16.5644C21.72 16.8873 21.9277 17.3058 21.9851 17.7509L21.9998 17.9433L21.9959 18.1366L21.9773 18.3026C21.917 18.6876 21.7403 19.0466 21.4626 19.3271L21.4617 19.329L20.1257 20.661L19.9773 20.8026C19.2214 21.4911 18.2508 21.9064 17.2097 21.9862L17.0017 21.997C15.9605 22.0318 14.918 21.7315 14.0271 21.1435L14.0193 21.1386C9.9189 18.3161 6.32343 14.8049 3.40503 10.7792L2.82984 9.96768L2.82593 9.96084L2.82202 9.95498C2.24305 9.05651 1.9554 8.0097 2.00562 6.96865L2.02027 6.76064C2.1222 5.65083 2.60645 4.62709 3.39527 3.86514L4.7273 2.53604C5.09344 2.17517 5.59268 1.98538 6.11011 2.00088L6.30249 2.01553ZM4.80835 5.28115C4.80069 5.2888 4.7927 5.29609 4.78491 5.30361C4.34863 5.72504 4.07064 6.29971 4.01148 6.94326C3.95245 7.5865 4.11626 8.266 4.49683 8.86123C7.36533 13.0067 10.9756 16.6103 15.1287 19.4735L15.3552 19.6112C15.8159 19.8645 16.3187 19.9951 16.8113 19.9999L17.0574 19.9911C17.7047 19.9413 18.2849 19.6726 18.7136 19.245L19.9832 17.9774C19.9824 17.9766 19.982 17.9754 19.9812 17.9745L17.2888 15.3026L17.2878 15.3017V15.3007C17.061 15.5131 16.6855 15.8194 16.3181 16.0761C16.1086 16.2224 15.8651 16.3795 15.6218 16.5058H15.6209C15.491 16.5731 15.3432 16.6406 15.1863 16.6942L15.1843 16.6952C15.0819 16.7301 14.9837 16.7536 15.0095 16.747C14.8167 16.7964 14.6175 16.8169 14.4187 16.8075C13.7488 16.7757 13.1119 16.5223 12.6013 16.1034C12.5792 16.0853 12.5572 16.0669 12.5359 16.0478L12.4558 15.9755C12.4289 15.9514 12.4023 15.9268 12.3767 15.9013L8.07691 11.6083C8.07353 11.6049 8.06951 11.601 8.06616 11.5976C7.53334 11.0578 7.20502 10.3357 7.1687 9.56729C7.15913 9.36475 7.18077 9.16186 7.23218 8.96572C7.24437 8.91924 7.25598 8.88157 7.26245 8.86123C7.26917 8.84013 7.27535 8.82331 7.27808 8.81533C7.28076 8.80749 7.28284 8.79908 7.28296 8.79873C7.28351 8.79716 7.28352 8.79807 7.28296 8.79971C7.33859 8.63724 7.40834 8.48843 7.47241 8.36514L7.57202 8.1835C7.67637 8.00265 7.7923 7.82674 7.9021 7.66982C8.15671 7.30606 8.46076 6.93034 8.67456 6.70205C8.67023 6.69765 8.66518 6.6938 8.66089 6.68936L6.09741 4.03604L6.07495 4.01553L4.80835 5.28115Z"/>
 </svg>

package/src/components/transitions/__tests__/ExpandTransition.spec.js

@@ -7,4 +7,19 @@ describe('ExpandTransition', () => {
 		const wrapper = shallowMount(ExpandTransition);
 		expect(wrapper.exists()).toBe(true);
 	});
+
+	it('renders default slot content', () => {
+		const wrapper = shallowMount(ExpandTransition, {
+			slots: {
+				default: '<div class="content">hello</div>',
+			},
+		});
+		expect(wrapper.find('.content').text()).toBe('hello');
+	});
+
+	it('sets height to auto on afterEnter', () => {
+		const element = document.createElement('div');
+		ExpandTransition.methods.afterEnter(element);
+		expect(element.style.height).toBe('auto');
+	});
 });

package/src/components/transitions/__tests__/WtReplaceTransition.spec.js

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils';
+
+import WtReplaceTransition from '../cases/wt-replace-transition.vue';
+
+describe('WtReplaceTransition', () => {
+	it('renders default slot content', () => {
+		const wrapper = mount(WtReplaceTransition, {
+			slots: {
+				default: '<div class="content">hello</div>',
+			},
+		});
+		expect(wrapper.find('.content').text()).toBe('hello');
+	});
+
+	it('builds the transition name from the default opacity pattern', () => {
+		const wrapper = mount(WtReplaceTransition, {
+			slots: {
+				default: '<div />',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-transition',
+				})
+				.props('name'),
+		).toBe('fade-opacity');
+	});
+
+	it('builds the transition name from a custom pattern', () => {
+		const wrapper = mount(WtReplaceTransition, {
+			props: {
+				pattern: 'slide-up',
+			},
+			slots: {
+				default: '<div />',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-transition',
+				})
+				.props('name'),
+		).toBe('fade-slide-up');
+	});
+
+	it('passes duration, appear and mode props through to wt-transition', () => {
+		const wrapper = mount(WtReplaceTransition, {
+			props: {
+				duration: 'slow',
+				appear: true,
+				mode: 'in-out',
+			},
+			slots: {
+				default: '<div />',
+			},
+		});
+		const inner = wrapper.findComponent({
+			name: 'wt-transition',
+		});
+		expect(inner.props('duration')).toBe('slow');
+		expect(inner.props('appear')).toBe(true);
+		expect(inner.props('mode')).toBe('in-out');
+	});
+});

package/src/components/transitions/__tests__/WtTransition.spec.js

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+
+import WtTransition from '../wt-transition.vue';
+
+describe('WtTransition', () => {
+	it('renders default slot content', () => {
+		const wrapper = mount(WtTransition, {
+			slots: {
+				default: '<div class="content">hello</div>',
+			},
+		});
+		expect(wrapper.find('.content').text()).toBe('hello');
+	});
+
+	it('applies the default fast duration class', () => {
+		const wrapper = mount(WtTransition, {
+			slots: {
+				default: '<div />',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-transition--fast');
+	});
+
+	it('applies a custom duration class', () => {
+		const wrapper = mount(WtTransition, {
+			props: {
+				duration: 'slow',
+			},
+			slots: {
+				default: '<div />',
+			},
+		});
+		expect(wrapper.classes()).toContain('wt-transition--slow');
+	});
+});

package/src/components/wt-action-bar/WtActionBarActionsOrder.js

@@ -1,4 +1,4 @@
-import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { IconAction } from '../../enums';
 
 export const tableActionsOrder = [
 	IconAction.ADD,

package/src/components/wt-action-bar/__tests__/WtActionBar.spec.js

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+
+import { IconAction } from '../../../enums';
+import {
+	sectionActionsOrder,
+	tableActionsOrder,
+} from '../WtActionBarActionsOrder.js';
+import WtActionBar from '../wt-action-bar.vue';
+
+describe('WtActionBar', () => {
+	it('renders a component', () => {
+		const wrapper = mount(WtActionBar);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders table actions by default', () => {
+		const wrapper = mount(WtActionBar);
+		const actions = wrapper.findAllComponents({
+			name: 'wt-icon-action',
+		});
+		expect(actions.length).toBe(tableActionsOrder.length);
+	});
+
+	it('renders section actions when mode is "section"', () => {
+		const wrapper = mount(WtActionBar, {
+			props: {
+				mode: 'section',
+			},
+		});
+		const actions = wrapper.findAllComponents({
+			name: 'wt-icon-action',
+		});
+		expect(actions.length).toBe(sectionActionsOrder.length);
+	});
+
+	it('renders only actions listed in include', () => {
+		const included = [
+			tableActionsOrder[0],
+		];
+		const wrapper = mount(WtActionBar, {
+			props: {
+				include: included,
+			},
+		});
+		const actions = wrapper.findAllComponents({
+			name: 'wt-icon-action',
+		});
+		expect(actions.length).toBe(included.length);
+		expect(actions[0].props('action')).toBe(included[0]);
+	});
+
+	it('excludes actions listed in exclude', () => {
+		const excluded = tableActionsOrder[0];
+		const wrapper = mount(WtActionBar, {
+			props: {
+				exclude: [
+					excluded,
+				],
+			},
+		});
+		const actions = wrapper.findAllComponents({
+			name: 'wt-icon-action',
+		});
+		expect(actions.length).toBe(tableActionsOrder.length - 1);
+		expect(actions.some((a) => a.props('action') === excluded)).toBe(false);
+	});
+
+	it('emits click:[action] when an action is clicked', async () => {
+		const action = tableActionsOrder[0];
+		const wrapper = mount(WtActionBar, {
+			props: {
+				include: [
+					action,
+				],
+			},
+		});
+		await wrapper
+			.findComponent({
+				name: 'wt-icon-action',
+			})
+			.trigger('click');
+		expect(wrapper.emitted(`click:${action}`)).toBeTruthy();
+	});
+
+	it('disables an action via disabled:[action] prop', () => {
+		const action = IconAction.SORT;
+		const wrapper = mount(WtActionBar, {
+			props: {
+				include: [
+					action,
+				],
+				[`disabled:${action}`]: true,
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-action',
+				})
+				.props('disabled'),
+		).toBe(true);
+	});
+
+	it('passes sort:order prop to sort action', () => {
+		const wrapper = mount(WtActionBar, {
+			props: {
+				include: [
+					IconAction.SORT,
+				],
+				'sort:order': 'asc',
+			},
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'wt-icon-action',
+				})
+				.props('sort:order'),
+		).toBe('asc');
+	});
+});

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