WIP Sync

frontend/vue-app/src/components/__tests__/LoginButton.spec.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import LoginButton from '../shared/LoginButton.vue'
+
+// Mock dependencies
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({ push: vi.fn() })),
+}))
+
+vi.mock('../../stores/auth', () => ({
+  authenticateParent: vi.fn(),
+  isParentAuthenticated: { value: false },
+  logoutParent: vi.fn(),
+  logoutUser: vi.fn(),
+}))
+
+vi.mock('@/common/imageCache', () => ({
+  getCachedImageUrl: vi.fn(),
+  getCachedImageBlob: vi.fn(),
+}))
+
+vi.mock('@/common/eventBus', () => ({
+  eventBus: {
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+  },
+}))
+
+import { eventBus } from '@/common/eventBus'
+
+describe('LoginButton', () => {
+  let wrapper: VueWrapper<any>
+  let mockFetch: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetch = vi.fn()
+    vi.stubGlobal('fetch', mockFetch)
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+    vi.unstubAllGlobals()
+  })
+
+  describe('Event Listeners', () => {
+    it('registers event listeners on mount', () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve({ first_name: '', last_name: '', email: '', image_id: null }),
+      })
+
+      wrapper = mount(LoginButton)
+
+      expect(eventBus.on).toHaveBeenCalledWith('open-login', expect.any(Function))
+      expect(eventBus.on).toHaveBeenCalledWith('profile_updated', expect.any(Function))
+    })
+
+    it('unregisters event listeners on unmount', () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve({ first_name: '', last_name: '', email: '', image_id: null }),
+      })
+
+      wrapper = mount(LoginButton)
+      wrapper.unmount()
+
+      expect(eventBus.off).toHaveBeenCalledWith('open-login', expect.any(Function))
+      expect(eventBus.off).toHaveBeenCalledWith('profile_updated', expect.any(Function))
+    })
+
+    it('refetches profile when profile_updated event is received', async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({ first_name: '', last_name: '', email: '', image_id: null }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              first_name: 'Updated',
+              last_name: 'User',
+              email: 'updated@example.com',
+              image_id: 'new-image-id',
+            }),
+        })
+
+      wrapper = mount(LoginButton)
+
+      // Get the profile_updated callback
+      const profileUpdatedCall = eventBus.on.mock.calls.find(
+        (call) => call[0] === 'profile_updated',
+      )
+      const profileUpdatedCallback = profileUpdatedCall[1]
+
+      // Call the callback
+      await profileUpdatedCallback()
+
+      // Check that fetch was called for profile
+      expect(mockFetch).toHaveBeenCalledWith('/api/user/profile', { credentials: 'include' })
+    })
+  })
+})