From a3bfc2e91ab7ef9c1e9f6bf376e065ecbdaea8f0 Mon Sep 17 00:00:00 2001
From: Arjan Singh <1598641+arjansingh@users.noreply.github.com>
Date: Thu, 23 Oct 2025 20:10:06 -0700
Subject: [PATCH] fix(TopMenuSection): show current user if logged in (#6239)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

`CurrentUserButton` was not showing at all. Now it shows when the user
is logged in.

## Changes

- Fix template logic
- Add test for `CurrentUserButton` and `LoginButton` display logic.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6239-fix-TopMenuSection-show-current-user-if-logged-in-2956d73d3650812bb9f8fcf5a3c01db5)
by [Unito](https://www.unito.io)
---
 src/components/TopMenuSection.vue             |  6 +-
 .../tests/components/TopMenuSection.test.ts   | 83 +++++++++++++++++++
 2 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 tests-ui/tests/components/TopMenuSection.test.ts

diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 7ce1bb67e..6eafdc215 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -13,10 +13,8 @@
         class="[&:not(:has(*>*:not(:empty)))]:hidden"
       ></div>
       <ComfyActionbar />
-      <template v-if="isDesktop">
-        <LoginButton v-if="!isLoggedIn" />
-        <CurrentUserButton v-else class="shrink-0" />
-      </template>
+      <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+      <LoginButton v-else-if="isDesktop" />
     </div>
   </div>
 </template>
diff --git a/tests-ui/tests/components/TopMenuSection.test.ts b/tests-ui/tests/components/TopMenuSection.test.ts
new file mode 100644
index 000000000..5d92a0cc9
--- /dev/null
+++ b/tests-ui/tests/components/TopMenuSection.test.ts
@@ -0,0 +1,83 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+
+import TopMenuSection from '@/components/TopMenuSection.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { isElectron } from '@/utils/envUtil'
+
+const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => {
+    return {
+      isLoggedIn: computed(() => mockData.isLoggedIn)
+    }
+  }
+}))
+
+vi.mock('@/utils/envUtil')
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    currentUser: null,
+    loading: false
+  }))
+}))
+
+function createWrapper() {
+  return mount(TopMenuSection, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      stubs: {
+        SubgraphBreadcrumb: true,
+        CurrentUserButton: true,
+        LoginButton: true
+      }
+    }
+  })
+}
+
+describe('TopMenuSection', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('authentication state', () => {
+    describe('when user is logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = true
+      })
+
+      it('should display CurrentUserButton and not display LoginButton', () => {
+        const wrapper = createWrapper()
+        expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
+        expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+      })
+    })
+
+    describe('when user is not logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = false
+      })
+
+      describe('on desktop platform', () => {
+        it('should display LoginButton and not display CurrentUserButton', () => {
+          vi.mocked(isElectron).mockReturnValue(true)
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+        })
+      })
+
+      describe('on web platform', () => {
+        it('should not display CurrentUserButton and not display LoginButton', () => {
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+        })
+      })
+    })
+  })
+})