argoyle
5dc29141d5
Adds a new Federation Graph page to display subgraphs and their schemas. Implements loading state and error handling. Enhances coverage reporting by including 'lcov' format for better insights into test coverage metrics.
136 lines
3.8 KiB
TypeScript
136 lines
3.8 KiB
TypeScript
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' })
|
|
})
|
|
})
|