João Salavisa
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import { cleanup, render, screen } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it } from "vitest";
|
|
import { Trans } from "react-i18next";
|
|
|
|
import Link from "@/components/routing/app-link";
|
|
|
|
afterEach(cleanup);
|
|
|
|
/**
|
|
* The "not connected" notices on the GitHub and GitLab task pages are one
|
|
* sentence wrapped around a settings link. Migrating them created a failure that
|
|
* no gate catches: written as
|
|
*
|
|
* <Trans i18nKey="…"><Link href={…} /> to see your pull requests…</Trans>
|
|
*
|
|
* with a message of `<0></0> to see your pull requests…`, the tag is EMPTY and
|
|
* the `<Link />` is self-closing, so the link renders with **no text at all** —
|
|
* a visibly broken control on a page whose only purpose is to send you to
|
|
* settings. `pnpm lint`, `i18n:check` and `check-trans-indices.mjs` were all
|
|
* green on it: the key resolved, the catalogs matched, the `<0>` landed on a
|
|
* real element child. Only looking at it showed the gap.
|
|
*
|
|
* The fix is that the link LABEL belongs inside the message, so a translator can
|
|
* move it and it can never render empty. These assert the reassembled sentence
|
|
* and that the anchor carries text.
|
|
*/
|
|
function renderNotice(i18nKey: string, href: string) {
|
|
return render(
|
|
<Trans i18nKey={i18nKey}>
|
|
<Link href={href} className="underline font-medium cursor-pointer" />
|
|
</Trans>,
|
|
);
|
|
}
|
|
|
|
describe("integration not-connected notices", () => {
|
|
it("renders the GitHub sentence with a non-empty settings link", () => {
|
|
const { container } = renderNotice(
|
|
"github:openSettingsToSeePrsAndIssues",
|
|
"/settings/integrations/github",
|
|
);
|
|
|
|
expect(container.textContent).toBe(
|
|
"Open GitHub settings to see your pull requests and issues.",
|
|
);
|
|
const link = screen.getByRole("link");
|
|
expect(link.textContent).toBe("Open GitHub settings");
|
|
expect(link.getAttribute("href")).toBe("/settings/integrations/github");
|
|
});
|
|
|
|
it("renders the GitLab sentence with a non-empty settings link", () => {
|
|
const { container } = renderNotice(
|
|
"gitlab:openSettingsToSeeMrsAndIssues",
|
|
"/settings/integrations/gitlab",
|
|
);
|
|
|
|
expect(container.textContent).toBe("Settings → GitLab to see your merge requests and issues.");
|
|
expect(screen.getByRole("link").textContent).toBe("Settings → GitLab");
|
|
});
|
|
});
|