Monitor websites uptime using Cloudflare Workers
Something went wrong. Try again.
TSX
at optimization
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294// @vitest-environment jsdomimport { act, createElement } from 'react';import { createRoot } from 'react-dom/client';import { renderToStaticMarkup } from 'react-dom/server';import { describe, expect, it, vi } from 'vitest';import type { IntervalSeconds } from '@uptime/contracts';import { regionById, regionIds } from '@uptime/regions';
document.body.innerHTML = '<div id="root"></div>';(window as unknown as { scrollTo: () => void }).scrollTo = () => undefined;const { DeleteHistoryDialog, MonitorForm } = await import('./monitor-form.js');
function render( regionSelection: readonly (typeof regionIds)[number][] = regionIds, intervalSeconds: IntervalSeconds = 60,) { return renderToStaticMarkup( createElement(MonitorForm, { monitor: { id: '00000000-0000-4000-8000-000000000001', name: 'All regions', url: 'https://status.example.test/health', regionIds: [...regionSelection], intervalSeconds, timeoutMs: 10_000, enabled: true, dnsDiagnosticsEnabled: true, isPublic: false, }, onCancel: () => undefined, onSaved: () => undefined, }), );}
describe('nine-region monitor form', () => { it('requires an exact typed confirmation before deleting history', async () => { Object.defineProperty(HTMLDialogElement.prototype, 'showModal', { configurable: true, value: vi.fn(), }); Object.defineProperty(HTMLDialogElement.prototype, 'close', { configurable: true, value: vi.fn(), }); const onConfirm = vi.fn().mockResolvedValue(undefined); 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(DeleteHistoryDialog, { onCancel: () => undefined, onConfirm, }), ); });
const input = container.querySelector<HTMLInputElement>('input')!; const deleteButton = [...container.querySelectorAll<HTMLButtonElement>('button')].find( (button) => button.textContent === 'Delete all history', )!; expect(deleteButton.disabled).toBe(true);
await act(async () => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call( input, 'DELETE', ); input.dispatchEvent(new Event('input', { bubbles: true })); }); expect(deleteButton.disabled).toBe(false); await act(async () => { deleteButton .closest('form') ?.dispatchEvent( new SubmitEvent('submit', { bubbles: true, cancelable: true, submitter: deleteButton }), ); await Promise.resolve(); }); expect(onConfirm).toHaveBeenCalledOnce();
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('filters options to the regions enabled by the API', async () => { vi.stubGlobal( 'fetch', vi.fn((input: RequestInfo | URL) => { const url = String(input); const payload = url.endsWith('/api/regions') ? { regions: [regionById['asia-east'], regionById['asia-south']] } : url.endsWith('/api/badges') ? { badges: [] } : { services: [] }; return Promise.resolve( new Response(JSON.stringify(payload), { status: 200, headers: { 'content-type': 'application/json' }, }), ); }), ); 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(MonitorForm, { onCancel: () => undefined, onSaved: () => undefined, }), ); await Promise.resolve(); await Promise.resolve(); });
expect(container.textContent).toContain('Asia East (Tokyo)'); expect(container.textContent).toContain('Asia South (Mumbai)'); expect(container.textContent).not.toContain('US East (N. Virginia)'); expect(container.querySelectorAll('.region-groups .region-option')).toHaveLength(2);
await act(async () => root.unmount()); vi.unstubAllGlobals(); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('renders the three canonical continent groups and all nine options in registry order', () => { const markup = render(); expect(markup).toContain('North America'); expect(markup).toContain('Europe'); expect(markup).toContain('Asia'); expect(markup.match(/type="checkbox"/g) ?? []).toHaveLength(12); expect(markup).toContain('Outage notifications'); expect(markup).toContain('Failed checks before outage'); expect(markup).toContain('Healthy checks before recovery'); expect(markup).toContain('Repeat notifications while down'); expect(markup).toContain( 'A round with missing results and no reported failure breaks either streak.', ); expect(markup).toContain('Share this monitor publicly'); expect(markup).toContain('Public URL slug'); expect(markup).toContain('/monitors/public/'); expect(markup).toContain('Exact requests and DNS diagnostics remain private.'); expect(markup).toContain('Monitor history'); expect(markup).toContain('Delete all history'); expect(markup).not.toContain('Delete all monitor history?'); expect(markup).toContain('HTTPS is used when no scheme is provided.'); expect(markup).toContain('type="range"'); expect(markup).toContain('max="23"'); expect(markup).toContain('Every 1 min'); expect(markup.indexOf('US East (N. Virginia)')).toBeLessThan( markup.indexOf('US West (Oregon)'), ); expect(markup.indexOf('Europe West (Ireland)')).toBeLessThan( markup.indexOf('Europe North (Stockholm)'), ); expect(markup.indexOf('Asia Southeast (Singapore)')).toBeLessThan( markup.indexOf('Asia East (Tokyo)'), ); });
it('accounts for all selected regions in check and DNS estimates', () => { const markup = render(); expect(markup).toContain('12,960'); expect(markup).toContain('9 selected regions'); expect(markup).toContain('At most 9 regional snapshots per day'); expect(markup).toContain('up to 3 resolver queries per snapshot'); });
it('rounds fractional expected daily checks to a whole number', () => { const markup = render(['us-east'], 420); expect(markup).toContain('<strong class="tnum">206</strong>'); expect(markup).not.toMatch(/205[.,]714/); });
it('positions frequency labels at their matching non-linear slider ticks', () => { const markup = render(); expect(markup).toContain('class="frequency-slider__mark" style="left:60.86956521739131%"'); expect(markup).toContain('class="frequency-slider__mark" style="left:73.91304347826086%"'); expect(markup).toContain('class="frequency-slider__mark" style="left:86.95652173913044%"'); });
it('preserves selected services when the notification service list cannot load', async () => { const reactEnvironment = globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }; const previousActEnvironment = reactEnvironment.IS_REACT_ACT_ENVIRONMENT; reactEnvironment.IS_REACT_ACT_ENVIRONMENT = true; const selectedServiceId = '20000000-0000-4000-8000-000000000001'; vi.stubGlobal( 'fetch', vi.fn((input: RequestInfo | URL) => { const url = String(input); return url.endsWith('/api/regions') ? Promise.resolve( new Response(JSON.stringify({ regions: [regionById['us-east']] }), { status: 200, headers: { 'content-type': 'application/json' }, }), ) : Promise.reject(new Error('Network unavailable')); }), ); const container = document.createElement('div'); const root = createRoot(container);
await act(async () => { root.render( createElement(MonitorForm, { monitor: { id: '00000000-0000-4000-8000-000000000001', url: 'https://status.example.test/health', regionIds: ['us-east'], intervalSeconds: 300, timeoutMs: 10_000, enabled: true, dnsDiagnosticsEnabled: false, isPublic: false, notificationServiceIds: [selectedServiceId], outageThreshold: 3, recoveryThreshold: 2, repeatNotificationMinutes: null, }, onCancel: () => undefined, onSaved: () => undefined, }), ); await Promise.resolve(); await Promise.resolve(); });
expect(container.textContent).toContain('Existing selections are preserved.'); expect(container.textContent).toContain('Unavailable notification service'); expect(container.textContent).toContain(selectedServiceId); const unavailableCheckbox = [ ...container.querySelectorAll<HTMLInputElement>('input[type="checkbox"]'), ].find((input) => input.parentElement?.textContent?.includes(selectedServiceId)); expect(unavailableCheckbox?.checked).toBe(true);
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });
it('updates the displayed frequency as the slider crosses from 15 to 20 minutes', async () => { 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(MonitorForm, { monitor: { id: '00000000-0000-4000-8000-000000000001', name: 'Slider monitor', url: 'https://status.example.test/health', regionIds: ['us-east'], intervalSeconds: 900, timeoutMs: 10_000, enabled: true, dnsDiagnosticsEnabled: false, isPublic: false, }, onCancel: () => undefined, onSaved: () => undefined, }), ); });
const slider = container.querySelector<HTMLInputElement>('#check-frequency')!; expect(container.querySelector('.frequency-field__value')?.textContent).toBe('Every 15 min'); await act(async () => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(slider, '15'); slider.dispatchEvent(new Event('input', { bubbles: true })); }); expect(container.querySelector('.frequency-field__value')?.textContent).toBe('Every 20 min'); expect(slider.getAttribute('aria-valuetext')).toBe('20 minutes');
await act(async () => root.unmount()); if (previousActEnvironment === undefined) delete reactEnvironment.IS_REACT_ACT_ENVIRONMENT; else reactEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment; });});