197 lines
11 KiB
TypeScript
197 lines
11 KiB
TypeScript
import { afterAll, afterEach, beforeAll, beforeEach, expect, test } from "bun:test";
|
||
import { Window } from "happy-dom";
|
||
import { act, useState } from "react";
|
||
import type { Root } from "react-dom/client";
|
||
import { ProgressOverview } from "./ProgressOverview";
|
||
import { fixture } from "../habits/test-fixture";
|
||
|
||
const dom = new Window({ url: "http://localhost:3000/design-system" });
|
||
const originalGlobals = new Map<string, PropertyDescriptor | undefined>();
|
||
let createRoot: typeof import("react-dom/client").createRoot;
|
||
let root: Root;
|
||
let container: HTMLDivElement;
|
||
let f: ReturnType<typeof fixture>;
|
||
const originalFetch = globalThis.fetch;
|
||
|
||
beforeAll(async () => {
|
||
for (const key of ["window", "document", "navigator", "HTMLElement", "HTMLInputElement", "Element", "Node", "Event", "MouseEvent", "IS_REACT_ACT_ENVIRONMENT"]) {
|
||
originalGlobals.set(key, Object.getOwnPropertyDescriptor(globalThis, key));
|
||
Object.defineProperty(globalThis, key, {
|
||
configurable: true,
|
||
writable: true,
|
||
value: key === "window" ? dom : key === "IS_REACT_ACT_ENVIRONMENT" ? true : (dom as unknown as Record<string, unknown>)[key],
|
||
});
|
||
}
|
||
({ createRoot } = await import("react-dom/client"));
|
||
});
|
||
|
||
beforeEach(() => {
|
||
f = fixture();
|
||
globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
|
||
return f.request(String(input).replace(/^\/api/, ""), init?.method, init?.body ? JSON.parse(String(init.body)) : undefined);
|
||
}) as typeof fetch;
|
||
container = document.createElement("div");
|
||
document.body.append(container);
|
||
root = createRoot(container);
|
||
});
|
||
|
||
afterEach(async () => {
|
||
await act(async () => root.unmount());
|
||
container.remove();
|
||
globalThis.fetch = originalFetch;
|
||
f.close();
|
||
});
|
||
|
||
afterAll(() => {
|
||
dom.happyDOM.abort();
|
||
for (const [key, descriptor] of originalGlobals) {
|
||
if (descriptor) Object.defineProperty(globalThis, key, descriptor);
|
||
else Reflect.deleteProperty(globalThis, key);
|
||
}
|
||
});
|
||
|
||
function button(text: string) {
|
||
return [...container.querySelectorAll<HTMLButtonElement>("button")].find((element) => element.textContent?.trim() === text || element.getAttribute("aria-label") === text || element.getAttribute("aria-label")?.startsWith(`${text} `))!;
|
||
}
|
||
|
||
function Dashboard() {
|
||
const [creating, setCreating] = useState(false);
|
||
return <><button id="create-overview" onClick={() => setCreating(true)}>Create overview</button><div className="ds-habit-list"><ProgressOverview creating={creating} onCloseCreate={() => setCreating(false)} date="2026-09-04" revision={0} onExpired={() => {}} onHistorySaved={() => {}} /></div></>;
|
||
}
|
||
async function render() {
|
||
await act(async () => root.render(<Dashboard />));
|
||
}
|
||
function checkbox(label: string) {
|
||
return [...container.querySelectorAll('label')].find(element => element.textContent === label)!.querySelector<HTMLInputElement>('input')!;
|
||
}
|
||
async function click(text: string) { await act(async () => button(text).click()); }
|
||
async function name(value: string) {
|
||
const input = container.querySelector<HTMLInputElement>('input[placeholder="e.g. Morning routine"]')!;
|
||
await act(async () => {
|
||
Object.getOwnPropertyDescriptor(dom.HTMLInputElement.prototype, "value")!.set!.call(input, value);
|
||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||
});
|
||
}
|
||
|
||
test("saved overview creation, membership editing with archived habits, and deletion preserve habits", async () => {
|
||
const water = await f.json('/habits', 'POST', { name: 'Water', method: 'count', target: 8 }, 201);
|
||
const reading = await f.json('/habits', 'POST', { name: 'Reading', method: 'manual' }, 201);
|
||
expect((await f.request(`/habits/${reading.id}`, 'DELETE')).status).toBe(204);
|
||
await render();
|
||
await click('Create overview');
|
||
expect(container.textContent).toContain('Reading · Archived');
|
||
await name('Essentials');
|
||
await act(async () => checkbox('Water').click());
|
||
await click('Save overview');
|
||
const saved = (await f.json('/charts')).charts[0];
|
||
expect(saved.name).toBe('Essentials');
|
||
expect(saved.habitIds).toEqual([water.id]);
|
||
expect(container.textContent).toContain('View day details');
|
||
await click('Edit overview');
|
||
await name('My progress');
|
||
await act(async () => checkbox('Reading · Archived').click());
|
||
expect(container.textContent).toContain('recalculates this overview’s entire history');
|
||
await click('Save overview');
|
||
expect((await f.json(`/charts/${saved.id}`)).habitIds).toEqual([water.id, reading.id]);
|
||
await click('Delete overview');
|
||
const dialog = container.querySelector('#delete-overview')!;
|
||
await act(async () => [...dialog.querySelectorAll<HTMLButtonElement>('button')].find(b => b.textContent === 'Delete overview')!.click());
|
||
expect((await f.json('/charts')).charts).toHaveLength(0);
|
||
expect((await f.json('/habits?archived=true')).habits).toHaveLength(2);
|
||
});
|
||
|
||
test("combined calendars show completed versus due and corrections refresh the aggregate", async () => {
|
||
const water = await f.json('/habits', 'POST', { name: 'Water', method: 'count', target: 8, unit: 'glasses' }, 201);
|
||
const read = await f.json('/habits', 'POST', { name: 'Reading', method: 'manual' }, 201);
|
||
await f.json(`/habits/${water.id}/days/2026-09-04/progress`, 'PUT', { count: 7 });
|
||
await f.json('/charts', 'POST', { name: 'Essentials', habitIds: [water.id, read.id] }, 201);
|
||
await render();
|
||
expect(container.querySelector('button[aria-label^="2026-09-04:"]')?.getAttribute('aria-label')).toContain('0 of 2 habits complete');
|
||
await click('View day details');
|
||
expect(container.textContent).toContain('7 of 8 glasses');
|
||
await click('Edit Reading check-in');
|
||
await act(async () => container.querySelector<HTMLInputElement>('input[type="checkbox"]')!.click());
|
||
expect(container.textContent).toContain('1 of 2 due habits completed');
|
||
expect(container.querySelector('button[aria-label^="2026-09-04:"]')?.getAttribute('aria-label')).toContain('1 of 2 habits complete');
|
||
});
|
||
|
||
test("failed lists retry and failed saves preserve the overview draft", async () => {
|
||
await f.json('/habits', 'POST', { name: 'Reading', method: 'manual' }, 201);
|
||
const working = globalThis.fetch;
|
||
globalThis.fetch = (async () => Response.json({ error: 'Temporarily unavailable' }, { status: 503 })) as unknown as typeof fetch;
|
||
await render();
|
||
expect(container.textContent).toContain('Temporarily unavailable');
|
||
globalThis.fetch = working;
|
||
await click('Retry overviews');
|
||
await click('Create overview');
|
||
await name('Keep this draft');
|
||
await act(async () => container.querySelector<HTMLInputElement>('input[type="checkbox"]')!.click());
|
||
globalThis.fetch = (async () => Response.json({ error: 'Save failed' }, { status: 503 })) as unknown as typeof fetch;
|
||
await click('Save overview');
|
||
expect(container.textContent).toContain('Save failed');
|
||
expect(container.querySelector<HTMLInputElement>('input[placeholder="e.g. Morning routine"]')!.value).toBe('Keep this draft');
|
||
globalThis.fetch = working;
|
||
await click('Save overview');
|
||
expect((await f.json('/charts')).charts[0].name).toBe('Keep this draft');
|
||
});
|
||
|
||
test("range changes retain the selected window and future or unscheduled days have no edit controls", async () => {
|
||
const habit = await f.json('/habits', 'POST', { name: 'Reading', method: 'manual', schedule: { type: 'weekdays', days: [5] } }, 201);
|
||
await f.json('/charts', 'POST', { name: 'Fridays', habitIds: [habit.id] }, 201);
|
||
await render();
|
||
await act(async () => container.querySelector<HTMLButtonElement>('button[aria-label="6 months"]')!.click());
|
||
const squares = () => container.querySelectorAll('button[aria-label^="2026-"]').length;
|
||
const count = squares();
|
||
await act(async () => container.querySelector<HTMLButtonElement>('button[aria-label^="2026-09-05:"]')!.click());
|
||
expect(squares()).toBe(count);
|
||
expect(container.querySelector('.ds-calendar')?.getAttribute('data-months')).toBe('6');
|
||
await click('View day details');
|
||
const dialog = container.querySelector('#overview-day')!;
|
||
expect(dialog.textContent).toContain('Nothing scheduled');
|
||
expect([...dialog.querySelectorAll('button')].some(b => b.textContent?.startsWith('Edit '))).toBe(false);
|
||
await act(async () => dialog.querySelector<HTMLButtonElement>('button[aria-label="Close dialog"]')!.click());
|
||
await act(async () => container.querySelector<HTMLButtonElement>('button[aria-label^="2026-09-11:"]')!.click());
|
||
await click('View day details');
|
||
expect(container.querySelector('#overview-day')!.textContent).toContain('Upcoming');
|
||
expect([...container.querySelectorAll('#overview-day button')].some(b => b.textContent?.startsWith('Edit '))).toBe(false);
|
||
});
|
||
|
||
test("all overviews render in the habit list and custom colors persist without resetting other settings", async () => {
|
||
const habit = await f.json('/habits', 'POST', { name: 'Read', method: 'manual' }, 201);
|
||
const first = await f.json('/charts', 'POST', { name: 'Health', habitIds: [habit.id], settings: { mainColor: '#112233', shadeCount: 7 } }, 201);
|
||
await f.json('/charts', 'POST', { name: 'Learning', habitIds: [habit.id] }, 201);
|
||
await render();
|
||
expect(container.querySelectorAll('.ds-habit-list > .ds-overview')).toHaveLength(2);
|
||
expect(container.querySelector('select')).toBeNull();
|
||
expect([...container.querySelectorAll('.ds-goal-meta')].map(el => el.textContent)).toEqual(['Combined chart · 1 habit', 'Combined chart · 1 habit']);
|
||
await click('Edit overview Health');
|
||
await click('Custom');
|
||
const hex = container.querySelector<HTMLInputElement>('input[placeholder="#426582"]')!;
|
||
await act(async () => {
|
||
Object.getOwnPropertyDescriptor(dom.HTMLInputElement.prototype, 'value')!.set!.call(hex, '#a35488');
|
||
hex.dispatchEvent(new Event('input', { bubbles: true }));
|
||
});
|
||
await click('Save overview');
|
||
expect((await f.json(`/charts/${first.id}`)).settings).toMatchObject({ mainColor: '#a35488', shadeCount: 7 });
|
||
expect(container.querySelectorAll('.ds-overview')).toHaveLength(2);
|
||
await click('Edit overview Health');
|
||
expect(container.querySelector<HTMLInputElement>('input[placeholder="#426582"]')!.value).toBe('#a35488');
|
||
});
|
||
|
||
test("day graphics show partial task and count progress without crediting incomplete habits", async () => {
|
||
const count = await f.json('/habits', 'POST', { name: 'Water', method: 'count', target: 8, unit: 'glasses' }, 201);
|
||
const routine = await f.json('/habits', 'POST', { name: 'Routine', method: 'tasks', tasks: [{ name: 'Stretch' }, { name: 'Walk' }] }, 201);
|
||
const manual = await f.json('/habits', 'POST', { name: 'Read', method: 'manual' }, 201);
|
||
await f.json(`/habits/${count.id}/days/2026-09-04/progress`, 'PUT', { count: 7 });
|
||
await f.json(`/habits/${manual.id}/days/2026-09-04/progress`, 'PUT', { done: true });
|
||
await f.json(`/habits/${routine.id}/days/2026-09-04/tasks/${routine.tasks[0].id}`, 'PUT', { done: true });
|
||
await f.json('/charts', 'POST', { name: 'Together', habitIds: [count.id, routine.id, manual.id] }, 201);
|
||
await render();
|
||
await click('View day details');
|
||
expect(container.querySelector('.ds-overview-ring')?.textContent).toBe('33%');
|
||
expect(container.querySelector('progress[aria-label="Water progress"]')?.getAttribute('value')).toBe('7');
|
||
expect(container.querySelector('progress[aria-label="Routine progress"]')?.getAttribute('value')).toBe('1');
|
||
expect(container.querySelectorAll('.ds-overview-tasks li')).toHaveLength(2);
|
||
expect(container.querySelector('.ds-overview-check')?.textContent).toBe('Checked in');
|
||
});
|