# test.web/presentation/renderers/record.renderer.test.ts

> 73 lines of code and 0 definitions.

Tree: Codebase Testing
Language: typescript
Canonical: https://banes-lab.com/anatomy/testing#file-testing-test-web-presentation-renderers-record-renderer-test-ts
Source text: https://banes-lab.com/source/testing/test.web/presentation/renderers/record.renderer.test.ts.txt

Listed in [test.web/presentation/renderers](https://banes-lab.com/api/source/testing/test.web/presentation/renderers.md), after [test.web/presentation/renderers/panel.renderer.test.ts](https://banes-lab.com/source/testing/test.web/presentation/renderers/panel.renderer.test.ts.md) and before [test.web/presentation/renderers/schema.renderer.test.ts](https://banes-lab.com/source/testing/test.web/presentation/renderers/schema.renderer.test.ts.md).

## Contained in

- [test.web/presentation/renderers](https://banes-lab.com/anatomy/testing/folder-testing-test-web-presentation-renderers.md)

## Source

```typescript
import { describe, expect, it } from "vitest";
import { renderDetails, renderRecordBody, renderRecordRow } from "@banes-lab/web/presentation/renderers/record.renderer.ts";
import { RECORD_CLASS } from "@banes-lab/web/configuration/constants/ontology.constants.ts";
import type { RecordSubject } from "@banes-lab/web/types/page.types.ts";

const SUBJECT: RecordSubject = {
    aliases: ["store", "memo"],
    alternates: { json: "/json/records/lexicon/cache", markdown: "/records/lexicon/cache.md" },
    code: "CACHE",
    collection: { label: "Lexicon", path: "/ontology/lexicon" },
    description: "A store that answers again without the work.",
    facts: [
        { label: "Record", value: { label: "lexicon:cache", path: null } },
        { label: "Canonical", value: { label: "Lexicon", path: "/ontology/lexicon#lexicon-cache" } },
    ],
    kind: "term",
    layer: { label: "Runtime", path: "/records/layer/runtime" },
    name: "Cache",
    path: "/records/lexicon/cache",
    placement: {
        next: { label: "Memo <b>", path: "/records/lexicon/memo" },
        previous: null,
        up: { label: "Lexicon records", path: null },
    },
    relations: [
        { links: [{ label: "Memoization", path: "/records/lexicon/memoization" }, { label: "Unlinked", path: null }], relation: "requires" },
        { links: [], relation: "enables" },
    ],
    section: null,
    summary: "A store that answers again without the work.",
    title: "Cache (CACHE) — Lexicon — Bane's Lab",
};

describe("renderRecordBody", () => {
    it("draws the name, code, kind, layer, aliases, summary and every relation that has a link", () => {
        const body = renderRecordBody(SUBJECT);
        expect(body.querySelector("h1")?.textContent).toBe("Cache");
        expect(body.querySelector("nav a")?.getAttribute("href")).toBe("/ontology/lexicon");
        expect(body.querySelector("code")?.textContent).toBe("CACHE");
        expect(body.textContent).toContain("Kind: term");
        expect(body.textContent).toContain("Aliases: store, memo");
        const headings = [...body.querySelectorAll("h2")].map((heading) => heading.textContent);
        expect(headings).toStrictEqual(["Requires"]);
        const items = [...body.querySelectorAll("li")];
        expect(items.map((item) => item.textContent)).toStrictEqual(["Memoization", "Unlinked"]);
        expect(items[1]?.querySelector("a")).toBeNull();
        expect(body.textContent).toContain("Record: lexicon:cache");
        expect(body.querySelector(".record-field a[href='/ontology/lexicon#lexicon-cache']")?.textContent).toBe("Lexicon");
        const placement = body.querySelector(".record-placement");
        expect(placement?.textContent).toContain("Lexicon records");
        expect(placement?.querySelector("a")?.textContent).toBe("Memo <b>");
    });

    it("leaves out the code, layer, aliases, facts and placement a record does not have", () => {
        const body = renderRecordBody({ ...SUBJECT, aliases: [], code: null, facts: [], layer: null, placement: null, relations: [] });
        expect(body.querySelector(".record-placement")).toBeNull();
        expect(body.querySelector("code")).toBeNull();
        expect(body.textContent).not.toContain("Layer");
        expect(body.textContent).not.toContain("Aliases");
        expect(body.querySelectorAll("h2")).toHaveLength(0);
    });
});

describe("renderRecordRow and renderDetails", () => {
    it("draws a row with its chips and a details body that fills on first open", () => {
        const row = renderRecordRow({ context: "Group", id: "lexicon-cache", title: "Cache" }, ["Kind: term"], () => [
            document.createElement("p"),
        ], ["store"]);
        expect(row.classList.contains(RECORD_CLASS)).toBe(true);
        expect(row.querySelector(".record-title")?.textContent).toBe("Cache");
        expect(row.querySelector(".record-chip")?.textContent).toBe("Kind: term");
        const details = renderDetails("More", () => [document.createElement("p")]);
        expect(details.querySelector("p")).toBeNull();
        details.dispatchEvent(new Event("toggle"));
        expect(details.querySelector("p")).not.toBeNull();
    });
});
```