schemas-app/app/composables/__tests__/useOrganizationSelector.spec.ts

import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest'
import { nextTick,ref } from 'vue'

const mockOrganizations = [
  { id: '1', name: 'Org 1' },
  { id: '2', name: 'Org 2' },
  { id: '3', name: 'Org 3' },
]

const mockResult = ref({
  organizations: mockOrganizations,
})

// Mock Auth0
vi.mock('@auth0/auth0-vue', () => ({
  useAuth0: () => ({
    isAuthenticated: ref(true),
  }),
}))

// Mock the GraphQL query
vi.mock('~/graphql/generated', () => ({
  useOrganizationsQuery: () => ({
    result: mockResult,
    loading: ref(false),
    error: ref(null),
    refetch: vi.fn(),
  }),
}))

describe('useOrganizationSelector', () => {
  let useOrganizationSelector: any

  beforeEach(async () => {
    // Clear localStorage before each test
    localStorage.clear()

    // Reset modules to clear the shared selectedOrgId ref
    vi.resetModules()

    // Re-import the composable to get fresh module state
    const module = await import('../useOrganizationSelector')
    useOrganizationSelector = module.useOrganizationSelector
  })

  afterEach(() => {
    localStorage.clear()
  })

  it('should return organizations list', async () => {
    const { organizations } = useOrganizationSelector()
    await nextTick()

    expect(organizations.value).toHaveLength(3)
    expect(organizations.value[0]).toEqual({ id: '1', name: 'Org 1' })
  })

  it('should auto-select first organization if none selected and orgs available', async () => {
    const { selectedOrganization, organizations } = useOrganizationSelector()
    await nextTick()

    // Should auto-select first org
    expect(selectedOrganization.value).toEqual(organizations.value[0])
  })

  it('should select an organization by ID', async () => {
    const { selectedOrganization, selectOrganization, organizations } = useOrganizationSelector()
    await nextTick()

    // Should start with first org auto-selected
    expect(selectedOrganization.value).toEqual(organizations.value[0])

    // Select a different organization by ID
    selectOrganization('2')
    await nextTick()

    expect(selectedOrganization.value).toEqual({ id: '2', name: 'Org 2' })
  })

  it('should persist selected organization ID to localStorage', async () => {
    const { selectOrganization } = useOrganizationSelector()
    await nextTick()

    // Auto-selection will have set it to '1', so select '2' to trigger the watch
    selectOrganization('2')
    await nextTick()

    const stored = localStorage.getItem('selectedOrgId')
    expect(stored).toBe('2')
  })

  it('should restore selected organization from localStorage', async () => {
    // Set up localStorage with a saved organization ID
    localStorage.setItem('selectedOrgId', '2')

    const { selectedOrganization } = useOrganizationSelector()
    await nextTick()

    expect(selectedOrganization.value).toEqual({ id: '2', name: 'Org 2' })
  })

  it('should return selectedOrgId computed property', async () => {
    const { selectedOrgId, selectOrganization } = useOrganizationSelector()
    await nextTick()

    // Auto-selected to first org
    expect(selectedOrgId.value).toBe('1')

    selectOrganization('3')
    await nextTick()

    expect(selectedOrgId.value).toBe('3')
  })

  it('should handle selecting an organization that does not exist', async () => {
    const { selectedOrganization, selectOrganization } = useOrganizationSelector()
    await nextTick()

    selectOrganization('999')
    await nextTick()

    // selectedOrgId is set but selectedOrganization returns null
    expect(selectedOrganization.value).toBeNull()
  })

  it('should prioritize localStorage over auto-selection', async () => {
    localStorage.setItem('selectedOrgId', '3')

    const { selectedOrganization } = useOrganizationSelector()
    await nextTick()

    // Should restore from localStorage, not auto-select first org
    expect(selectedOrganization.value).toEqual({ id: '3', name: 'Org 3' })
  })
})