|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + */ |
| 4 | + |
| 5 | +import { act } from 'react' |
| 6 | +import { createRoot, type Root } from 'react-dom/client' |
| 7 | +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' |
| 8 | + |
| 9 | +const { mockUseStatusPage } = vi.hoisted(() => ({ |
| 10 | + mockUseStatusPage: vi.fn(), |
| 11 | +})) |
| 12 | + |
| 13 | +vi.mock('@/hooks/queries/status-page', () => ({ |
| 14 | + useStatusPage: mockUseStatusPage, |
| 15 | +})) |
| 16 | + |
| 17 | +import { StatusNotice } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice' |
| 18 | + |
| 19 | +let container: HTMLDivElement |
| 20 | +let root: Root |
| 21 | + |
| 22 | +beforeEach(() => { |
| 23 | + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true |
| 24 | + vi.clearAllMocks() |
| 25 | + mockUseStatusPage.mockReturnValue({ data: undefined, error: null }) |
| 26 | + container = document.createElement('div') |
| 27 | + document.body.appendChild(container) |
| 28 | + root = createRoot(container) |
| 29 | +}) |
| 30 | + |
| 31 | +afterEach(() => { |
| 32 | + act(() => root.unmount()) |
| 33 | + container.remove() |
| 34 | + vi.restoreAllMocks() |
| 35 | +}) |
| 36 | + |
| 37 | +function render() { |
| 38 | + act(() => root.render(<StatusNotice />)) |
| 39 | +} |
| 40 | + |
| 41 | +describe('StatusNotice', () => { |
| 42 | + it('shows the local status alert without fetching live status in preview mode', () => { |
| 43 | + act(() => root.render(<StatusNotice preview />)) |
| 44 | + |
| 45 | + const notice = container.querySelector('[role="alert"]') |
| 46 | + expect(notice?.textContent).toContain('Sim is having issues') |
| 47 | + expect(notice?.className).toContain('bg-[var(--terminal-status-error-bg)]') |
| 48 | + expect(notice?.className).toContain('border-[var(--terminal-status-error-border)]') |
| 49 | + expect(container.querySelector('svg')?.classList.contains('text-[var(--text-icon)]')).toBe(true) |
| 50 | + expect(mockUseStatusPage).toHaveBeenCalledWith({ enabled: false }) |
| 51 | + }) |
| 52 | + |
| 53 | + it('stays hidden while loading and for operational or minor incidents', () => { |
| 54 | + render() |
| 55 | + expect(container.textContent).toBe('') |
| 56 | + |
| 57 | + mockUseStatusPage.mockReturnValue({ |
| 58 | + data: { status: { description: 'All Systems Operational', indicator: 'none' } }, |
| 59 | + error: null, |
| 60 | + }) |
| 61 | + render() |
| 62 | + |
| 63 | + expect(container.textContent).toBe('') |
| 64 | + |
| 65 | + mockUseStatusPage.mockReturnValue({ |
| 66 | + data: { status: { description: 'Minor Service Outage', indicator: 'minor' } }, |
| 67 | + error: null, |
| 68 | + }) |
| 69 | + render() |
| 70 | + |
| 71 | + expect(container.textContent).toBe('') |
| 72 | + }) |
| 73 | + |
| 74 | + it('shows the notice for a major incident and opens the status page', () => { |
| 75 | + mockUseStatusPage.mockReturnValue({ |
| 76 | + data: { status: { description: 'Major Service Outage', indicator: 'major' } }, |
| 77 | + error: null, |
| 78 | + }) |
| 79 | + |
| 80 | + render() |
| 81 | + |
| 82 | + const notice = container.querySelector('[role="alert"]') |
| 83 | + const action = container.querySelector<HTMLAnchorElement>('a') |
| 84 | + expect(notice?.className).toContain('border-[var(--terminal-status-error-border)]') |
| 85 | + expect(notice?.className).toContain('shadow-[var(--shadow-overlay)]') |
| 86 | + expect(notice?.className).toContain( |
| 87 | + '[--surface-hover:color-mix(in_srgb,var(--text-error)_8%,transparent)]' |
| 88 | + ) |
| 89 | + expect(action?.textContent).toContain('View status') |
| 90 | + expect(action?.className).not.toContain('bg-[var(--text-error)]') |
| 91 | + expect(action?.getAttribute('href')).toBe('https://status.sim.ai') |
| 92 | + expect(action?.getAttribute('target')).toBe('_blank') |
| 93 | + expect(action?.getAttribute('rel')).toBe('noopener noreferrer') |
| 94 | + }) |
| 95 | + |
| 96 | + it('throws status query failures instead of hiding them', () => { |
| 97 | + mockUseStatusPage.mockReturnValue({ |
| 98 | + data: undefined, |
| 99 | + error: new Error('status unavailable'), |
| 100 | + }) |
| 101 | + |
| 102 | + expect(render).toThrow('status unavailable') |
| 103 | + }) |
| 104 | +}) |
0 commit comments