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

> 30 lines of code and 0 definitions.

Tree: Codebase Testing
Language: typescript
Canonical: https://banes-lab.com/anatomy/testing#file-testing-test-web-presentation-renderers-card-renderer-test-ts
Source text: https://banes-lab.com/source/testing/test.web/presentation/renderers/card.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/block.renderer.test.ts](https://banes-lab.com/source/testing/test.web/presentation/renderers/block.renderer.test.ts.md) and before [test.web/presentation/renderers/chapter.renderer.test.ts](https://banes-lab.com/source/testing/test.web/presentation/renderers/chapter.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 {
    LICENSE_DOCUMENTATION_CARD,
    LICENSE_FREE_CARD,
    LICENSE_PAID_CARD,
} from "@banes-lab/web/core/ids/license.ids.ts";
import { describe, expect, it } from "vitest";
import { TYPES_SECTION } from "@banes-lab/web/configuration/strings/license.fragment.strings.ts";
import { renderCards } from "@banes-lab/web/presentation/renderers/card.renderer.ts";

const CARD_CLASS = "block-card";
const PERMITTED_CLASS = "permitted";
const RESTRICTED_CLASS = "restricted";

const cardBlock = TYPES_SECTION.subsections
    .flatMap((subsection) => subsection.blocks ?? [])
    .find((block) => block.kind === "card");

describe("renderCards", () => {
    it("renders the license cards with their ids", () => {
        expect(cardBlock).toBeDefined();
        const grid = renderCards(cardBlock?.kind === "card" ? cardBlock : { cards: [], kind: "card" });
        const ids = [LICENSE_FREE_CARD, LICENSE_PAID_CARD, LICENSE_DOCUMENTATION_CARD];
        expect(grid.querySelectorAll(`.${CARD_CLASS}`)).toHaveLength(ids.length);
        for (const id of ids) {
            expect(grid.querySelector(`#${id}`)).not.toBeNull();
        }
    });

    it("lists permitted and restricted rules for each card", () => {
        const grid = renderCards(cardBlock?.kind === "card" ? cardBlock : { cards: [], kind: "card" });
        expect(grid.querySelectorAll(`.${PERMITTED_CLASS}`).length).toBeGreaterThan(0);
        expect(grid.querySelectorAll(`.${RESTRICTED_CLASS}`).length).toBeGreaterThan(0);
    });
});
```