@augeo/smelt 1.2.2

package/lib/build/build.test.ts

@@ -0,0 +1,475 @@
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import type { Layer } from "../resolver.ts";
+import { build } from "./build.ts";
+
+interface Fixture {
+	path: string;
+	layer: Layer;
+}
+
+describe("build()", () => {
+	let tempRoot: string;
+	beforeEach(async () => {
+		tempRoot = await mkdtemp(join(tmpdir(), "smelt-build-"));
+	});
+
+	let consumer: Fixture;
+	beforeEach(async () => {
+		consumer = await makeFixture(tempRoot, "consumer");
+	});
+
+	let baseline: Fixture;
+	beforeEach(async () => {
+		baseline = await makeFixture(tempRoot, "baseline");
+	});
+
+	afterEach(async () => {
+		await rm(tempRoot, { recursive: true, force: true });
+	});
+
+	describe("with a baseline that owns the only component", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "components/button", {
+				liquid: "<button>{{ label }}</button>",
+				css: ".btn { color: red; }",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		let output: string;
+		beforeEach(async () => {
+			output = await readFile(
+				join(consumer.path, "snippets/built--components--button.liquid"),
+				"utf-8",
+			);
+		});
+
+		it("emits the built file under snippets/", () => {
+			expect(output).toBeTruthy();
+		});
+
+		it("inlines the baseline's liquid body", () => {
+			expect(output).toContain("<button>{{ label }}</button>");
+		});
+
+		it("inlines the baseline's css in a stylesheet block", () => {
+			expect(output).toContain(".btn { color: red; }");
+		});
+
+		it("tags the banner with the baseline's layer name", () => {
+			expect(output).toContain(
+				"GENERATED FROM baseline/src/components/button/button.liquid",
+			);
+		});
+	});
+
+	describe("when the consumer shadows the baseline's css", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "components/button", {
+				liquid: "<button></button>",
+				css: ".btn { color: black; }",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(consumer, "components/button", {
+				css: ".btn { color: yellow; }",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		let output: string;
+		beforeEach(async () => {
+			output = await readFile(
+				join(consumer.path, "snippets/built--components--button.liquid"),
+				"utf-8",
+			);
+		});
+
+		it("inlines the consumer's css", () => {
+			expect(output).toContain(".btn { color: yellow; }");
+		});
+
+		it("does not inline the baseline's css", () => {
+			expect(output).not.toContain(".btn { color: black; }");
+		});
+
+		it("tags the banner against the baseline (since liquid is inherited)", () => {
+			expect(output).toContain(
+				"GENERATED FROM baseline/src/components/button/button.liquid",
+			);
+		});
+	});
+
+	describe("when a section has a sibling schema.ts file", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+				schema:
+					"export const schema = { name: 'Hero', settings: [{ type: 'text', id: 'heading', label: 'Heading' }] };",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		let output: string;
+		beforeEach(async () => {
+			output = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+		});
+
+		it("injects a {% schema %} block into the built output", () => {
+			expect(output).toContain("{% schema %}");
+			expect(output).toContain("{% endschema %}");
+		});
+
+		it("includes the schema's name in the injected JSON", () => {
+			expect(output).toContain('"name": "Hero"');
+		});
+
+		it("includes the schema's settings in the injected JSON", () => {
+			expect(output).toContain('"id": "heading"');
+		});
+	});
+
+	describe("when a section's .liquid has an inline {% schema %} block", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid:
+					'<section></section>\n{% schema %}{"name":"FromInline"}{% endschema %}',
+			});
+		});
+
+		it("throws — inline schemas are not allowed", async () => {
+			await expect(
+				build({ layers: [consumer.layer, baseline.layer] }),
+			).rejects.toThrow(/Inline \{% schema %\} block/);
+		});
+
+		it("hints at the expected sibling filename in the error", async () => {
+			await expect(
+				build({ layers: [consumer.layer, baseline.layer] }),
+			).rejects.toThrow(/hero\.schema\.ts/);
+		});
+	});
+
+	describe("when a section's .liquid has a whitespace-control schema tag", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid:
+					'<section></section>\n{%- schema -%}{"name":"FromInline"}{%- endschema -%}',
+			});
+		});
+
+		it("throws — `{%- schema -%}` does not bypass the inline-schema check", async () => {
+			await expect(
+				build({ layers: [consumer.layer, baseline.layer] }),
+			).rejects.toThrow(/Inline \{% schema %\} block/);
+		});
+	});
+
+	describe("when the consumer renders a baseline component via @/...", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "components/button", {
+				liquid: "<button></button>",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(consumer, "sections/hero", {
+				liquid: "{% render '@/components/button' %}",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		let output: string;
+		beforeEach(async () => {
+			output = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+		});
+
+		it("rewrites the render to the namespaced built name", () => {
+			expect(output).toContain("{% render 'built--components--button' %}");
+		});
+
+		it("does not leave the source alias in the output", () => {
+			expect(output).not.toContain("@/components/button");
+		});
+	});
+
+	describe("when a section nests a blocks/ subdir", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+				schema: "export const schema = { name: 'Hero' };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/headline", {
+				liquid: "<h2>headline</h2>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("emits the nested block with a `_` prefix on the built filename", async () => {
+			const built = await readFile(
+				join(
+					consumer.path,
+					"blocks/_built--sections--hero--blocks--headline.liquid",
+				),
+				"utf-8",
+			);
+			expect(built).toContain("<h2>headline</h2>");
+		});
+
+		it("auto-merges the private child into the parent's blocks: [] array", async () => {
+			const hero = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+			expect(hero).toContain(
+				'"type": "_built--sections--hero--blocks--headline"',
+			);
+		});
+	});
+
+	describe("when a top-level public block nests its own blocks/ subdir", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "blocks/promo", {
+				liquid: "<aside>promo</aside>",
+				schema: "export const schema = { name: 'Promo' };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "blocks/promo/blocks/item", {
+				liquid: "<span>item</span>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("emits the nested grandchild as private (with `_` prefix)", async () => {
+			const built = await readFile(
+				join(
+					consumer.path,
+					"blocks/_built--blocks--promo--blocks--item.liquid",
+				),
+				"utf-8",
+			);
+			expect(built).toContain("<span>item</span>");
+		});
+
+		it("auto-merges the private grandchild into the public parent's blocks: []", async () => {
+			const promo = await readFile(
+				join(consumer.path, "blocks/built--blocks--promo.liquid"),
+				"utf-8",
+			);
+			expect(promo).toContain('"type": "_built--blocks--promo--blocks--item"');
+		});
+	});
+
+	describe("with a top-level block (no nesting)", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "blocks/promo", {
+				liquid: "<aside>promo</aside>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("emits without the `_` prefix (top-level blocks remain public)", async () => {
+			const built = await readFile(
+				join(consumer.path, "blocks/built--blocks--promo.liquid"),
+				"utf-8",
+			);
+			expect(built).toContain("<aside>promo</aside>");
+		});
+	});
+
+	describe("with multiple private children under one parent", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+				schema: "export const schema = { name: 'Hero' };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/zebra", {
+				liquid: "<div>z</div>",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/alpha", {
+				liquid: "<div>a</div>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("sorts discovered children alphabetically in the merged blocks array", async () => {
+			const hero = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+			const alphaIdx = hero.indexOf("--blocks--alpha");
+			const zebraIdx = hero.indexOf("--blocks--zebra");
+			expect(alphaIdx).toBeLessThan(zebraIdx);
+		});
+	});
+
+	describe("when a parent lists explicit blocks alongside private children", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+				schema:
+					"export const schema = { name: 'Hero', blocks: [{ type: 'shared-cta' }] };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/headline", {
+				liquid: "<h2></h2>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("prepends discovered children before the author's explicit entries", async () => {
+			const hero = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+			const discoveredIdx = hero.indexOf(
+				"_built--sections--hero--blocks--headline",
+			);
+			const explicitIdx = hero.indexOf("shared-cta");
+			expect(discoveredIdx).toBeLessThan(explicitIdx);
+		});
+	});
+
+	describe("when private blocks nest recursively", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+				schema: "export const schema = { name: 'Hero' };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/group", {
+				liquid: "<div></div>",
+				schema: "export const schema = { name: 'Group' };",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/group/blocks/item", {
+				liquid: "<span></span>",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("merges the grandchild into the intermediate parent's blocks array", async () => {
+			const group = await readFile(
+				join(
+					consumer.path,
+					"blocks/_built--sections--hero--blocks--group.liquid",
+				),
+				"utf-8",
+			);
+			expect(group).toContain("--group--blocks--item");
+		});
+
+		it("does not list the grandchild on the top section's blocks array", async () => {
+			const hero = await readFile(
+				join(consumer.path, "sections/built--sections--hero.liquid"),
+				"utf-8",
+			);
+			expect(hero).not.toContain("--group--blocks--item");
+		});
+	});
+
+	describe("when another component renders a private block via @/", () => {
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero", {
+				liquid: "<section></section>",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(baseline, "sections/hero/blocks/headline", {
+				liquid: "<h2></h2>",
+			});
+		});
+		beforeEach(async () => {
+			await writeComponent(consumer, "sections/somewhere", {
+				liquid: "{% render '@/sections/hero/blocks/headline' %}",
+			});
+		});
+		beforeEach(async () => {
+			await build({ layers: [consumer.layer, baseline.layer] });
+		});
+
+		it("rewrites the render with the `_built--` prefix", async () => {
+			const out = await readFile(
+				join(consumer.path, "sections/built--sections--somewhere.liquid"),
+				"utf-8",
+			);
+			expect(out).toContain(
+				"{% render '_built--sections--hero--blocks--headline' %}",
+			);
+		});
+	});
+});
+
+async function makeFixture(tempRoot: string, name: string): Promise<Fixture> {
+	const path = join(tempRoot, name);
+	await mkdir(join(path, "src"), { recursive: true });
+	return { path, layer: { path, name } };
+}
+
+async function writeComponent(
+	fixture: Fixture,
+	segments: string,
+	slots: {
+		liquid?: string;
+		ts?: string;
+		css?: string;
+		test?: string;
+		schema?: string;
+	},
+): Promise<void> {
+	const parts = segments.split("/");
+	const last = parts[parts.length - 1];
+	const directory = join(fixture.path, "src", ...parts);
+	await mkdir(directory, { recursive: true });
+	await Promise.all(
+		Object.entries({
+			[`${last}.liquid`]: slots.liquid,
+			[`${last}.ts`]: slots.ts,
+			[`${last}.css`]: slots.css,
+			[`${last}.test.ts`]: slots.test,
+			[`${last}.schema.ts`]: slots.schema,
+		})
+			.filter(([, content]) => content !== undefined)
+			.map(([filename, content]) =>
+				writeFile(join(directory, filename), content ?? ""),
+			),
+	);
+}