bermudalamb
f32913ef51
Indexing an array now yields `T | undefined`, which is what it always did — the compiler simply says so. Enabled in backend/tsconfig.json and frontend/tsconfig.json, and in tsconfig.sonar.json alongside it so the drift guard stays satisfied. The sequencing this issue insisted on was right, and the numbers show why. Before #159 typed the query results, `rows[0]` was `any` and `any` indexes to `any`: the flag would have found close to nothing and the count would have changed completely afterwards. With the rows typed it finds 57 — 50 in the backend, 4 in the frontend, 3 in the Playwright suite — and they fall into three kinds. Thirty are `rows[0]` after a `rows.length` guard. TypeScript cannot connect the two, and rewriting them as `const [row] = rows; if (!row) …` makes the guard and the use the same check, which is better code independently of the flag. Ten are rows a statement guarantees — `INSERT … RETURNING`, or a lookup for an id the session middleware has already matched. These get `requireRow(rows, what)`, a new helper in db.ts that throws naming the query. A thrown error rather than a non-null assertion: if the assumption is ever wrong, an assertion hands `undefined` to the next line and fails somewhere unrelated, whereas this fails at the query and says which. asyncRoute turns it into a 500, which is the right answer for "the database did not do what the statement says it does". It also states the assumption once instead of ten times. The rest is ordinary indexing the compiler cannot prove: a regex capture group that the pattern guarantees, `split('+')[0]`, a modulo kept in range, `hasOwnProperty` failing to narrow an index signature, and Express typing route params as an index signature so `req.params.itemId` is `string | undefined` on a route that cannot match without it. One correction to this issue's premise, which matters for what it was expected to find. The body says "in a handful it does not guard at all", and the unguarded-500 risk it describes was not found. Every `rows[0]` either sits behind a length check or behind a statement that guarantees a row. What the flag actually bought was the ten places where that guarantee was real but unstated, and those now say so. Two changes worth calling out because they are not mechanical. TAG_COLORS is typed `[string, ...string[]]` in both copies rather than `as const` — the first attempt used `as const`, which narrowed the elements to literals and broke adminTags, so the annotation keeps `string` while telling the compiler index 0 exists. And the filter drawer's slider falls back to the bounds it was given rather than to null, because null there reads as "no filter" and would widen the results rather than leave them unchanged. Test files needed changes too, since ts-jest compiles them against the same config: a regex destructure in the compose guard, and ten `mock.calls[0][0]` reads where the surrounding assertions already establish the call happened. Verified: tsc clean over backend, frontend src and the Playwright suite; unit 254/254; integration 238/238; frontend build clean; lint unchanged in both workspaces. Closes #101
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
import { test, expect, AdminPage, createCategory, createTag, uniqueSuffix } from './fixtures';
|
|
|
|
// Relative luminance per WCAG, used to tell "light" from "dark" without
|
|
// asserting exact hex values, which would break on any palette tweak.
|
|
function luminance(rgb: string): number {
|
|
// Defaulted per channel rather than on the match: a colour string with
|
|
// fewer than three numbers would otherwise leave a channel undefined.
|
|
const [r = 0, g = 0, b = 0] = (rgb.match(/\d+(\.\d+)?/g) ?? []).slice(0, 3).map(Number);
|
|
const channel = (c: number) => {
|
|
const s = c / 255;
|
|
return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
|
|
};
|
|
return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
|
|
}
|
|
|
|
// The Categories and Tags tabs render an empty state when there is nothing to
|
|
// show, and the shared dev database gets truncated by the backend integration
|
|
// suite (#116). Seed what each test needs rather than depending on what happens
|
|
// to be there.
|
|
async function seed(request: import('@playwright/test').APIRequestContext) {
|
|
const run = uniqueSuffix();
|
|
await createCategory(request, `Theme ${run}`);
|
|
await createTag(request, `theme-${run}`);
|
|
}
|
|
|
|
test.describe('Admin dark mode', () => {
|
|
test('the active tab label is readable against the dark background', async ({ admin }) => {
|
|
await admin.switchToDark();
|
|
|
|
// The bug: colorPrimary stayed #1a1a1a in dark mode, so the active tab was
|
|
// near-black text on a near-black background.
|
|
await expect
|
|
.poll(async () => luminance(await AdminPage.colorOf(admin.activeTabLabel)))
|
|
.toBeGreaterThan(0.5);
|
|
});
|
|
|
|
test('the Categories tab follows the dark theme', async ({ page, admin }) => {
|
|
await seed(page.request);
|
|
await admin.switchToDark();
|
|
await admin.openTab('Categories');
|
|
|
|
await expect(admin.activeTree).toBeVisible();
|
|
|
|
// The bug: deep imports from antd/lib loaded a second copy of antd that
|
|
// never saw ConfigProvider, so this rendered pure white in dark mode.
|
|
expect(luminance(await AdminPage.backgroundOf(admin.activeTree))).toBeLessThan(0.5);
|
|
});
|
|
|
|
test('the Tags tab follows the dark theme', async ({ page, admin }) => {
|
|
await seed(page.request);
|
|
await admin.switchToDark();
|
|
await admin.openTab('Tags');
|
|
|
|
await expect(admin.activeTable).toBeVisible();
|
|
expect(luminance(await AdminPage.backgroundOf(admin.activeTable))).toBeLessThan(0.5);
|
|
});
|
|
|
|
test('the item form category selector follows the dark theme', async ({
|
|
admin,
|
|
adminInventory
|
|
}) => {
|
|
await admin.switchToDark();
|
|
await adminInventory.openItemForm();
|
|
await adminInventory.categoryField.click();
|
|
|
|
await expect(admin.selectDropdown).toBeVisible();
|
|
expect(luminance(await AdminPage.backgroundOf(admin.selectDropdown))).toBeLessThan(0.5);
|
|
});
|
|
});
|
|
|
|
test.describe('Admin copy', () => {
|
|
test('uses American English spelling for color', async ({ page, admin }) => {
|
|
await seed(page.request);
|
|
await admin.open('Tags');
|
|
|
|
await expect(page.getByRole('columnheader', { name: 'Color' })).toBeVisible();
|
|
await expect(page.getByText('Colour')).toHaveCount(0);
|
|
});
|
|
});
|