chore: #3 add basic tests

test-fixtures/components/greeting.js

@@ -0,0 +1,18 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <p>Hello from the greeting component!</p>
+`;
+
+export default class GreetingComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  async connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('x-greeting', GreetingComponent);

test-fixtures/index.md

@@ -0,0 +1,3 @@
+## 11ty + WCC Demo
+
+<x-greeting></x-greeting>

test/plugin.test.js

@@ -1,22 +1,80 @@
 import Eleventy from '@11ty/eleventy';
 import { wccPlugin } from '../src/index.js';
 import assert from 'node:assert/strict';
-import { describe, it } from 'node:test';
+import { describe, it, before } from 'node:test';
 
 describe('WCC plugin', () => {
-  it('removes wrapping p tags', async () => {
-    const elev = new Eleventy('demo', 'test/output', {
-      config: function (eleventyConfig) {
-        eleventyConfig.addPlugin(wccPlugin.configFunction);
-      }
+  describe('Default options', () => {
+    let indexMdFile;
+
+    before(async () => {
+      const templates = await setUpTemplates();
+      ({ indexMdFile } = templates);
+    });
+
+    it('prints the header', () => {
+      const expected = '<h2>11ty + WCC Demo</h2>';
+
+      assert.ok(indexMdFile.content.includes(expected), 'Header not found');
+    });
+
+    it('prints the greeting component', () => {
+      const contentNormalized = indexMdFile.content
+        .replaceAll(/\s+/g, ' ')
+        .trim();
+      const expected =
+        '<x-greeting><template shadowrootmode="open"> <p>Hello from the greeting component!</p> </template></x-greeting>';
+
+      assert.ok(
+        contentNormalized.includes(expected),
+        'x-greeting component not found'
+      );
+    });
+
+    it('removes wrapping p tags', () => {
+      const regexp = new RegExp('<p><x-greeting>(.|\\s)*</x-greeting></p>');
+
+      assert.doesNotMatch(indexMdFile.content, regexp);
     });
+  });
 
-    await elev.init();
-
-    const elevOutput = await elev.toJSON();
-    const result = elevOutput[0].content;
+  describe('trimParagraphTagsInMd: false', () => {
+    it('leaves wrapping p tags', async () => {
+      const eleventy = setUpEleventy({ trimParagraphTagsInMd: false });
+      const { indexMdFile } = await setUpTemplates(eleventy);
+      const regexp = new RegExp('<p><x-greeting>(.|\\s)*</x-greeting></p>');
 
-    const regexp = new RegExp('<p><x-greeting>(.|\\s)*</x-greeting></p>');
-    assert.doesNotMatch(result, regexp);
+      assert.match(indexMdFile.content, regexp);
+    });
   });
 });
+
+function setUpEleventy(pluginOptions = {}) {
+  return new Eleventy('test-fixtures', 'test/output', {
+    configPath: null,
+    config: function (eleventyConfig) {
+      eleventyConfig.addPlugin(wccPlugin, {
+        definitions: [
+          new URL('../test-fixtures/components/greeting.js', import.meta.url)
+        ],
+        ...pluginOptions
+      });
+    }
+  });
+}
+
+async function setUpTemplates(eleventy = null) {
+  eleventy ??= setUpEleventy();
+
+  await eleventy.init();
+  const elevOutput = await eleventy.toJSON();
+
+  const indexMdFile = elevOutput.find(
+    (template) => template.inputPath === './test-fixtures/index.md'
+  );
+
+  assert.ok(indexMdFile, 'Precondition failed: demo/index.md not found');
+
+  return { indexMdFile };
+}
+