123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
import { assert, assertEquals } from "../deps/assert.ts";import { build, getSite } from "./utils.ts";
import liquid from "../plugins/liquid.ts";import eta from "../plugins/eta.ts";import pug from "../plugins/pug.ts";import jsx from "../plugins/jsx.ts";
Deno.test("Components", async (t) => {  const site = getSite({    src: "components",  });
  site.use(liquid());  site.use(eta());  site.use(pug());  site.use(jsx());
  site.component("custom", {    name: "button",    render: ({ text }): string => {      return `<button class="custom">${text}</button>`;    },  });
  site.component("custom.header", {    name: "title",    render: ({ text }): string => {      return `<h1 class="custom">${text}</h1>`;    },  });
  assert(site.globalComponents.get("custom"));
  await build(site);
  await t.step("Components are accessed from comp", () => {    const data = site.source.root?.data;    assert(data);    assert(data.comp);    assert(data.comp.button_eta);    assert(data.comp.button_jsx);    assert(data.comp.button_njk);    assert(data.comp.button_liquid);
    const subData = site.source.root?.dirs.get("subfolder")?.data;    assert(subData);    assert(subData.comp);    assert(subData.comp.button_eta);    assert(subData.comp.button_jsx);    assert(subData.comp.button_njk);    assert(subData.comp.button_liquid);    assert(subData.comp.innerbutton);    assert(subData.comp.button_pug);    assert(subData.comp.button_ts);  });
  await t.step("Nunjucks components", () => {    const comp = site.source.root?.data.comp?.button_njk;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.trim(),      `<button class="button_njk">Hello world</button>`,    );  });
  await t.step("Liquid components", () => {    const comp = site.source.root?.data.comp?.button_liquid;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.trim(),      `<button class="button_liquid">Hello world</button>`,    );  });
  await t.step("Module components", () => {    const comp = site.source.root?.dirs.get("subfolder")?.data.comp?.button_ts;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.trim(),      `<button class="button_ts">Hello world</button>`,    );  });
  await t.step("Eta components", () => {    const comp = site.source.root?.data.comp?.button_eta;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.trim(),      `<button class="button_eta">Hello world</button>`,    );  });
  await t.step("Pug components", () => {    const comp = site.source.root?.dirs.get("subfolder")?.data.comp?.button_pug;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.trim(),      `<button class="button_pug">Hello world</button>`,    );  });
  await t.step("JSX components", () => {    const comp = site.source.root?.data.comp?.button_jsx;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Hello world" });    assertEquals(      result.toString().trim(),      `<button class="button_jsx">Hello world</button>`,    );  });
  await t.step("JS inner components", () => {    const comp = site.source.root?.dirs.get("subfolder")?.data.comp      ?.innerButton;
    // @ts-ignore: TODO: fix    const result = comp({ text: "Inner button" });    assertEquals(      result.toString().trim(),      `<div><button class="button_jsx">Inner button</button></div>`,    );  });
  await t.step("Custom components", () => {    // @ts-ignore: Button component must exist    const button = site.source.root?.data.comp?.custom.button;    // @ts-ignore: Title component must exist    const title = site.source.root?.data.comp?.custom.header.title;
    assertEquals(      button({ text: "Hello world" }),      `<button class="custom">Hello world</button>`,    );    assertEquals(      title({ text: "Hello world" }),      `<h1 class="custom">Hello world</h1>`,    );  });});