test.web/presentation/renderers/learning.renderer.test.ts

test.web/presentation/renderers/learning.renderer.test.ts is a file in Codebase Testing. 49 lines of code and 0 definitions.

import { describe, expect, it } from "vitest";
import { layoutLearning } from "@banes-lab/web/domain/converters/learning.converter.ts";
import { renderLearning } from "@banes-lab/web/presentation/renderers/learning.renderer.ts";

const MODEL = layoutLearning([
    {
        code: "aa",
        label: "Start",
        owner: "disciplined-methodology",
        stops: [
            { id: "aa1", label: "01 - The loop", path: "/disciplined-methodology", requires: [] },
            { id: "aa2", label: "02 - Who does what", path: "/disciplined-methodology#who", requires: [] },
        ],
    },
    {
        code: "ab",
        label: "Patterns",
        owner: "pag",
        stops: [{ id: "ab3", label: "01 - Instruction patterns", path: "/pag/patterns", requires: ["aa1"] }],
    },
]);

describe("renderLearning", () => {
    it("draws one vector carrying the model's view box", () => {
        const view = renderLearning(MODEL);
        expect(view.vector.tagName.toLowerCase()).toBe("svg");
        expect(view.vector.getAttribute("viewBox")).toBe(`0 0 ${String(MODEL.width)} ${String(MODEL.height)}`);
    });

    it("gives every stop a node and a link to the section it depicts", () => {
        const view = renderLearning(MODEL);
        expect(view.stops).toHaveLength(3);
        for (const stop of view.stops) {
            const link = stop.node.parentElement;
            expect(link?.getAttribute("href")).toBe(stop.path);
        }
    });

    it("paints each block with the gradient of its own page", () => {
        const view = renderLearning(MODEL);
        const fills = [...view.vector.querySelectorAll(".learning-block")].map((block) => block.getAttribute("fill"));
        expect(new Set(fills).size).toBe(2);
        for (const fill of fills) {
            expect(view.vector.querySelector(`#${String(fill).slice("url(#".length, -1)}`)).not.toBeNull();
        }
    });

    it("traces one path the rail shares, so the drawn line follows the read order", () => {
        const view = renderLearning(MODEL);
        const rail = view.vector.querySelector(".learning-rail");
        expect(view.trace.getAttribute("d")).toBe(rail?.getAttribute("d"));
        expect(view.trace.getAttribute("d")?.startsWith("M ")).toBe(true);
    });
});