Monitor websites uptime using Cloudflare Workers
Something went wrong. Try again.
TSX
at optimization
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454// @vitest-environment jsdomimport { act, createElement } from 'react';import { createRoot } from 'react-dom/client';import { afterEach, describe, expect, it, vi } from 'vitest';
const apiMock = vi.hoisted(() => ({ monitors: vi.fn(), statusPage: vi.fn(), publicStatusPage: vi.fn(),}));const navigateMock = vi.hoisted(() => vi.fn());
vi.mock('./api.js', () => ({ api: apiMock }));vi.mock('@tanstack/react-router', () => ({ useNavigate: () => navigateMock }));
const { PublicStatusPage, StatusPageEditor } = await import('./status-pages.js');
afterEach(() => { vi.clearAllMocks();});
describe('public status page monitor rows', () => { it('keeps auto-refresh off by default until the header toggle is switched on', async () => { vi.useFakeTimers(); apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', publicSlug: null, groups: [], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); }); const toggle = container.querySelector<HTMLButtonElement>( '.public-status-page__refresh-toggle', )!; expect(toggle.textContent).toBe('Auto-refresh off'); expect(toggle.getAttribute('aria-pressed')).toBe('false'); expect(apiMock.publicStatusPage).toHaveBeenCalledTimes(1);
await act(async () => { await vi.advanceTimersByTimeAsync(60_000); }); expect(apiMock.publicStatusPage).toHaveBeenCalledTimes(1);
await act(async () => toggle.click()); expect(toggle.textContent).toBe('Auto-refresh on'); expect(toggle.getAttribute('aria-pressed')).toBe('true'); await act(async () => { await vi.advanceTimersByTimeAsync(60_000); }); expect(apiMock.publicStatusPage).toHaveBeenCalledTimes(2);
await act(async () => toggle.click()); expect(toggle.textContent).toBe('Auto-refresh off'); expect(toggle.getAttribute('aria-pressed')).toBe('false'); await act(async () => { await vi.advanceTimersByTimeAsync(120_000); }); expect(apiMock.publicStatusPage).toHaveBeenCalledTimes(2);
await act(async () => root.unmount()); vi.useRealTimers(); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('pairs half-width groups with shared row tracks and bottom fill for the shorter group', async () => { const monitor = (id: string, name: string) => ({ id, name, url: `https://${id}.example.test`, publicSlug: null, uptimePercentage: 100, status: 'up' as const, configuredRegionCount: 1, affectedRegionIds: [], days: [], }); apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', publicSlug: null, groups: [ { id: 'group-1', title: 'Primary services', width: 'half', monitors: [monitor('one', 'One'), monitor('two', 'Two')], }, { id: 'group-2', title: 'Secondary services with a longer title', width: 'half', monitors: [monitor('three', 'Three')], }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
const row = container.querySelector('.public-status-page__group-row--paired'); expect(row?.querySelectorAll(':scope > .public-status-group')).toHaveLength(2); expect(row?.querySelectorAll('.public-status-group__head')).toHaveLength(2); const groups = row?.querySelectorAll<HTMLElement>(':scope > .public-status-group'); expect(groups?.[0]?.querySelector('.public-status-group__fill')).toBeNull(); expect( groups?.[1]?.querySelector<HTMLElement>('.public-status-group__fill')?.style.gridRow, ).toBe('span 1');
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('marks a down monitor uptime percentage as down', async () => { apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', publicSlug: null, groups: [ { id: 'group-1', title: 'Services', monitors: [ { id: 'monitor-1', name: 'Unavailable service', url: 'https://down.example.test', publicSlug: 'unavailable-service', uptimePercentage: 0, status: 'down', configuredRegionCount: 1, affectedRegionIds: ['eu-west'], days: [], }, ], }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
expect(container.querySelector('.public-status-monitor__uptime')?.textContent).toBe('0%'); expect(container.querySelector('.public-status-monitor__uptime--red')).not.toBeNull(); const summary = container.querySelector('.public-status-monitor__summary'); expect(summary?.querySelector('.public-status-monitor__name')?.textContent).toContain( 'Unavailable service', ); expect(summary?.querySelector('.public-status-monitor__uptime')?.textContent).toBe('0%'); expect(summary?.querySelector('.public-status-monitor__state')?.textContent).toBe('Issues'); expect(summary?.nextElementSibling?.classList.contains('uptime-days')).toBe(true); expect(container.querySelector('.status-problem-summary h2')?.textContent).toBe( 'Some systems currently have problems', ); expect(container.querySelector('.status-problem-summary__list a')?.textContent).toBe( 'Unavailable service', ); expect(container.querySelector('.status-problem-summary__list a')?.getAttribute('href')).toBe( '/monitors/public/unavailable-service?statusPage=page-1', ); expect(container.querySelector('.status-problem-summary__list span')?.textContent).toBe( 'Currently down', );
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('labels a partial multi-region outage and lists its affected regions', async () => { apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', publicSlug: null, groups: [ { id: 'group-1', title: 'Services', monitors: [ { id: 'monitor-1', name: 'Degraded service', url: 'https://degraded.example.test', publicSlug: null, uptimePercentage: 99, status: 'down', configuredRegionCount: 4, affectedRegionIds: ['eu-west', 'asia-south'], days: [], }, ], }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
expect(container.querySelector('.status-problem-summary__list span')?.textContent).toBe( 'Issues (eu-west, asia-south)', );
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('keeps a recovering monitor in the problem summary', async () => { apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', publicSlug: null, groups: [ { id: 'group-1', title: 'Services', monitors: [ { id: 'monitor-1', name: 'Recovered service', url: 'https://recovered.example.test', publicSlug: null, uptimePercentage: 99, status: 'down', configuredRegionCount: 4, affectedRegionIds: [], recoveryStatus: 'recovering', days: [], }, ], }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
expect(container.querySelector('.status-problem-summary')).not.toBeNull(); expect(container.querySelector('.status-problem-summary__list a')?.textContent).toBe( 'Recovered service', ); expect(container.querySelector('.status-problem-summary__list span')?.textContent).toBe( 'Recovering', ); expect( container.querySelector('.status-problem-summary__list-item--recovering'), ).not.toBeNull(); expect(container.querySelector('.status-problem-summary__state--recovering')).not.toBeNull(); expect(container.querySelector('.public-status-monitor__state')?.textContent).toBe( 'Recovering', ); expect(container.querySelector('.public-status-monitor__state--recovering')).not.toBeNull(); expect(container.querySelector('.public-status-monitor__uptime--orange')).not.toBeNull();
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('paginates each group at ten monitors with synchronized controls above and below', async () => { apiMock.publicStatusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', groups: [ { id: 'group-1', title: 'Services', monitors: Array.from({ length: 16 }, (_, index) => ({ id: `monitor-${index + 1}`, name: `Monitor ${index + 1}`, url: `https://monitor-${index + 1}.example.test`, publicSlug: index === 0 ? 'monitor-one' : null, uptimePercentage: 100, status: 'up', days: [], })), }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(PublicStatusPage, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
expect(container.querySelectorAll('.public-status-monitor')).toHaveLength(10); expect(container.querySelector('.status-problem-summary')).toBeNull(); expect(container.querySelectorAll('.group-pagination')).toHaveLength(2); expect(container.querySelector('.public-status-group__count')?.textContent).toBe('(16 total)'); expect(container.querySelector('.public-status-monitor')?.getAttribute('href')).toBe( '/monitors/public/monitor-one?statusPage=page-1', ); const next = [...container.querySelectorAll('button')].find( (button) => button.textContent === 'Next', ); await act(async () => next?.click()); expect(container.querySelectorAll('.public-status-monitor')).toHaveLength(6); expect( [...container.querySelectorAll('.group-pagination > span')].map( (indicator) => indicator.textContent, ), ).toEqual(['2 / 2', '2 / 2']);
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });});
describe('status page editor ordering', () => { it('sorts only the selected group alphabetically by displayed monitor name', async () => { apiMock.monitors.mockResolvedValue({ monitors: [ { monitor: { id: 'monitor-z', name: 'Zulu', url: 'https://z.example.test', badge: { id: 'badge-1', name: 'API', color: '#2563eb' }, }, }, { monitor: { id: 'monitor-a', name: 'alpha', url: 'https://a.example.test' } }, { monitor: { id: 'monitor-b', name: null, url: 'https://beta.example.test' } }, { monitor: { id: 'monitor-c', name: 'Available', url: 'https://available.example.test' } }, ], }); apiMock.statusPage.mockResolvedValue({ id: 'page-1', title: 'Service status', groups: [ { id: 'group-1', title: 'Services', monitors: [{ id: 'monitor-z' }, { id: 'monitor-b' }, { id: 'monitor-a' }], }, ], }); const container = document.createElement('div'); const root = createRoot(container); const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
await act(async () => { root.render(createElement(StatusPageEditor, { statusPageId: 'page-1' })); await Promise.resolve(); await Promise.resolve(); });
const sortButton = container.querySelector<HTMLButtonElement>( 'button[aria-label="Sort monitors in Services alphabetically"]', ); expect(sortButton).not.toBeNull(); expect(container.querySelector('.status-page-editor__slug input')).not.toBeNull(); expect(container.querySelectorAll('.status-monitor-editor[draggable="true"]')).toHaveLength(4); expect(container.querySelector('.status-monitor-editor .drag-handle[draggable]')).toBeNull(); expect(container.querySelector('.status-group-editor .monitor-badge')?.textContent).toBe('API');
const badgesButton = container.querySelector<HTMLButtonElement>( 'button[aria-label="Hide badges in Services"]', ); expect(badgesButton?.getAttribute('aria-pressed')).toBe('true'); await act(async () => badgesButton?.click()); expect(container.querySelector('.status-group-editor .monitor-badge')).toBeNull(); expect( container .querySelector('button[aria-label="Show badges in Services"]') ?.getAttribute('aria-pressed'), ).toBe('false');
const collapseButton = container.querySelector<HTMLButtonElement>( 'button[aria-label="Collapse Services"]', ); expect(collapseButton?.getAttribute('aria-expanded')).toBe('true'); await act(async () => collapseButton?.click()); expect(container.querySelector('.status-group-editor__monitors')?.hasAttribute('hidden')).toBe( true, ); expect(container.querySelector('.status-group-editor--collapsed')).not.toBeNull();
const expandButton = container.querySelector<HTMLButtonElement>( 'button[aria-label="Expand Services"]', ); expect(expandButton?.getAttribute('aria-expanded')).toBe('false'); await act(async () => expandButton?.click());
const halfWidthButton = container.querySelector<HTMLButtonElement>( 'button[aria-label="Make Services half width"]', ); await act(async () => halfWidthButton?.click()); expect(container.querySelector('.status-group-editor--half')).not.toBeNull();
await act(async () => sortButton?.click()); expect( [...container.querySelectorAll('.status-group-editor .status-monitor-editor strong')].map( (item) => item.textContent, ), ).toEqual(['alpha', 'beta.example.test', 'Zulu']);
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });});