Adjust Markdown tests

Author: fiorsaoirse

src/cmem/markdown/Markdown.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import { reduceToText } from "../../common/utils/reduceToText";
+import { truncateMarkdownDisplay } from "../../common/utils/truncateMarkdownDisplay";
 
 import { Markdown } from "./Markdown";
 
@@ -46,7 +46,7 @@ describe("Markdown", () => {
             "After table.",
         ].join("\n");
 
-        const { container } = render(<Markdown cutOff={35}>{content}</Markdown>);
+        const { container } = render(<Markdown cutOff={55}>{content}</Markdown>);
 
         expect(container.querySelector("table")).toBeTruthy();
         expect(container.textContent).toContain("Name");
@@ -70,7 +70,7 @@ describe("Markdown", () => {
         ].join("\n");
 
         for (const cutOff of [152, 153]) {
-            const { container } = render(<Markdown cutOff={cutOff}>{content}</Markdown>);
+            const { container } = render(truncateMarkdownDisplay(<Markdown cutOff={cutOff}>{content}</Markdown>));
 
             expect(container.querySelectorAll("pre")).toHaveLength(2);
             expect(container.textContent).toContain('const status = "ready";');
@@ -80,9 +80,15 @@ describe("Markdown", () => {
         }
     });
 
-    it("does not call display truncation when cutOff is absent", () => {
-        const content = "Plain **markdown** with [a link](https://example.com).";
+    it("renders a link at the end of long content when cutOff is absent", () => {
+        const content = `${Array.from({ length: 40 }, (_, index) => `Long visible paragraph part ${index + 1}.`).join(
+            " ",
+        )} [final reference](https://example.com/final-reference)`;
+
+        const { container } = render(<Markdown>{content}</Markdown>);
 
-        expect(reduceToText(<Markdown>{content}</Markdown>)).toContain("Plain markdown with a link");
+        expect(container.textContent).toContain("Long visible paragraph part 1.");
+        expect(container.textContent).toContain("final reference");
+        expect(container.querySelector('a[href="https://example.com/final-reference"]')).toBeTruthy();
     });
 });

src/cmem/markdown/Markdown.tsx

@@ -8,7 +8,6 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 
-import { truncateMarkdownDisplay } from "../../common/utils/truncateMarkdownDisplay";
 import { TestableComponent } from "../../components";
 import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -125,7 +124,8 @@ const configDefault = {
     skipHtml: false,
 };
 
-const MarkdownInner = ({
+/** Renders a markdown string. */
+export const Markdown = ({
     children,
     allowHtml = false,
     removeMarkup = false,
@@ -212,6 +212,3 @@ const MarkdownInner = ({
         </HtmlContentBlock>
     );
 };
-
-/** Renders a markdown string. */
-export const Markdown = (props: MarkdownProps) => truncateMarkdownDisplay(<MarkdownInner {...props} />);

src/common/utils/truncateMarkdownDisplay.test.tsx

@@ -1,22 +1,33 @@
 import React from "react";
+import ReactMarkdown from "react-markdown";
 
-import { Markdown, MarkdownProps } from "../../cmem/markdown/Markdown";
+import { truncateMarkdown } from "../../cmem/markdown/truncateMarkdown";
 
 import { reduceToText } from "./reduceToText";
 import { truncateMarkdownDisplay } from "./truncateMarkdownDisplay";
 
+interface RawMarkdownProps {
+    children: string;
+    cutOff: number;
+    cutOffSuffix?: string;
+    allowHtml?: boolean;
+    "data-test-id"?: string;
+}
+
+const RawMarkdown = ({ children, cutOff, cutOffSuffix = "..." }: RawMarkdownProps) => (
+    <ReactMarkdown>{truncateMarkdown(children, cutOff, cutOffSuffix).trim()}</ReactMarkdown>
+);
+
 const measureLength = (node: React.ReactElement): number => reduceToText(node).length;
 
-const makeMarkdown = (children: string, cutOff: number, extra?: Partial<MarkdownProps>) =>
-    React.createElement(Markdown, { children, cutOff, ...extra }) as React.ReactElement<
-        MarkdownProps & { cutOff: number }
-    >;
+const makeMarkdown = (children: string, cutOff: number, extra?: Partial<RawMarkdownProps>) =>
+    React.createElement(RawMarkdown, { children, cutOff, ...extra }) as React.ReactElement<RawMarkdownProps>;
 
 describe("truncateMarkdownDisplay", () => {
     it("returns the untruncated element when the rendered content is already shorter than cutOff", () => {
         const input = makeMarkdown("Short text.", 1000);
         const result = truncateMarkdownDisplay(input);
-        expect((result.props as MarkdownProps).cutOff).toBeUndefined();
+        expect((result.props as RawMarkdownProps).cutOff).toBeUndefined();
     });
 
     it("returns an element whose rendered text length is closer to cutOff than the raw cutOff would yield", () => {
@@ -37,7 +48,7 @@ describe("truncateMarkdownDisplay", () => {
         const linkHeavy = Array.from({ length: 20 }, (_, i) => `[click](https://example.com/${i})`).join(" ");
         const input = makeMarkdown(linkHeavy, 40, { "data-test-id": "md-x", allowHtml: true });
         const result = truncateMarkdownDisplay(input);
-        const props = result.props as MarkdownProps;
+        const props = result.props as RawMarkdownProps;
         expect(props["data-test-id"]).toBe("md-x");
         expect(props.allowHtml).toBe(true);
     });
@@ -46,7 +57,7 @@ describe("truncateMarkdownDisplay", () => {
         const linkHeavy = Array.from({ length: 20 }, (_, i) => `[click](https://example.com/${i})`).join(" ");
         const initialCutOff = 50;
         const result = truncateMarkdownDisplay(makeMarkdown(linkHeavy, initialCutOff));
-        const props = result.props as MarkdownProps;
+        const props = result.props as RawMarkdownProps;
         // Either the element was kept (initial was already best) or cutOff was raised to compensate for syntax overhead.
         expect(props.cutOff === undefined || (typeof props.cutOff === "number" && props.cutOff >= initialCutOff)).toBe(
             true,
@@ -60,7 +71,7 @@ describe("truncateMarkdownDisplay", () => {
         const cutOff = 30;
         const input = makeMarkdown(content, cutOff);
         const resultDecoded = truncateMarkdownDisplay(input, { decodeHtmlEntities: true });
-        expect((resultDecoded.props as MarkdownProps).cutOff).toBeUndefined();
+        expect((resultDecoded.props as RawMarkdownProps).cutOff).toBeUndefined();
     });
 
     it("respects maxRounds by not iterating when set to 0", () => {
@@ -69,6 +80,6 @@ describe("truncateMarkdownDisplay", () => {
         const input = makeMarkdown(linkHeavy, initialCutOff);
         const result = truncateMarkdownDisplay(input, undefined, 0);
         // With no iterations allowed, the result should be the initial element (same cutOff as the input).
-        expect((result.props as MarkdownProps).cutOff).toBe(initialCutOff);
+        expect((result.props as RawMarkdownProps).cutOff).toBe(initialCutOff);
     });
 });