Test for #35

11ty · Feb 22, 2023 · 56604ae · 56604ae
1 parent fa09bf8
commit 56604ae
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 0 deletions.
diff --git a/test/test.js b/test/test.js
@@ -459,3 +459,26 @@ test.skip("Custom permalink JS, `dynamicPermalink: false` issue #32", async t =>
 
 	t.is(result.url, "/page.html")
 });
+
+test("WebC components in liquid layout, issue #35", async t => {
+	let elev = new Eleventy("./test/webc-component-in-layout/page.liquid", "./test/webc-component-in-layout/_site", {
+		configPath: "./test/webc-component-in-layout/eleventy.config.js"
+	});
+
+	let results = await elev.toJSON();
+	let [result] = results;
+
+	t.is(normalize(result.content), `<html lang="en">
+<head>
+<style>.wpwyzh6rm button{color:firebrick}</style>
+<script type="module">alert("test")</script>
+</head>
+<body><twitter-share class="wpwyzh6rm"><button type="button" class="nes-btn">Share Tweet</button>
+
+
+
+</twitter-share>
+Hello
+</body>
+</html>`);
+});
diff --git a/test/webc-component-in-layout/_components/twitter-share.webc b/test/webc-component-in-layout/_components/twitter-share.webc
@@ -0,0 +1,9 @@
+<button type="button" class="nes-btn">Share Tweet</button>
+
+<script>alert("test")</script>
+
+<style lang="css" webc:scoped>
+:host button {
+    color: firebrick;
+}
+</style>
diff --git a/test/webc-component-in-layout/_includes/layout.liquid b/test/webc-component-in-layout/_includes/layout.liquid
@@ -0,0 +1,9 @@
+<html lang="en">
+<head>
+<style>{{ page.url | webcGetCss }}</style>
+<script type="module">{{ page.url |  webcGetJs }}</script>
+</head>
+<body>{% renderTemplate "webc" %}<twitter-share></twitter-share>{% endrenderTemplate %}
+{{ content }}
+</body>
+</html>
diff --git a/test/webc-component-in-layout/eleventy.config.js b/test/webc-component-in-layout/eleventy.config.js
@@ -0,0 +1,16 @@
+const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(EleventyRenderPlugin);
+
+	eleventyConfig.addPlugin(EleventyWebcPlugin, {
+		components: "./test/webc-component-in-layout/_components/*.webc"
+	});
+
+	return {
+		dir: {
+			includes: "_includes",
+		}
+	}
+}
diff --git a/test/webc-component-in-layout/page.liquid b/test/webc-component-in-layout/page.liquid
@@ -0,0 +1,4 @@
+---
+layout: layout.liquid
+---
+Hello