@octopusdeploy/design-system-components/dist/src/components/Form/utils/__testing__/descriptionWithLinks.spec.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const descriptionWithLinks_1 = require("../descriptionWithLinks");
(0, vitest_1.describe)("descriptionWithLinks", () => {
    // Testing descriptionLink helper directly
    (0, vitest_1.describe)("descriptionLink", () => {
        (0, vitest_1.it)("should create a link object with correct properties", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("Click here", "https://example.com");
            (0, vitest_1.expect)(link).toEqual({
                type: "link",
                text: "Click here",
                url: "https://example.com",
                newTab: false,
            });
        });
        (0, vitest_1.it)("should create a link object with newTab set to true", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("External link", "https://external.com", true);
            (0, vitest_1.expect)(link).toEqual({
                type: "link",
                text: "External link",
                url: "https://external.com",
                newTab: true,
            });
        });
        (0, vitest_1.it)("should default newTab to false when not specified", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("Default link", "/internal-page");
            (0, vitest_1.expect)(link).not.toBe("");
            (0, vitest_1.expect)(typeof link === "object" && "newTab" in link && link.newTab).toBe(false);
        });
        (0, vitest_1.it)("should create a link object for relative URLs", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("Internal link", "/docs/getting-started");
            (0, vitest_1.expect)(link).toEqual({
                type: "link",
                text: "Internal link",
                url: "/docs/getting-started",
                newTab: false,
            });
        });
        (0, vitest_1.it)("should block dangerous javascript: URLs", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("Dangerous link", "javascript:alert('xss')");
            (0, vitest_1.expect)(link).toBe("");
        });
        (0, vitest_1.it)("should block dangerous data: URLs", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("Data link", "data:text/html,<script>alert('xss')</script>");
            (0, vitest_1.expect)(link).toBe("");
        });
        (0, vitest_1.it)("should block vbscript: URLs", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("VB link", "vbscript:msgbox('xss')");
            (0, vitest_1.expect)(link).toBe("");
        });
        (0, vitest_1.it)("should handle empty strings", () => {
            const link = (0, descriptionWithLinks_1.descriptionLink)("", "");
            (0, vitest_1.expect)(link).toEqual({
                type: "link",
                text: "",
                url: "",
                newTab: false,
            });
        });
    });
    // Testing code helper directly
    (0, vitest_1.describe)("descriptionCode", () => {
        (0, vitest_1.it)("should create a code object with correct properties", () => {
            const codeObj = (0, descriptionWithLinks_1.descriptionCode)("useState()");
            (0, vitest_1.expect)(codeObj).toEqual({
                type: "code",
                text: "useState()",
            });
        });
        (0, vitest_1.it)("should handle empty strings", () => {
            const codeObj = (0, descriptionWithLinks_1.descriptionCode)("");
            (0, vitest_1.expect)(codeObj).toEqual({
                type: "code",
                text: "",
            });
        });
        (0, vitest_1.it)("should handle special characters", () => {
            const codeObj = (0, descriptionWithLinks_1.descriptionCode)("const { data } = props;");
            (0, vitest_1.expect)(codeObj).toEqual({
                type: "code",
                text: "const { data } = props;",
            });
        });
    });
    (0, vitest_1.describe)("descriptionText", () => {
        (0, vitest_1.it)("should handle plain text only", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `This is plain text`;
            (0, vitest_1.expect)(content).toEqual(["This is plain text"]);
        });
        (0, vitest_1.it)("should handle text with embedded link", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Visit our ${(0, descriptionWithLinks_1.descriptionLink)("documentation", "/docs")} for more info.`;
            (0, vitest_1.expect)(content).toEqual([
                "Visit our ",
                {
                    type: "link",
                    text: "documentation",
                    url: "/docs",
                    newTab: false,
                },
                " for more info.",
            ]);
        });
        (0, vitest_1.it)("should handle text with relative and absolute links", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Check our ${(0, descriptionWithLinks_1.descriptionLink)("internal docs", "/docs")} and ${(0, descriptionWithLinks_1.descriptionLink)("external blog", "https://blog.example.com", true)} for updates.`;
            (0, vitest_1.expect)(content).toEqual([
                "Check our ",
                {
                    type: "link",
                    text: "internal docs",
                    url: "/docs",
                    newTab: false,
                },
                " and ",
                {
                    type: "link",
                    text: "external blog",
                    url: "https://blog.example.com",
                    newTab: true,
                },
                " for updates.",
            ]);
        });
        (0, vitest_1.it)("should handle text with embedded code", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Set the ${(0, descriptionWithLinks_1.descriptionCode)("isVisible")} prop to control visibility.`;
            (0, vitest_1.expect)(content).toEqual([
                "Set the ",
                {
                    type: "code",
                    text: "isVisible",
                },
                " prop to control visibility.",
            ]);
        });
        (0, vitest_1.it)("should handle multiple links and code snippets", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Check ${(0, descriptionWithLinks_1.descriptionCode)("props.enabled")} or visit ${(0, descriptionWithLinks_1.descriptionLink)("docs", "/docs")} and ${(0, descriptionWithLinks_1.descriptionLink)("examples", "/examples", true)}.`;
            (0, vitest_1.expect)(content).toEqual(["Check ", { type: "code", text: "props.enabled" }, " or visit ", { type: "link", text: "docs", url: "/docs", newTab: false }, " and ", { type: "link", text: "examples", url: "/examples", newTab: true }, "."]);
        });
        (0, vitest_1.it)("should filter out empty strings", () => {
            // Simulate what would happen with empty string segments
            const content = (0, descriptionWithLinks_1.descriptionText) `${""}Hello ${(0, descriptionWithLinks_1.descriptionCode)("test")} world${""}`;
            (0, vitest_1.expect)(content).toEqual(["Hello ", { type: "code", text: "test" }, " world"]);
        });
        (0, vitest_1.it)("should handle templates with no interpolated values", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Just plain text here`;
            (0, vitest_1.expect)(content).toEqual(["Just plain text here"]);
        });
        (0, vitest_1.it)("should handle empty template", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) ``;
            (0, vitest_1.expect)(content).toEqual([]);
        });
    });
    (0, vitest_1.describe)("renderDescription", () => {
        (0, vitest_1.it)("should render plain text content", () => {
            const content = ["This is plain text"];
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            (0, vitest_1.expect)(react_1.screen.getByText("This is plain text")).toBeInTheDocument();
        });
        (0, vitest_1.it)("should render link with correct attributes", () => {
            const content = ["Visit our ", { type: "link", text: "documentation", url: "/docs", newTab: false }, " for more info."];
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            const link = react_1.screen.getByRole("link", { name: "documentation" });
            (0, vitest_1.expect)(link).toHaveAttribute("href", "/docs");
            (0, vitest_1.expect)(link).toHaveAttribute("rel", "noopener noreferrer");
            (0, vitest_1.expect)(link).not.toHaveAttribute("target");
        });
        (0, vitest_1.it)("should render external link with target='_blank'", () => {
            const content = [{ type: "link", text: "external link", url: "https://external.com", newTab: true }];
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            const link = react_1.screen.getByRole("link", { name: "external link" });
            (0, vitest_1.expect)(link).toHaveAttribute("href", "https://external.com");
            (0, vitest_1.expect)(link).toHaveAttribute("target", "_blank");
            (0, vitest_1.expect)(link).toHaveAttribute("rel", "noopener noreferrer");
        });
        (0, vitest_1.it)("should render code snippets", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Set the ${(0, descriptionWithLinks_1.descriptionCode)("isVisible")} prop`;
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            // Check that the complete text content is present
            (0, vitest_1.expect)(react_1.screen.getByText(/Set the/)).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.getByText("isVisible")).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.getByText(/prop/)).toBeInTheDocument();
            const codeElement = react_1.screen.getByText("isVisible");
            (0, vitest_1.expect)(codeElement.tagName).toBe("CODE");
        });
        (0, vitest_1.it)("should render mixed content correctly", () => {
            const content = (0, descriptionWithLinks_1.descriptionText) `Check ${(0, descriptionWithLinks_1.descriptionCode)("props.enabled")} or visit ${(0, descriptionWithLinks_1.descriptionLink)("docs", "/docs")} and ${(0, descriptionWithLinks_1.descriptionLink)("examples", "/examples", true)}`;
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            (0, vitest_1.expect)(react_1.screen.getByText(/Check/)).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.getByText(/or visit/)).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.getByText(/and/)).toBeInTheDocument();
            const codeElement = react_1.screen.getByText("props.enabled");
            (0, vitest_1.expect)(codeElement.tagName).toBe("CODE");
            const docsLink = react_1.screen.getByRole("link", { name: "docs" });
            (0, vitest_1.expect)(docsLink).toHaveAttribute("href", "/docs");
            (0, vitest_1.expect)(docsLink).not.toHaveAttribute("target");
            const examplesLink = react_1.screen.getByRole("link", { name: "examples" });
            (0, vitest_1.expect)(examplesLink).toHaveAttribute("href", "/examples");
            (0, vitest_1.expect)(examplesLink).toHaveAttribute("target", "_blank");
        });
        (0, vitest_1.it)("should handle empty content array", () => {
            const content = [];
            (0, react_1.render)((0, jsx_runtime_1.jsx)("p", { "data-testid": "empty-content", children: (0, descriptionWithLinks_1.renderDescription)(content) }));
            (0, vitest_1.expect)(react_1.screen.getByTestId("empty-content")).toBeEmptyDOMElement();
        });
    });
});