| 1 | import { createElement } from "react"; |
| 2 | import { renderToStaticMarkup } from "react-dom/server"; |
| 3 | import { describe, expect, it } from "vitest"; |
| 4 | import { getRatatuiCopy } from "@/lib/content/ratatui"; |
| 5 | import heroEntry from "@/public/ratatui/entries/showcase-work.json"; |
| 6 | import { RatatuiHero } from "./hero"; |
| 7 | |
| 8 | describe("Ratatui hero", () => { |
| 9 | it("pairs both responsive captions with the unchanged truecolor buffers in each locale", () => { |
| 10 | expect([heroEntry.width, heroEntry.height]).toEqual([104, 30]); |
| 11 | const previews = heroEntry.previews["dark-truecolor"]; |
| 12 | expect(previews.native).toContain('viewBox="0 0 1040 600"'); |
| 13 | expect(previews["40"]).toContain('viewBox="0 0 400 600"'); |
| 14 | |
| 15 | for (const locale of ["en", "zh"]) { |
| 16 | const copy = getRatatuiCopy(locale); |
| 17 | const markup = renderToStaticMarkup(createElement(RatatuiHero, { locale, copy })); |
| 18 | const caption = markup.match(/<figcaption\b[^>]*>([\s\S]*?)<\/figcaption>/)?.[1]; |
| 19 | const label = (width: string) => copy.heroCaption.replace("{width}", width).replace("{height}", "30"); |
| 20 | expect(caption).toContain(`<span class="rat-hero-wide">${label("104")}</span>`); |
| 21 | expect(caption).toContain(`<span class="rat-hero-narrow">${label("40")}</span>`); |
| 22 | expect(caption).not.toMatch(/\{width\}|\{height\}/); |
| 23 | expect(markup).toContain(`aria-label="${copy.heroLabel}"`); |
| 24 | expect(markup).toContain(`href="/${locale}/ratatui/showcase-work"`); |
| 25 | |
| 26 | const buffers = [...markup.matchAll(/<div class="rat-hero-terminal rat-hero-(?:wide|narrow)"[^>]*>([\s\S]*?)<\/div>/g)] |
| 27 | .map((match) => match[1]); |
| 28 | expect(buffers).toHaveLength(2); |
| 29 | expect(buffers[0] === previews.native).toBe(true); |
| 30 | expect(buffers[1] === previews["40"]).toBe(true); |
| 31 | } |
| 32 | }); |
| 33 | }); |
| 34 |