test(cli): validate hyphenated collections via SSR output

Review feedback on #1716: prefer validating content collections
through a prerendered component's output over asserting on the
x-content-key wire format. Mirrors build.config.prerender-collections
with a hyphenated collection (my-posts) and route (/my-blog), asserting
the rendered links and the emitted data-*.json query files. Fails
against the unfixed key parsing (collection resolves to zero pages).

Refs #1715

Author: jstockdi

packages/cli/test/cases/build.config.prerender-collections-hyphen/build.config.prerender-collections-hyphen.spec.js

@@ -0,0 +1,144 @@
+/*
+ * Use Case
+ * Run Greenwood build command with prerender and active content, using Content as Data APIs
+ * with a hyphenated collection name ("my-posts") and a hyphenated route ("/my-blog"), rendered
+ * through SSR'd custom elements.
+ *
+ * User Result
+ * Should generate a Greenwood build where the prerendered components list the pages of the
+ * hyphenated collection / route, and the emitted data-*.json query files contain those pages
+ * (regression for content keys being split on every hyphen).
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   activeContent: true,
+ *   prerender: true
+ * }
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     posts-list.js       (getContentByCollection("my-posts"))
+ *     routes-list.js      (getContentByRoute("/my-blog"))
+ *   pages/
+ *     my-blog/
+ *       first.html        (collection: my-posts)
+ *       second.html       (collection: my-posts)
+ *     index.html
+ */
+
+// https://github.com/ProjectEvergreen/greenwood/issues/1715
+import fs from "node:fs/promises";
+import { expect } from "chai";
+import { JSDOM } from "jsdom";
+import path from "node:path";
+import { runSmokeTest } from "../../../../../test/smoke-test.js";
+import { getOutputTeardownFiles } from "../../../../../test/utils.js";
+import { Runner } from "gallinago";
+import { fileURLToPath } from "node:url";
+
+describe("Build Greenwood With: ", function () {
+  const LABEL =
+    "Prerender Configuration turned on using Content as Data with a hyphenated collection";
+  const cliPath = path.join(process.cwd(), "packages/cli/src/bin.js");
+  const outputPath = fileURLToPath(new URL(".", import.meta.url));
+  let runner;
+
+  before(function () {
+    this.context = {
+      publicDir: path.join(outputPath, "public"),
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function () {
+    before(async function () {
+      await runner.setup(outputPath);
+      await runner.runCommand(cliPath, "build");
+    });
+
+    runSmokeTest(["public", "index"], LABEL);
+
+    describe("Default output for index.html with hyphenated collection content", function () {
+      let dom;
+
+      before(async function () {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, "./index.html"));
+      });
+
+      describe("post links from getContentByCollection('my-posts')", function () {
+        let postLinks;
+
+        before(function () {
+          postLinks = dom.window.document.querySelectorAll("ol li a");
+        });
+
+        it("should have the expected number of post links from all pages in the collection", function () {
+          expect(postLinks.length).to.equal(2);
+        });
+
+        it("should have the expected link content from all pages in the collection", function () {
+          expect(postLinks[0].getAttribute("href")).to.equal("/my-blog/first/");
+          expect(postLinks[0].getAttribute("title")).to.equal("First Post");
+          expect(postLinks[0].textContent).to.equal("First");
+
+          expect(postLinks[1].getAttribute("href")).to.equal("/my-blog/second/");
+          expect(postLinks[1].getAttribute("title")).to.equal("Second Post");
+          expect(postLinks[1].textContent).to.equal("Second");
+        });
+      });
+
+      describe("page links from getContentByRoute('/my-blog')", function () {
+        let pageLinks;
+
+        before(function () {
+          pageLinks = dom.window.document.querySelectorAll("ul li a");
+        });
+
+        it("should have the expected number of page links for the hyphenated route", function () {
+          expect(pageLinks.length).to.equal(2);
+        });
+
+        it("should have the expected link content for the hyphenated route", function () {
+          expect(pageLinks[0].getAttribute("href")).to.equal("/my-blog/first/");
+          expect(pageLinks[1].getAttribute("href")).to.equal("/my-blog/second/");
+        });
+      });
+    });
+
+    describe("Emitted data query files for the hyphenated content keys", function () {
+      it("should emit a collection query file with the pages of the hyphenated collection", async function () {
+        const collectionData = JSON.parse(
+          await fs.readFile(
+            path.resolve(this.context.publicDir, "./data-collection-my-posts.json"),
+            "utf-8",
+          ),
+        );
+        const routes = collectionData.map((page) => page.route).sort();
+
+        expect(collectionData.length).to.equal(2);
+        expect(routes).to.deep.equal(["/my-blog/first/", "/my-blog/second/"]);
+      });
+
+      it("should emit a route query file with the pages of the hyphenated route", async function () {
+        const routeData = JSON.parse(
+          await fs.readFile(
+            path.resolve(this.context.publicDir, "./data-route-_my-blog.json"),
+            "utf-8",
+          ),
+        );
+        const routes = routeData.map((page) => page.route).sort();
+
+        expect(routeData.length).to.equal(2);
+        expect(routes).to.deep.equal(["/my-blog/first/", "/my-blog/second/"]);
+      });
+    });
+  });
+
+  after(async function () {
+    await runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});

packages/cli/test/cases/build.config.prerender-collections-hyphen/greenwood.config.js

@@ -0,0 +1,4 @@
+export default {
+  activeContent: true,
+  prerender: true,
+};

packages/cli/test/cases/build.config.prerender-collections-hyphen/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/cli/test/cases/build.config.prerender-collections-hyphen/src/components/posts-list.js

@@ -0,0 +1,25 @@
+import { getContentByCollection } from "@greenwood/cli/src/data/client.js";
+
+export default class MyPostsList extends HTMLElement {
+  async connectedCallback() {
+    const posts = (await getContentByCollection("my-posts")).sort((a, b) =>
+      a.data.order > b.data.order ? 1 : -1,
+    );
+
+    this.innerHTML = `
+      <ol>
+        ${posts
+          .map((post) => {
+            const { route, label, title } = post;
+
+            return `
+              <li><a href="${route}" title="${title}">${label}</a></li>
+            `;
+          })
+          .join("")}
+      </ol>
+    `;
+  }
+}
+
+customElements.define("x-my-posts-list", MyPostsList);

packages/cli/test/cases/build.config.prerender-collections-hyphen/src/components/routes-list.js

@@ -0,0 +1,25 @@
+import { getContentByRoute } from "@greenwood/cli/src/data/client.js";
+
+export default class MyBlogRoutes extends HTMLElement {
+  async connectedCallback() {
+    const pages = (await getContentByRoute("/my-blog")).sort((a, b) =>
+      a.data.order > b.data.order ? 1 : -1,
+    );
+
+    this.innerHTML = `
+      <ul>
+        ${pages
+          .map((page) => {
+            const { route, label, title } = page;
+
+            return `
+              <li><a href="${route}" title="${title}">${label}</a></li>
+            `;
+          })
+          .join("")}
+      </ul>
+    `;
+  }
+}
+
+customElements.define("x-my-blog-routes", MyBlogRoutes);

packages/cli/test/cases/build.config.prerender-collections-hyphen/src/pages/index.html

@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <script type="module" src="../components/posts-list.js" data-gwd-opt="static"></script>
+    <script type="module" src="../components/routes-list.js" data-gwd-opt="static"></script>
+  </head>
+
+  <body>
+    <h1>Home Page</h1>
+    <x-my-posts-list></x-my-posts-list>
+    <x-my-blog-routes></x-my-blog-routes>
+  </body>
+</html>

packages/cli/test/cases/build.config.prerender-collections-hyphen/src/pages/my-blog/first.html

@@ -0,0 +1,11 @@
+---
+collection: my-posts
+title: First Post
+order: 1
+---
+
+<html>
+  <body>
+    <h1>First Post</h1>
+  </body>
+</html>

packages/cli/test/cases/build.config.prerender-collections-hyphen/src/pages/my-blog/second.html

@@ -0,0 +1,11 @@
+---
+collection: my-posts
+title: Second Post
+order: 2
+---
+
+<html>
+  <body>
+    <h1>Second Post</h1>
+  </body>
+</html>