@terpjs/eslint-boundaries 0.10.0 → 0.12.0

package/src/index.js

@@ -95,6 +95,18 @@ function getJsxAttribute(openingElement, name) {
   );
 }
 
+function unwrapExpression(node) {
+  let current = node;
+  while (
+    current &&
+    ["ChainExpression", "TSAsExpression", "TSNonNullExpression", "TSSatisfiesExpression",
+      "TypeCastExpression"].includes(current.type)
+  ) {
+    current = current.expression;
+  }
+  return current;
+}
+
 function staticStringFromJsxValue(value) {
   if (!value) {
     return null;
@@ -103,13 +115,7 @@ function staticStringFromJsxValue(value) {
     return value.value;
   }
   if (value.type === "JSXExpressionContainer") {
-    const expression = value.expression;
-    if (expression.type === "Literal" && typeof expression.value === "string") {
-      return expression.value;
-    }
-    if (expression.type === "TemplateLiteral" && expression.expressions.length === 0) {
-      return expression.quasis.map((quasi) => quasi.value.cooked ?? quasi.value.raw).join("");
-    }
+    return staticString(value.expression);
   }
   return null;
 }
@@ -289,6 +295,478 @@ const noEval = {
   },
 };
 
+const UI_TEXT_ATTRIBUTES = new Set([
+  "actions",
+  "aria-description",
+  "aria-label",
+  "aria-placeholder",
+  "alt",
+  "ariaLabel",
+  "broadenedLabel",
+  "cancelLabel",
+  "cardView",
+  "caption",
+  "clearFilters",
+  "clearSearch",
+  "clearSelection",
+  "collapseRow",
+  "columns",
+  "confirmLabel",
+  "content",
+  "createPlaceholder",
+  "description",
+  "empty",
+  "emptyMessage",
+  "errorTitle",
+  "expandRow",
+  "firstPage",
+  "header",
+  "hint",
+  "label",
+  "lastPage",
+  "loading",
+  "loadingText",
+  "moreActions",
+  "moveDown",
+  "moveUp",
+  "nextPage",
+  "noOptionsText",
+  "openRow",
+  "pageOf",
+  "pageSize",
+  "placeholder",
+  "previousPage",
+  "refreshing",
+  "removeLabel",
+  "resizeColumn",
+  "resultsRange",
+  "searchPlaceholder",
+  "selectAllPage",
+  "selectAllResults",
+  "selected",
+  "selectRow",
+  "source",
+  "stat",
+  "subtitle",
+  "tableView",
+  "title",
+  "tooltip",
+  "triggerLabel",
+  "viewOptions",
+]);
+const UI_TEXT_PROPERTIES = new Set([
+  "actions",
+  "alt",
+  "aria-description",
+  "aria-label",
+  "aria-placeholder",
+  "ariaLabel",
+  "broadenedLabel",
+  "cancelLabel",
+  "cardView",
+  "caption",
+  "clearFilters",
+  "clearSearch",
+  "clearSelection",
+  "collapseRow",
+  "columns",
+  "confirmLabel",
+  "content",
+  "createPlaceholder",
+  "description",
+  "empty",
+  "emptyMessage",
+  "errorTitle",
+  "expandRow",
+  "firstPage",
+  "header",
+  "hint",
+  "label",
+  "lastPage",
+  "loading",
+  "loadingText",
+  "moreActions",
+  "moveDown",
+  "moveUp",
+  "nextPage",
+  "noOptionsText",
+  "openRow",
+  "pageOf",
+  "pageSize",
+  "placeholder",
+  "previousPage",
+  "refreshing",
+  "removeLabel",
+  "resizeColumn",
+  "resultsRange",
+  "searchPlaceholder",
+  "selectAllPage",
+  "selectAllResults",
+  "selected",
+  "selectRow",
+  "source",
+  "stat",
+  "subtitle",
+  "tableView",
+  "title",
+  "tooltip",
+  "triggerLabel",
+  "viewOptions",
+]);
+
+function staticString(node) {
+  const value = unwrapExpression(node);
+  if (value?.type === "Literal" && typeof value.value === "string") return value.value;
+  if (value?.type === "TemplateLiteral" && value.expressions.length === 0) {
+    return value.quasis.map((part) => part.value.cooked ?? part.value.raw).join("");
+  }
+  return null;
+}
+
+function containsAuthoredCopy(value) {
+  return typeof value === "string" && /\p{L}/u.test(value);
+}
+
+function isInsideCode(node) {
+  let parent = node.parent;
+  while (parent) {
+    if (parent.type === "JSXElement" && jsxName(parent.openingElement.name) === "Code") return true;
+    parent = parent.parent;
+  }
+  return false;
+}
+
+function propertyName(node) {
+  if (!node || node.computed) return null;
+  if (node.key.type === "Identifier") return node.key.name;
+  return typeof node.key.value === "string" ? node.key.value : null;
+}
+
+function isStaticDescriptor(node) {
+  const value = unwrapExpression(node);
+  if (value?.type !== "ObjectExpression") return false;
+  const named = (name) => value.properties.find(
+    (entry) => entry.type === "Property" && propertyName(entry) === name,
+  );
+  return staticString(named("id")?.value) !== null && staticString(named("message")?.value) !== null;
+}
+
+/** Authored string fragments in expressions that render or feed a known UiText property. */
+function containsStaticAuthoredCopy(node) {
+  const value = unwrapExpression(node);
+  if (!value) return false;
+  const direct = staticString(value);
+  if (containsAuthoredCopy(direct)) return true;
+  if (value.type === "TemplateLiteral") {
+    return value.quasis.some((part) =>
+      containsAuthoredCopy(part.value.cooked ?? part.value.raw),
+    );
+  }
+  if (value.type === "ConditionalExpression") {
+    return containsStaticAuthoredCopy(value.consequent) || containsStaticAuthoredCopy(value.alternate);
+  }
+  if (value.type === "LogicalExpression" || value.type === "BinaryExpression") {
+    return containsStaticAuthoredCopy(value.left) || containsStaticAuthoredCopy(value.right);
+  }
+  if (value.type === "ArrayExpression") {
+    return value.elements.some((entry) => entry !== null && containsStaticAuthoredCopy(entry));
+  }
+  if (value.type === "SequenceExpression") {
+    return value.expressions.some((entry) => containsStaticAuthoredCopy(entry));
+  }
+  if (value.type === "ObjectExpression") {
+    if (isStaticDescriptor(value)) return false;
+    return value.properties.some(
+      (entry) => entry.type === "Property" && containsStaticAuthoredCopy(entry.value),
+    );
+  }
+  return false;
+}
+
+const untranslatedMessage =
+  "Static user-facing text must use a UiText descriptor or <Trans id=... message=... /> " +
+  "and must be present in frontend/i18n.json.";
+
+/** Build-time extraction half of the app translation contract. */
+const noUntranslatedUi = {
+  meta: {
+    type: "problem",
+    docs: { description: "Require static app-authored UI copy to use the translation seam." },
+    schema: [],
+  },
+  create(context) {
+    const report = (node) => context.report({ node, message: untranslatedMessage });
+    const toastHookNames = new Set();
+    const reactCoreNamespaces = new Set();
+    const toastBindings = new Set();
+    const toastMethodBindings = new Set();
+    const toastMethods = new Set(["success", "error", "warning"]);
+    const isToastHookCall = (node) => {
+      if (node?.type !== "CallExpression") return false;
+      if (node.callee.type === "Identifier") {
+        return toastHookNames.has(node.callee.name);
+      }
+      return (
+        node.callee.type === "MemberExpression" &&
+        memberName(node.callee) === "useToast" &&
+        node.callee.object.type === "Identifier" &&
+        reactCoreNamespaces.has(node.callee.object.name)
+      );
+    };
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "@terpjs/react-core") return;
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === "ImportSpecifier" &&
+            (specifier.imported.name ?? specifier.imported.value) === "useToast"
+          ) {
+            toastHookNames.add(specifier.local.name);
+          }
+          if (specifier.type === "ImportNamespaceSpecifier") {
+            reactCoreNamespaces.add(specifier.local.name);
+          }
+        }
+      },
+      VariableDeclarator(node) {
+        if (!isToastHookCall(node.init)) return;
+        if (node.id.type === "Identifier") {
+          toastBindings.add(node.id.name);
+          return;
+        }
+        if (node.id.type === "ObjectPattern") {
+          for (const entry of node.id.properties) {
+            if (
+              entry.type === "Property" &&
+              toastMethods.has(propertyName(entry)) &&
+              entry.value.type === "Identifier"
+            ) {
+              toastMethodBindings.add(entry.value.name);
+            }
+          }
+        }
+      },
+      CallExpression(node) {
+        let feedback = false;
+        if (
+          node.callee.type === "MemberExpression" &&
+          node.callee.object.type === "Identifier" &&
+          toastBindings.has(node.callee.object.name) &&
+          toastMethods.has(memberName(node.callee))
+        ) {
+          feedback = true;
+        } else if (
+          node.callee.type === "Identifier" &&
+          toastMethodBindings.has(node.callee.name)
+        ) {
+          feedback = true;
+        }
+        if (feedback && containsStaticAuthoredCopy(node.arguments[0])) {
+          report(node.arguments[0]);
+        }
+      },
+      JSXText(node) {
+        if (!isInsideCode(node) && containsAuthoredCopy(node.value)) report(node);
+      },
+      JSXExpressionContainer(node) {
+        if (!["JSXElement", "JSXFragment"].includes(node.parent?.type) || isInsideCode(node)) return;
+        if (containsStaticAuthoredCopy(node.expression)) report(node);
+      },
+      JSXAttribute(node) {
+        const name = jsxName(node.name);
+        if (!UI_TEXT_ATTRIBUTES.has(name)) return;
+        const expression = node.value?.type === "JSXExpressionContainer"
+          ? node.value.expression
+          : node.value;
+        if (containsStaticAuthoredCopy(expression)) report(node);
+      },
+      Property(node) {
+        if (!UI_TEXT_PROPERTIES.has(propertyName(node))) return;
+        if (containsStaticAuthoredCopy(node.value)) report(node);
+      },
+    };
+  },
+};
+
+/** Read the one authoritative locale declaration at the ESLint app root. */
+export function activeI18nDeclaration(appRoot) {
+  const file = path.join(appRoot, "i18n.json");
+  if (!fs.existsSync(file)) return null;
+  try {
+    return { file, declaration: JSON.parse(fs.readFileSync(file, "utf8")), error: null };
+  } catch (error) {
+    return { file, declaration: null, error: String(error) };
+  }
+}
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/** Return the first fail-closed declaration problem, or null when its shape is sound. */
+function i18nDeclarationProblem(active) {
+  if (active.error !== null) return `${active.file} is not valid JSON; ${active.error}`;
+  const declaration = active.declaration;
+  if (!isRecord(declaration)) return `${active.file} must contain a JSON object.`;
+  const source = declaration.sourceLocale;
+  if (typeof source !== "string" || source.trim() === "") {
+    return `${active.file} must declare a non-empty sourceLocale.`;
+  }
+  if (!isRecord(declaration.locales) || !isRecord(declaration.locales[source])) {
+    return `${active.file} must contain a locales map that includes sourceLocale "${source}".`;
+  }
+  for (const [code, catalog] of Object.entries(declaration.locales)) {
+    if (code.trim() === "" || !isRecord(catalog)) {
+      return `${active.file} locale entries must be non-empty codes mapped to objects.`;
+    }
+    if (catalog.messages !== undefined && !isRecord(catalog.messages)) {
+      return `${active.file} locale "${code}" messages must be an object.`;
+    }
+    for (const [id, translated] of Object.entries(catalog.messages ?? {})) {
+      if (id.trim() === "" || typeof translated !== "string" || translated.trim() === "") {
+        return `${active.file} locale "${code}" has an empty or invalid message entry.`;
+      }
+    }
+    if (
+      catalog.allowIdentical !== undefined &&
+      (!Array.isArray(catalog.allowIdentical) ||
+        catalog.allowIdentical.some((id) => typeof id !== "string" || id.trim() === ""))
+    ) {
+      return `${active.file} locale "${code}" allowIdentical must be an array of non-empty ids.`;
+    }
+    const allowed = catalog.allowIdentical ?? [];
+    if (new Set(allowed).size !== allowed.length) {
+      return `${active.file} locale "${code}" allowIdentical contains duplicate ids.`;
+    }
+    const stale = allowed.find((id) => typeof catalog.messages?.[id] !== "string");
+    if (stale !== undefined) {
+      return `${active.file} locale "${code}" allowIdentical names missing message "${stale}".`;
+    }
+  }
+  return null;
+}
+
+function objectStringProperty(node, name) {
+  const property = node.properties.find(
+    (entry) => entry.type === "Property" && propertyName(entry) === name,
+  );
+  return property ? staticString(property.value) : null;
+}
+
+function transDescriptor(node) {
+  if (jsxName(node.name) !== "Trans") return null;
+  const id = staticStringFromJsxValue(getJsxAttribute(node, "id")?.value);
+  const message = staticStringFromJsxValue(getJsxAttribute(node, "message")?.value);
+  return typeof id === "string" && typeof message === "string" ? { id, message } : null;
+}
+
+const localeCatalogsComplete = {
+  meta: {
+    type: "problem",
+    docs: { description: "Require every UiText id in every declared target locale." },
+    schema: [],
+  },
+  create(context) {
+    // frontend/i18n.json is singular and rooted beside eslint.config.js. Walking
+    // upward from each source file would let a nested i18n.json shadow the app's
+    // declared target set and silently waive translations for one subtree.
+    const active = activeI18nDeclaration(context.cwd);
+    const declarationProblem = active === null ? null : i18nDeclarationProblem(active);
+    if (declarationProblem !== null) {
+      return {
+        Program(node) {
+          context.report({ node, message: declarationProblem });
+        },
+      };
+    }
+    const declaration = active?.declaration;
+
+    const check = (node, descriptor) => {
+      if (descriptor === null) return;
+      if (descriptor.id.trim() === "" || descriptor.message.trim() === "") {
+        context.report({
+          node,
+          message: "UiText descriptors require non-empty static id and message values.",
+        });
+        return;
+      }
+      if (declaration === undefined) {
+        context.report({
+          node,
+          message:
+            `Translation "${descriptor.id}" has no frontend/i18n.json declaration. ` +
+            "Restore the catalog and translate every target locale.",
+        });
+        return;
+      }
+      const problems = [];
+      for (const [code, catalog] of Object.entries(declaration.locales)) {
+        if (code === declaration.sourceLocale) continue;
+        const translated = catalog?.messages?.[descriptor.id];
+        if (typeof translated !== "string" || translated.trim() === "") {
+          problems.push(`${code}: missing`);
+        } else if (
+          translated === descriptor.message &&
+          !(Array.isArray(catalog.allowIdentical) && catalog.allowIdentical.includes(descriptor.id))
+        ) {
+          problems.push(`${code}: copied source (add allowIdentical only when intentional)`);
+        } else if (
+          translated !== descriptor.message &&
+          Array.isArray(catalog.allowIdentical) &&
+          catalog.allowIdentical.includes(descriptor.id)
+        ) {
+          problems.push(`${code}: stale allowIdentical entry (translation no longer matches source)`);
+        }
+      }
+      if (problems.length > 0) {
+        context.report({
+          node,
+          message: `Translation "${descriptor.id}" is incomplete in frontend/i18n.json (${problems.join(", ")}).`,
+        });
+      }
+    };
+    return {
+      ObjectExpression(node) {
+        const hasId = node.properties.some(
+          (entry) => entry.type === "Property" && propertyName(entry) === "id",
+        );
+        const hasMessage = node.properties.some(
+          (entry) => entry.type === "Property" && propertyName(entry) === "message",
+        );
+        if (!hasId || !hasMessage) return;
+        const id = objectStringProperty(node, "id");
+        const message = objectStringProperty(node, "message");
+        // The id/message pair is also a common dynamic business-data shape. With
+        // no authored literal there is nothing for the static catalog to inventory;
+        // if such a value is later used as UiText, LocaleProvider is the runtime
+        // backstop. One static half does identify a malformed descriptor and must
+        // not let its authored copy escape the catalog.
+        if (id === null && message === null) return;
+        if (id === null || message === null) {
+          context.report({
+            node,
+            message: "UiText descriptors require static non-empty id and message values.",
+          });
+          return;
+        }
+        check(node, { id, message });
+      },
+      JSXOpeningElement(node) {
+        if (jsxName(node.name) !== "Trans") return;
+        const descriptor = transDescriptor(node);
+        if (descriptor === null) {
+          context.report({
+            node,
+            message: "<Trans> requires static non-empty id and message attributes.",
+          });
+          return;
+        }
+        check(node, descriptor);
+      },
+    };
+  },
+};
+
 /** Find the app's checked-in layout-contract config upward from *dir*; null = no contract. */
 export function activeLayoutContract(dir) {
   let current = dir;
@@ -390,10 +868,12 @@ const layoutContract = {
 
 const terpPlugin = {
   rules: {
+    "locale-catalogs-complete": localeCatalogsComplete,
     "layout-contract": layoutContract,
     "no-cross-module-imports": noCrossModuleImports,
     "no-dom-html-injection": noDomHtmlInjection,
     "no-eval": noEval,
+    "no-untranslated-ui": noUntranslatedUi,
     "no-unsafe-href": noUnsafeHref,
     "no-unsafe-target-blank": noUnsafeTargetBlank,
   },
@@ -722,12 +1202,12 @@ function escapeHatchProcessor() {
 export function terpBoundaries() {
   return [
     {
-      files: BOUNDARY_SPEC.moduleFiles,
+      files: BOUNDARY_SPEC.appFiles,
       processor: escapeHatchProcessor(),
     },
     {
-      files: BOUNDARY_SPEC.moduleFiles,
-      // Inline `eslint-disable` comments are inert in app modules; the justified
+      files: BOUNDARY_SPEC.appFiles,
+      // Inline `eslint-disable` comments are inert in app source; the justified
       // `terp-allow-*` marker (budget-governed) is the *only* escape hatch (ADR 0059).
       linterOptions: { noInlineConfig: true },
       languageOptions: {
@@ -735,6 +1215,19 @@ export function terpBoundaries() {
         parserOptions: { ecmaFeatures: { jsx: true }, sourceType: "module" },
       },
       plugins: { terp: terpPlugin },
+      rules: {
+        "terp/locale-catalogs-complete": "error",
+        "terp/no-untranslated-ui": "error",
+      },
+    },
+    {
+      files: BOUNDARY_SPEC.moduleFiles,
+      linterOptions: { noInlineConfig: true },
+      languageOptions: {
+        parser: tseslint.parser,
+        parserOptions: { ecmaFeatures: { jsx: true }, sourceType: "module" },
+      },
+      plugins: { terp: terpPlugin },
       rules: {
         "terp/layout-contract": "error",
         "terp/no-cross-module-imports": "error",

package/src/index.test.js

@@ -1,7 +1,8 @@
+import fs from "node:fs";
 import path from "node:path";
 
 import { ESLint } from "eslint";
-import { describe, expect, it } from "vitest";
+import { afterAll, describe, expect, it } from "vitest";
 
 import terpBoundaries from "./index.js";
 
@@ -9,17 +10,26 @@ import terpBoundaries from "./index.js";
 // a violating fixture (and stays quiet on clean, out-of-module code), so "enforced" is real.
 // File paths are resolved under the cwd so ESLint's `files` globs match (the parser then applies).
 
-const MODULE_FILE = path.resolve("src/modules/widgets/Widget.tsx");
-const OUTSIDE_FILE = path.resolve("src/main.tsx");
+const LINT_ROOT = path.resolve("node_modules/.cache/terp-index-tests");
+fs.rmSync(LINT_ROOT, { recursive: true, force: true });
+fs.mkdirSync(LINT_ROOT, { recursive: true });
+fs.writeFileSync(
+  path.join(LINT_ROOT, "i18n.json"),
+  JSON.stringify({ sourceLocale: "en", locales: { en: {} } }),
+);
+const MODULE_FILE = path.join(LINT_ROOT, "src/modules/widgets/Widget.tsx");
+const OUTSIDE_FILE = path.join(LINT_ROOT, "src/main.tsx");
+
+afterAll(() => fs.rmSync(LINT_ROOT, { recursive: true, force: true }));
 
 async function lint(code, filePath = MODULE_FILE) {
-  const eslint = new ESLint({ overrideConfigFile: true, overrideConfig: terpBoundaries });
+  const eslint = new ESLint({ cwd: LINT_ROOT, overrideConfigFile: true, overrideConfig: terpBoundaries });
   const [result] = await eslint.lintText(code, { filePath });
   return result.messages.map((message) => message.ruleId);
 }
 
 async function lintMessages(code, filePath = MODULE_FILE) {
-  const eslint = new ESLint({ overrideConfigFile: true, overrideConfig: terpBoundaries });
+  const eslint = new ESLint({ cwd: LINT_ROOT, overrideConfigFile: true, overrideConfig: terpBoundaries });
   const [result] = await eslint.lintText(code, { filePath });
   return result.messages.map((message) => message.message);
 }
@@ -27,11 +37,11 @@ async function lintMessages(code, filePath = MODULE_FILE) {
 describe("terpBoundaries", () => {
   it("passes clean module code (react-core components + generated client)", async () => {
     const code = [
-      'import { Button, Select, Textarea, useTerpClient } from "@terpjs/react-core";',
+      'import { Button, Select, Textarea, Trans, useTerpClient } from "@terpjs/react-core";',
       "export function Widget() {",
       "  const client = useTerpClient();",
       "  void client;",
-      "  return <><Button>ok</Button><Select /><Textarea /></>;",
+      '  return <><Button><Trans id="widget.ok" message="OK" /></Button><Select /><Textarea /></>;',
       "}",
     ].join("\n");
     expect(await lint(code)).toEqual([]);
@@ -42,6 +52,24 @@ describe("terpBoundaries", () => {
     expect(await lint(code)).toContain("terp/no-cross-module-imports");
   });
 
+  it("flags static JSX copy, UI attributes, and UI-bearing object properties", async () => {
+    expect(await lint("export const W = () => <Text>Save changes</Text>;"))
+      .toContain("terp/no-untranslated-ui");
+    expect(await lint('export const W = () => <Page title="Widgets" />;'))
+      .toContain("terp/no-untranslated-ui");
+    expect(await lint('export const columns = [{ header: "Created at" }];'))
+      .toContain("terp/no-untranslated-ui");
+  });
+
+  it("accepts descriptors and Trans as authored localization seams", async () => {
+    const code = [
+      'import { Page, Trans } from "@terpjs/react-core";',
+      'const title = { id: "widgets.title", message: "Widgets" };',
+      'export const W = () => <Page title={title}><Trans id="widgets.empty" message="Nothing here yet." /></Page>;',
+    ].join("\n");
+    expect(await lint(code)).toEqual([]);
+  });
+
   it("flags a dynamic import() of a sibling module (no spelling escape)", async () => {
     const code = 'export const load = () => import("../other/thing");';
     expect(await lint(code)).toContain("terp/no-cross-module-imports");
@@ -75,7 +103,7 @@ describe("terpBoundaries", () => {
   });
 
   it("allows an external anchor", async () => {
-    expect(await lint('export const W = () => <a href="https://example.com">docs</a>;')).toEqual([]);
+    expect(await lint('export const W = ({ label }) => <a href="https://example.com">{label}</a>;')).toEqual([]);
   });
 
   it("flags className (no side channel into hand-authored CSS)", async () => {
@@ -153,7 +181,7 @@ describe("terpBoundaries", () => {
     ).toContain("terp/no-unsafe-target-blank");
     expect(
       await lint(
-        'export const W = () => <a href="https://example.com" target={`_blank`} rel="noopener noreferrer">docs</a>;',
+        'export const W = ({ label }) => <a href="https://example.com" target={`_blank`} rel="noopener noreferrer">{label}</a>;',
       ),
     ).toEqual([]);
   });
@@ -168,7 +196,7 @@ describe("terpBoundaries", () => {
     expect(await lint('export const W = () => <a href={`javascript:${danger}`}>bad</a>;')).toContain(
       "terp/no-unsafe-href",
     );
-    expect(await lint('export const W = ({ href }) => <a href={href}>ok</a>;')).toEqual([]);
+    expect(await lint('export const W = ({ href, label }) => <a href={href}>{label}</a>;')).toEqual([]);
   });
 
   it("flags DOM HTML injection sinks", async () => {
@@ -206,8 +234,9 @@ describe("terpBoundaries", () => {
 
   it("suppresses a violation with a justified terp-allow marker on the line above", async () => {
     const code = [
+      'import { Trans } from "@terpjs/react-core";',
       "// terp-allow-token-styled-elements: native button needed for a browser extension host",
-      "export const W = () => <button>x</button>;",
+      'export const W = () => <button><Trans id="widget.action" message="Action" /></button>;',
     ].join("\n");
     expect(await lint(code)).toEqual([]);
   });
@@ -220,8 +249,9 @@ describe("terpBoundaries", () => {
 
   it("suppresses a custom terp rule with the reported rule id suffix", async () => {
     const code = [
+      'import { Trans } from "@terpjs/react-core";',
       "// terp-allow-no-unsafe-target-blank: external vendor requires opener for a handshake",
-      'export const W = () => <a href="https://example.com" target="_blank">docs</a>;',
+      'export const W = () => <a href="https://example.com" target="_blank"><Trans id="widget.docs" message="Docs" /></a>;',
     ].join("\n");
     expect(await lint(code)).toEqual([]);
   });