diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue index d64a6dfe2..5a21ce9c3 100644 --- a/src/components/topbar/CurrentUserButton.vue +++ b/src/components/topbar/CurrentUserButton.vue @@ -18,7 +18,15 @@ - + diff --git a/src/components/topbar/CurrentUserPopover.test.ts b/src/components/topbar/CurrentUserPopover.test.ts index 4b1cb114c..f46ae0990 100644 --- a/src/components/topbar/CurrentUserPopover.test.ts +++ b/src/components/topbar/CurrentUserPopover.test.ts @@ -85,10 +85,24 @@ const mockFetchStatus = vi.fn().mockResolvedValue(undefined) vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({ useSubscription: vi.fn(() => ({ isActiveSubscription: { value: true }, + subscriptionTierName: { value: 'Creator' }, + subscriptionTier: { value: 'CREATOR' }, fetchStatus: mockFetchStatus })) })) +// Mock the useSubscriptionDialog composable +const mockSubscriptionDialogShow = vi.fn() +vi.mock( + '@/platform/cloud/subscription/composables/useSubscriptionDialog', + () => ({ + useSubscriptionDialog: vi.fn(() => ({ + show: mockSubscriptionDialogShow, + hide: vi.fn() + })) + }) +) + // Mock UserAvatar component vi.mock('@/components/common/UserAvatar.vue', () => ({ default: { @@ -272,4 +286,22 @@ describe('CurrentUserPopover', () => { expect(wrapper.emitted('close')).toBeTruthy() expect(wrapper.emitted('close')!.length).toBe(1) }) + + it('opens subscription dialog and emits close event when plans & pricing item is clicked', async () => { + const wrapper = mountComponent() + + const plansPricingItem = wrapper.find( + '[data-testid="plans-pricing-menu-item"]' + ) + expect(plansPricingItem.exists()).toBe(true) + + await plansPricingItem.trigger('click') + + // Verify subscription dialog show was called + expect(mockSubscriptionDialogShow).toHaveBeenCalled() + + // Verify close event was emitted + expect(wrapper.emitted('close')).toBeTruthy() + expect(wrapper.emitted('close')!.length).toBe(1) + }) }) diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue index adad38de4..e2630c5be 100644 --- a/src/components/topbar/CurrentUserPopover.vue +++ b/src/components/topbar/CurrentUserPopover.vue @@ -21,9 +21,12 @@

{{ userEmail }}

-

+ {{ subscriptionTierName }} -

+ @@ -33,11 +36,16 @@ v-if="authStore.isFetchingBalance" width="4rem" height="1.25rem" - class="flex-1" + class="w-full" /> - {{ + {{ formattedBalance }} +