import { assert } from "chai"; import { Applicator } from "./applicator.js"; import { NoopTemplateCache } from "./template-cache.js"; import type { TemplateLoader } from "./template-loader.js"; it("should apply declarative shadow dom to specified elements", async () => { class MockTemplateLoader implements TemplateLoader { loadCSS(tag: string): Promise { return Promise.resolve(`:host { content: 'css for ${tag}' }`); } loadHTML(tag: string): Promise { return Promise.resolve(`

html for ${tag}

`); } } const applicator = new Applicator( new NoopTemplateCache(), new MockTemplateLoader(), ); const document = /*html*/ `

`; const res = await applicator.apply(document, [ "mock-header", "mock-content", "mock-footer", ]); assert.equal( trim(res), trim(`

`), ); }); it("should apply declarative shadow dom recursively", async () => { class MockTemplateLoader implements TemplateLoader { async loadCSS(tag: string): Promise { return `:host { content: 'css for ${tag}' }`; } async loadHTML(tag: string): Promise { switch (tag) { case "mock-foo": return ""; case "mock-bar": return ""; } return `

html for ${tag}

`; } } const applicator = new Applicator( new NoopTemplateCache(), new MockTemplateLoader(), ); const document = ""; const res = await applicator.apply(document, [ "mock-foo", "mock-bar", "mock-baz", ]); assert.equal( trim(res), trim(` `), ); }); function trim(value: string) { return value.replace(/\s+/g, "").replace(/(\r\n|\n|\r)/gm, ""); }