mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-02 13:22:11 +03:00
fab36115bc
`Button.tsx` exposes only a default export, but `RiskNoticeModal.tsx` was
importing `{ Button }` (named) — so `Button` resolved to `undefined` and every
render of the modal crashed with React's "Element type is invalid".
The modal opens on first DNS activation for every agent, so this bug
effectively broke DNS interception for every agent in production. It went
undetected through 3 rounds of code review because two test artifacts masked
the failure:
1. `tests/unit/ui/agent-card.test.tsx > calls onDnsToggle when DNS button
clicked` failed since round 3 with the exact error "Element type is
invalid... Check the render method of RiskNoticeModal", but was repeatedly
dismissed as "pre-existing / flaky".
2. `tests/unit/ui/agent-card-risk-modal.test.tsx` (rodada 3) mocked Button
as a named export — which made the test green even though the production
import was broken. Classic "test alignment to broken code" anti-pattern.
This commit:
- switches RiskNoticeModal to `import Button from "@/shared/components/Button"`
- adds a regression-guard test that source-greps for the default-import shape
and asserts Button.tsx remains default-only
- updates the named mock in agent-card-risk-modal.test.tsx to `default:` so
tests now reflect the real module shape (no more masking)
- updates the agent-card.test.tsx DNS-click test to seed the per-agent
risk-accepted localStorage flag, isolating the DNS-toggle path from the
risk-modal path (the modal flow is covered by the risk-modal spec)
After: agent-card.test.tsx 4/4 green; agent-card-risk-modal.test.tsx 5/5 green;
new regression guard prevents recurrence of either pattern.
57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
/**
|
|
* Regression guard for the RiskNoticeModal Button import bug (R4 fix #1).
|
|
*
|
|
* For 3 review rounds the agent-card.test.tsx failure ("Element type is invalid
|
|
* — Check the render method of RiskNoticeModal") was misclassified as
|
|
* "pre-existing / flaky". The actual root cause was a broken named import:
|
|
*
|
|
* import { Button } from "@/shared/components/Button"; // ← undefined
|
|
*
|
|
* `Button.tsx` exposes only a default export, so the named import resolved to
|
|
* `undefined`, causing every render of RiskNoticeModal to crash with React's
|
|
* "Element type is invalid" error. The modal opens on first DNS activation of
|
|
* every agent — so the bug effectively broke DNS interception for every agent
|
|
* in production. The R4 reviewer caught it; this test prevents recurrence.
|
|
*/
|
|
import { describe, it } from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { readFileSync } from "node:fs";
|
|
import { fileURLToPath } from "node:url";
|
|
import path from "node:path";
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const MODAL = path.resolve(__dirname, "../../src/shared/components/RiskNoticeModal.tsx");
|
|
const BUTTON = path.resolve(__dirname, "../../src/shared/components/Button.tsx");
|
|
|
|
const modalSrc = readFileSync(MODAL, "utf-8");
|
|
const buttonSrc = readFileSync(BUTTON, "utf-8");
|
|
|
|
describe("RiskNoticeModal Button import (R4 fix #1, prod crash regression guard)", () => {
|
|
it("Button.tsx exposes a default export", () => {
|
|
assert.ok(
|
|
/export\s+default\s+function\s+Button/.test(buttonSrc),
|
|
"Button.tsx must keep its default export",
|
|
);
|
|
});
|
|
|
|
it("Button.tsx does NOT have a named `export { Button }` or `export function Button`", () => {
|
|
assert.ok(
|
|
!/export\s+(\{[^}]*\bButton\b[^}]*\}|function\s+Button|const\s+Button)/.test(
|
|
buttonSrc.replace(/export\s+default\s+function\s+Button/g, ""),
|
|
),
|
|
"Button.tsx is default-only — if you add a named export, also fix any default consumers",
|
|
);
|
|
});
|
|
|
|
it("RiskNoticeModal imports Button as default (not named)", () => {
|
|
assert.ok(
|
|
/import\s+Button\s+from\s+["']@\/shared\/components\/Button["']/.test(modalSrc),
|
|
"RiskNoticeModal must use `import Button from ...` (default), not `import { Button }`",
|
|
);
|
|
assert.ok(
|
|
!/import\s+\{\s*Button\s*\}\s+from\s+["']@\/shared\/components\/Button["']/.test(modalSrc),
|
|
"Named import of Button from the .tsx file is broken (Button.tsx has no named export)",
|
|
);
|
|
});
|
|
});
|