|
| 1 | +/* MaintenanceNotice.test.tsx — full coverage for the scheduled-maintenance |
| 2 | + * notice. The component is flag-gated (VITE_MAINTENANCE_MODE), so the tests |
| 3 | + * drive the ON branch via the `enabled` prop and the per-route modal logic |
| 4 | + * via the `pathname` prop — no need to stub import.meta.env or mount a |
| 5 | + * router. The env-read helper (isMaintenanceEnabled) is covered separately. |
| 6 | + * |
| 7 | + * Coverage targets (every line of the new component): |
| 8 | + * - enabled=false → renders nothing (the default everywhere except Pages) |
| 9 | + * - enabled=true → sticky banner with the headline + body copy |
| 10 | + * - modal shows on /app + /app/* + /login* and NOT on marketing routes |
| 11 | + * - dismiss via button, overlay click, and Escape key — all close it and |
| 12 | + * persist the dismissal in sessionStorage |
| 13 | + * - a persisted dismissal keeps the modal closed on remount |
| 14 | + * - isMaintenanceEnabled() reads the env flag |
| 15 | + * - modalAppliesTo() route predicate |
| 16 | + * - sessionStorage-throws fail-open paths |
| 17 | + */ |
| 18 | + |
| 19 | +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' |
| 20 | +import { render, screen, fireEvent, cleanup } from '@testing-library/react' |
| 21 | +import { |
| 22 | + MaintenanceNotice, |
| 23 | + isMaintenanceEnabled, |
| 24 | + modalAppliesTo, |
| 25 | + MAINTENANCE_HEADLINE, |
| 26 | + MAINTENANCE_BODY, |
| 27 | +} from './MaintenanceNotice' |
| 28 | + |
| 29 | +beforeEach(() => { |
| 30 | + window.sessionStorage.clear() |
| 31 | +}) |
| 32 | + |
| 33 | +afterEach(() => { |
| 34 | + cleanup() |
| 35 | + vi.restoreAllMocks() |
| 36 | +}) |
| 37 | + |
| 38 | +describe('MaintenanceNotice — flag gating', () => { |
| 39 | + it('renders nothing when disabled', () => { |
| 40 | + const { container } = render(<MaintenanceNotice enabled={false} pathname="/app" />) |
| 41 | + expect(container.firstChild).toBeNull() |
| 42 | + expect(screen.queryByTestId('maintenance-banner')).toBeNull() |
| 43 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 44 | + }) |
| 45 | + |
| 46 | + it('renders nothing when called with no props and the env flag is off (default test env)', () => { |
| 47 | + // In the unit-test env VITE_MAINTENANCE_MODE is unset, so the default |
| 48 | + // (enabled omitted → isMaintenanceEnabled()) is false. This covers the |
| 49 | + // env-read default-argument branch. |
| 50 | + const { container } = render(<MaintenanceNotice />) |
| 51 | + expect(container.firstChild).toBeNull() |
| 52 | + }) |
| 53 | +}) |
| 54 | + |
| 55 | +describe('MaintenanceNotice — sticky banner', () => { |
| 56 | + it('shows the banner with headline + body when enabled, on any route', () => { |
| 57 | + render(<MaintenanceNotice enabled pathname="/" />) |
| 58 | + const banner = screen.getByTestId('maintenance-banner') |
| 59 | + expect(banner).toBeTruthy() |
| 60 | + expect(banner.getAttribute('role')).toBe('status') |
| 61 | + expect(banner.textContent).toContain(MAINTENANCE_HEADLINE) |
| 62 | + expect(banner.textContent).toContain('Your data is safe') |
| 63 | + }) |
| 64 | + |
| 65 | + it('does NOT show the modal on a marketing route', () => { |
| 66 | + render(<MaintenanceNotice enabled pathname="/pricing" />) |
| 67 | + expect(screen.getByTestId('maintenance-banner')).toBeTruthy() |
| 68 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 69 | + }) |
| 70 | + |
| 71 | + it('resolves the current path from window.location when pathname is omitted', () => { |
| 72 | + // No `pathname` prop → resolvePathname() reads window.location.pathname. |
| 73 | + // jsdom defaults to "/", a marketing path, so the banner shows but the |
| 74 | + // modal does not. This covers the resolvePathname window branch. |
| 75 | + render(<MaintenanceNotice enabled />) |
| 76 | + expect(screen.getByTestId('maintenance-banner')).toBeTruthy() |
| 77 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 78 | + }) |
| 79 | +}) |
| 80 | + |
| 81 | +describe('MaintenanceNotice — modal on /app + /login', () => { |
| 82 | + it('shows the modal on /app', () => { |
| 83 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 84 | + const modal = screen.getByTestId('maintenance-modal') |
| 85 | + expect(modal).toBeTruthy() |
| 86 | + expect(modal.getAttribute('aria-modal')).toBe('true') |
| 87 | + expect(modal.textContent).toContain(MAINTENANCE_HEADLINE) |
| 88 | + }) |
| 89 | + |
| 90 | + it('shows the modal on a nested /app/* route', () => { |
| 91 | + render(<MaintenanceNotice enabled pathname="/app/resources" />) |
| 92 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 93 | + }) |
| 94 | + |
| 95 | + it('shows the modal on /login', () => { |
| 96 | + render(<MaintenanceNotice enabled pathname="/login?next=%2Fapp" />) |
| 97 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 98 | + }) |
| 99 | + |
| 100 | + it('closes the modal and persists the dismissal when the button is clicked', () => { |
| 101 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 102 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 103 | + fireEvent.click(screen.getByTestId('maintenance-modal-dismiss')) |
| 104 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 105 | + expect(window.sessionStorage.getItem('instanode.maintenanceModalDismissed')).toBe('1') |
| 106 | + // Banner persists after dismiss. |
| 107 | + expect(screen.getByTestId('maintenance-banner')).toBeTruthy() |
| 108 | + }) |
| 109 | + |
| 110 | + it('closes the modal on overlay (backdrop) click', () => { |
| 111 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 112 | + const overlay = screen.getByTestId('maintenance-modal') |
| 113 | + fireEvent.click(overlay) |
| 114 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 115 | + }) |
| 116 | + |
| 117 | + it('does NOT close when clicking inside the dialog card (event target is a child)', () => { |
| 118 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 119 | + // Clicking the headline inside the card must not bubble-dismiss. |
| 120 | + fireEvent.click(screen.getByText(MAINTENANCE_HEADLINE, { selector: 'h2' })) |
| 121 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 122 | + }) |
| 123 | + |
| 124 | + it('closes the modal on Escape and ignores other keys', () => { |
| 125 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 126 | + // A non-Escape key is a no-op (covers the `if (e.key === 'Escape')` false branch). |
| 127 | + fireEvent.keyDown(document, { key: 'a' }) |
| 128 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 129 | + fireEvent.keyDown(document, { key: 'Escape' }) |
| 130 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 131 | + expect(window.sessionStorage.getItem('instanode.maintenanceModalDismissed')).toBe('1') |
| 132 | + }) |
| 133 | + |
| 134 | + it('keeps the modal closed on a fresh mount once dismissed this session', () => { |
| 135 | + window.sessionStorage.setItem('instanode.maintenanceModalDismissed', '1') |
| 136 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 137 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 138 | + // Banner still shows. |
| 139 | + expect(screen.getByTestId('maintenance-banner')).toBeTruthy() |
| 140 | + }) |
| 141 | +}) |
| 142 | + |
| 143 | +describe('MaintenanceNotice — sessionStorage failure is non-fatal', () => { |
| 144 | + // jsdom's sessionStorage is an exotic Storage object whose methods can't be |
| 145 | + // replaced via vi.spyOn (the spy is silently ignored). To exercise the |
| 146 | + // fail-open catch branches we swap the whole window.sessionStorage for a |
| 147 | + // throwing stub via Object.defineProperty, then restore it after. |
| 148 | + function withThrowingSessionStorage(stub: Partial<Storage>, fn: () => void) { |
| 149 | + const original = Object.getOwnPropertyDescriptor(window, 'sessionStorage') |
| 150 | + Object.defineProperty(window, 'sessionStorage', { |
| 151 | + value: stub, |
| 152 | + configurable: true, |
| 153 | + writable: true, |
| 154 | + }) |
| 155 | + try { |
| 156 | + fn() |
| 157 | + } finally { |
| 158 | + if (original) Object.defineProperty(window, 'sessionStorage', original) |
| 159 | + } |
| 160 | + } |
| 161 | + |
| 162 | + it('shows the modal when sessionStorage.getItem throws (fail-open on read)', () => { |
| 163 | + withThrowingSessionStorage( |
| 164 | + { |
| 165 | + getItem() { |
| 166 | + throw new Error('blocked') |
| 167 | + }, |
| 168 | + setItem() {}, |
| 169 | + }, |
| 170 | + () => { |
| 171 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 172 | + expect(screen.getByTestId('maintenance-modal')).toBeTruthy() |
| 173 | + }, |
| 174 | + ) |
| 175 | + }) |
| 176 | + |
| 177 | + it('still closes the modal when sessionStorage.setItem throws (fail-open on write)', () => { |
| 178 | + withThrowingSessionStorage( |
| 179 | + { |
| 180 | + getItem() { |
| 181 | + return null |
| 182 | + }, |
| 183 | + setItem() { |
| 184 | + throw new Error('blocked') |
| 185 | + }, |
| 186 | + }, |
| 187 | + () => { |
| 188 | + render(<MaintenanceNotice enabled pathname="/app" />) |
| 189 | + fireEvent.click(screen.getByTestId('maintenance-modal-dismiss')) |
| 190 | + expect(screen.queryByTestId('maintenance-modal')).toBeNull() |
| 191 | + }, |
| 192 | + ) |
| 193 | + }) |
| 194 | +}) |
| 195 | + |
| 196 | +describe('MaintenanceNotice — helpers', () => { |
| 197 | + it('isMaintenanceEnabled reflects the (off) env flag in the test env', () => { |
| 198 | + expect(isMaintenanceEnabled()).toBe(false) |
| 199 | + }) |
| 200 | + |
| 201 | + it('modalAppliesTo matches only /app* and /login*', () => { |
| 202 | + expect(modalAppliesTo('/app')).toBe(true) |
| 203 | + expect(modalAppliesTo('/app/billing')).toBe(true) |
| 204 | + expect(modalAppliesTo('/login')).toBe(true) |
| 205 | + expect(modalAppliesTo('/login/callback')).toBe(true) |
| 206 | + expect(modalAppliesTo('/')).toBe(false) |
| 207 | + expect(modalAppliesTo('/pricing')).toBe(false) |
| 208 | + expect(modalAppliesTo('/docs')).toBe(false) |
| 209 | + }) |
| 210 | + |
| 211 | + it('exposes stable copy constants used by both surfaces', () => { |
| 212 | + expect(MAINTENANCE_HEADLINE).toBe('Scheduled maintenance') |
| 213 | + expect(MAINTENANCE_BODY).toContain('temporarily unavailable') |
| 214 | + expect(MAINTENANCE_BODY).toContain('back shortly') |
| 215 | + }) |
| 216 | +}) |
0 commit comments