ember.nvp 0.6.0 → 0.7.0

package/test/ember.nvp/layer-vitest.test.ts

@@ -0,0 +1,250 @@
+import { describe, it, beforeAll, afterAll, expect } from "vitest";
+import { generate } from "#test-helpers";
+import { writeLibrarySource } from "./library-src-fixtures.ts";
+import { execa } from "execa";
+import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join, relative, sep } from "node:path";
+
+import type { Project } from "ember.nvp";
+
+/**
+ * The vitest layer ships infrastructure only (config, deps, scripts).
+ * These tests generate projects with the layer, emit specs that exercise
+ * each project's real exports, and run the real `pnpm test` (vitest in
+ * headless-browser mode), asserting the specs genuinely run and pass.
+ */
+
+async function listFiles(directory: string): Promise<string[]> {
+  const entries = await readdir(directory, { withFileTypes: true, recursive: true });
+
+  return entries
+    .filter((entry) => entry.isFile())
+    .map((entry) => relative(directory, join(entry.parentPath, entry.name)))
+    .filter((path) => !path.split(sep).includes("node_modules"))
+    .sort();
+}
+
+async function read(project: Project, filePath: string): Promise<string> {
+  return readFile(join(project.directory, filePath), "utf-8");
+}
+
+async function emit(project: Project, files: Record<string, string>) {
+  for (let [path, contents] of Object.entries(files)) {
+    let filePath = join(project.directory, path);
+
+    await mkdir(dirname(filePath), { recursive: true });
+    await writeFile(filePath, contents);
+  }
+}
+
+async function installAndTest(project: Project) {
+  let install = await execa("pnpm install", { cwd: project.directory, shell: true });
+  expect(install.exitCode).toBe(0);
+
+  let test = await execa("pnpm test", { cwd: project.directory, shell: true });
+  expect(test.exitCode).toBe(0);
+}
+
+/**
+ * Specs against the library base's real exports, in the flavor matching
+ * the generated project (these files are emitted by this test, not
+ * shipped by the layer, so no automatic conversion applies).
+ */
+function libraryTests(ext: "ts" | "js") {
+  return {
+    [`tests/rendering/greeting-test.g${ext}`]: `import { describe, test, expect } from "vitest";
+import { setupRenderingContext } from "ember-vitest";
+
+import { Greeting } from "../../src/index.${ext}";
+
+describe("Greeting", () => {
+  test("greets by name", async () => {
+    using ctx = await setupRenderingContext();
+
+    await ctx.render(<template><Greeting @name="World" /></template>);
+
+    expect(ctx.element.textContent).toContain("Hello, World!");
+  });
+});
+`,
+    [`tests/rendering/badge-test.g${ext}`]: `import { describe, test, expect } from "vitest";
+import { setupRenderingContext } from "ember-vitest";
+
+import { Badge } from "../../src/index.${ext}";
+
+describe("Badge", () => {
+  test("renders its block", async () => {
+    using ctx = await setupRenderingContext();
+
+    await ctx.render(<template><Badge>New</Badge></template>);
+
+    expect(ctx.find(".badge")?.textContent).toBe("New");
+  });
+});
+`,
+    [`tests/unit/math-test.${ext}`]: `import { describe, test, expect } from "vitest";
+
+import { add } from "../../src/utils/math.${ext}";
+
+describe("add", () => {
+  test("sums two numbers", () => {
+    expect(add(2, 3)).toBe(5);
+  });
+});
+`,
+  };
+}
+
+/**
+ * Specs against the app base's real modules: boots an app made from the
+ * app's own router class (pointed at a test-friendly location) and
+ * application template, and visits its application route.
+ */
+function appTests(ext: "ts" | "js") {
+  return {
+    [`tests/application/welcome-test.g${ext}`]: `import { describe, expect } from "vitest";
+import { applicationTest } from "ember-vitest";
+import { visit } from "@ember/test-helpers";
+import Application from "ember-strict-application-resolver";
+
+import Router from "#app/router.${ext}";
+import ApplicationTemplate from "#app/templates/application.g${ext}";
+
+class TestRouter extends Router {
+  location = "none";
+}
+
+class TestApp extends Application {
+  modules = {
+    "./router": TestRouter,
+    "./templates/application": ApplicationTemplate,
+  };
+}
+
+describe("application", () => {
+  applicationTest.override({ app: ({}, use) => use(TestApp) });
+
+  applicationTest("renders the welcome page", async ({ element }) => {
+    await visit("/");
+
+    expect(element.textContent).toContain("Welcome to Ember");
+  });
+});
+`,
+  };
+}
+
+describe("layer: vitest", () => {
+  const dirs: string[] = [];
+
+  afterAll(async () => {
+    if (process.env.CI) return;
+
+    for (const dir of dirs) {
+      await rm(dir, { recursive: true, force: true, maxRetries: 3, retryDelay: 100 });
+    }
+  });
+
+  describe("JavaScript library", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({ type: "library", name: "my-lib", layers: ["vitest"] });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files", async () => {
+      expect(await listFiles(project.directory)).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "package.json",
+          "src/index.js",
+          "tsdown.config.js",
+          "vitest.config.mjs",
+        ]
+      `);
+    });
+
+    it("runs and passes emitted example tests", { timeout: 300_000 }, async () => {
+      await writeLibrarySource(project, "javascript");
+      await emit(project, libraryTests("js"));
+      await installAndTest(project);
+    });
+  });
+
+  describe("TypeScript library", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({
+        type: "library",
+        name: "my-lib",
+        layers: ["typescript", "vitest"],
+      });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files", async () => {
+      expect(await listFiles(project.directory)).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "package.json",
+          "src/index.ts",
+          "tsconfig.json",
+          "tsdown.config.js",
+          "vitest.config.mjs",
+        ]
+      `);
+    });
+
+    it("generates the vitest config", async () => {
+      expect(await read(project, "vitest.config.mjs")).toMatchInlineSnapshot(`
+        "import { ember } from "@nullvoxpopuli/ember-vite";
+        import { webdriverio } from "@vitest/browser-webdriverio";
+        import { defineConfig } from "vitest/config";
+
+        export default defineConfig({
+          plugins: [ember()],
+          test: {
+            include: ["tests/**/*-test.{js,ts,gjs,gts}"],
+            maxConcurrency: 1,
+            passWithNoTests: true,
+            browser: {
+              provider: webdriverio(),
+              enabled: true,
+              headless: true,
+              instances: [{ browser: "chrome" }],
+            },
+          },
+        });
+        "
+      `);
+    });
+
+    it("runs and passes emitted example tests", { timeout: 300_000 }, async () => {
+      await writeLibrarySource(project, "typescript");
+      await emit(project, libraryTests("ts"));
+      await installAndTest(project);
+    });
+  });
+
+  describe("TypeScript app", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({
+        type: "app",
+        name: "my-app",
+        layers: ["typescript", "vitest"],
+      });
+      dirs.push(project.directory);
+    });
+
+    it("runs and passes emitted example tests", { timeout: 300_000 }, async () => {
+      await emit(project, appTests("ts"));
+      await installAndTest(project);
+    });
+  });
+});

package/test/ember.nvp/layers.test.ts

@@ -10,14 +10,18 @@ describe("discoverLayers", () => {
 
     expect(layerNames).toMatchInlineSnapshot(`
       [
+        "are-the-types-wrong",
         "eslint-bundled-ember",
         "eslint-bundled-nvp",
         "git",
         "github-actions",
+        "inspector-support",
         "prettier",
+        "publint",
         "qunit",
         "renovate",
         "typescript",
+        "vitest",
       ]
     `);
   });
@@ -32,4 +36,16 @@ describe("discoverLayers", () => {
       });
     }
   });
+
+  describe("default selections", () => {
+    const typescript = layers.find((layer) => layer.name === "typescript")!;
+
+    it("typescript is on by default for libraries", async () => {
+      expect(await typescript.defaultValue?.("library")).toBe(true);
+    });
+
+    it("typescript is opt-in for apps", async () => {
+      expect(await typescript.defaultValue?.("app")).toBeFalsy();
+    });
+  });
 });

package/test/ember.nvp/library-src-fixtures.ts

@@ -0,0 +1,81 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+import type { Project } from "ember.nvp";
+
+/**
+ * The library base generates an empty `src/`; tests that build or test a
+ * library write this example source (a class component, a template-only
+ * component, and a plain module) into the generated project first.
+ */
+export const librarySource = {
+  typescript: {
+    "src/index.ts": `export { Badge, type BadgeSignature } from "./components/badge.gts";
+export { default as Greeting, type GreetingSignature } from "./components/greeting.gts";
+export { add } from "./utils/math.ts";
+`,
+    "src/components/greeting.gts": `import Component from "@glimmer/component";
+
+export interface GreetingSignature {
+  Element: HTMLParagraphElement;
+  Args: {
+    name: string;
+  };
+}
+
+export default class Greeting extends Component<GreetingSignature> {
+  <template>
+    <p ...attributes>Hello, {{@name}}!</p>
+  </template>
+}
+`,
+    "src/components/badge.gts": `import type { TOC } from "@ember/component/template-only";
+
+export interface BadgeSignature {
+  Element: HTMLSpanElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export const Badge: TOC<BadgeSignature> = <template>
+  <span class="badge" ...attributes>{{yield}}</span>
+</template>;
+`,
+    "src/utils/math.ts": `export function add(a: number, b: number): number {
+  return a + b;
+}
+`,
+  },
+  javascript: {
+    "src/index.js": `export { Badge } from "./components/badge.gjs";
+export { default as Greeting } from "./components/greeting.gjs";
+export { add } from "./utils/math.js";
+`,
+    "src/components/greeting.gjs": `import Component from "@glimmer/component";
+
+export default class Greeting extends Component {
+  <template>
+    <p ...attributes>Hello, {{@name}}!</p>
+  </template>
+}
+`,
+    "src/components/badge.gjs": `export const Badge = <template>
+  <span class="badge" ...attributes>{{yield}}</span>
+</template>;
+`,
+    "src/utils/math.js": `export function add(a, b) {
+  return a + b;
+}
+`,
+  },
+};
+
+export async function writeLibrarySource(project: Project, flavor: keyof typeof librarySource) {
+  for (let [filePath, contents] of Object.entries(librarySource[flavor])) {
+    let target = join(project.directory, filePath);
+
+    await mkdir(dirname(target), { recursive: true });
+    await writeFile(target, contents);
+  }
+}

package/test/ember.nvp/permutations/app-1.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-app", { index: 0, total: 2 });

package/test/ember.nvp/permutations/app-2.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-app", { index: 1, total: 2 });

package/test/ember.nvp/permutations/library-1.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-library", { index: 0, total: 2 });

package/test/ember.nvp/permutations/library-2.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-library", { index: 1, total: 2 });

package/test/ember.nvp/permutations/shared.ts

@@ -0,0 +1,239 @@
+import { beforeAll, describe, it, expect, afterAll } from "vitest";
+import { generate, permutate, bases, layers, reapply } from "#test-helpers";
+import { TODO } from "#layers";
+
+import { rm } from "node:fs/promises";
+
+import type { Project } from "ember.nvp";
+import type { ProjectType } from "#types";
+
+const baseline = "<baseline>";
+
+const RE_APPLY_ONLY = new Set<string>([
+  // "typescript"
+  // "renovate",
+  // "github-actions",
+]);
+const INITIAL_ONLY = new Set<string>([
+  // baseline,
+  // "eslint-bundled-nvp",
+  // "typescript"
+]);
+
+/**
+ * Layers that don't yet generate a working setup for a project type.
+ * Every layer is *supposed* to support every base eventually -- shrink
+ * these as layers learn.
+ */
+const NOT_YET_SUPPORTED: Record<ProjectType, Set<string>> = {
+  // publish checks: apps aren't published
+  app: new Set(["publint", "are-the-types-wrong"]),
+  // libraries have no Application to wire inspector support into
+  library: new Set(["inspector-support"]),
+};
+
+const eachBase = bases.map((base) => {
+  const type: ProjectType = base === "minimal-app" ? "app" : "library";
+
+  const applicableLayers = layers.filter((layer) => !NOT_YET_SUPPORTED[type].has(layer.name));
+
+  const permutations = permutate(applicableLayers.map((layer) => layer.name));
+  permutations.push([baseline]);
+
+  const eachPermutation = permutations
+    .filter((permutation) => {
+      if (INITIAL_ONLY.size > 0 && !permutation.some((x) => INITIAL_ONLY.has(x))) {
+        return;
+      }
+
+      // Not implemented yet
+      if (permutation.some((x) => TODO.has(x))) {
+        return;
+      }
+
+      return true;
+    })
+    .map((permutation) => ({ permutation, name: permutation.join(", ") }));
+
+  return { name: base, type, applicableLayers, eachPermutation };
+});
+
+/**
+ * The permutation matrix grows exponentially with the layer count, so
+ * each base runs from its own test file(s) -- CI runs them as separate,
+ * parallel jobs. A base whose matrix outgrows one job's budget runs from
+ * several files, each taking a deterministic 1-of-N slice.
+ *
+ * @param base which base's permutations this file runs
+ * @param slice which 1-of-N slice of the permutations this file runs
+ */
+export function testPermutations(
+  base: (typeof bases)[number],
+  slice: { index: number; total: number } = { index: 0, total: 1 },
+) {
+  const {
+    type,
+    applicableLayers,
+    eachPermutation: allPermutations,
+  } = eachBase.find((b) => b.name === base)!;
+
+  const eachPermutation = allPermutations.filter((_, i) => i % slice.total === slice.index);
+
+  describe(base, () => {
+    describe.each(eachPermutation)("layers: $name", ({ permutation }) => {
+      let project: Project;
+      let layerNames = permutation.filter((x) => x !== baseline);
+      let startingLayers = layers.filter((layer) => layerNames.includes(layer.name));
+
+      beforeAll(async () => {
+        project = await generate({
+          type,
+          layers: layerNames,
+        });
+      });
+
+      afterAll(async () => {
+        if (process.env.CI) {
+          return;
+        }
+
+        if (project?.directory) {
+          await rm(project.directory, {
+            recursive: true,
+            force: true,
+            maxRetries: 3,
+            retryDelay: 100,
+          });
+        }
+      });
+
+      it("successfully setup the layers", async () => {
+        if (startingLayers.length === 0) {
+          // TODO: test baseline stuff more?
+          expect(true, "No layers to verify").toBe(true);
+        }
+
+        for (let layer of startingLayers) {
+          expect(layer.isSetup, `has isSetup for ${layer.name}`).toBeInstanceOf(Function);
+
+          let result = await layer.isSetup(project);
+
+          expect(result, `${layer.name} is setup`).toBe(true);
+        }
+      });
+
+      /**
+       * Are these valuable? no one would invoke the layers like this
+       */
+      // describe.skip("(re)applying", () => {
+      //   for (let layer of layers) {
+      //     if (RE_APPLY_ONLY.size > 0 && !RE_APPLY_ONLY.has(layer.name)) {
+      //       continue;
+      //     }
+
+      //     if (TODO.has(layer.name)) {
+      //       continue;
+      //     }
+
+      //     describe(layer.name, () => {
+      //       let expected = startingLayers.find((l) => l.name === layer.name);
+
+      //       beforeAll(async () => {
+      //         await layer.run(project);
+      //       });
+
+      //       if (expected) {
+      //         it("is applied", async () => {
+      //           expect(layer.isSetup, `has isSetup for ${layer.name}`).toBeInstanceOf(Function);
+
+      //           let result = await layer.isSetup(project, true);
+
+      //           if (typeof result === "object") {
+      //             expect(result.reasons, `${layer.name} is setup`).deep.equal([]);
+      //             expect(result.isSetup, `${layer.name} is setup`).toBe(true);
+      //             return;
+      //           }
+
+      //           expect(result, `${layer.name} is setup`).toBe(true);
+
+      //           return;
+      //         });
+      //       } else {
+      //         it("is not applied", async () => {
+      //           expect(layer.isSetup, `has isSetup for ${layer.name}`).toBeInstanceOf(Function);
+
+      //           let result = await layer.isSetup(project, true);
+
+      //           if (typeof result === "object") {
+      //             expect(result.isSetup, `${layer.name} is not setup`).toBe(false);
+      //             hardExpect(result.reasons.length, `${layer.name} is not setup`).toBeGreaterThan(0);
+      //             return;
+      //           }
+
+      //           expect(result, `${layer.name} is not setup`).toBe(false);
+      //         });
+      //       }
+      //     });
+      //   }
+      // });
+
+      /**
+       * Simulates running the CLI again with different options selected
+       * on the same project
+       */
+      describe("apply anew", () => {
+        let newLayers = applicableLayers
+          .filter((layer) => {
+            if (RE_APPLY_ONLY.size > 0 && !RE_APPLY_ONLY.has(layer.name)) {
+              return false;
+            }
+
+            if (TODO.has(layer.name)) {
+              return false;
+            }
+
+            return true;
+          })
+          .map((layer) => ({ name: layer.name, layer }));
+
+        describe.each(newLayers)("$name", ({ layer }) => {
+          beforeAll(async () => {
+            // Simulate running the CLI again, adding one more option while
+            // keeping the previously-selected layers.
+            await reapply(project, [...new Set([...layerNames, layer.name])]);
+          });
+
+          it.for(startingLayers)("starting layers still present: $name", async (layer) => {
+            expect(layer.isSetup, `has isSetup for ${layer.name}`).toBeInstanceOf(Function);
+
+            let result = await layer.isSetup(project, true);
+
+            if (typeof result === "object") {
+              expect(result.reasons, `${layer.name} is setup`).deep.equal([]);
+              expect(result.isSetup, `${layer.name} is setup`).toBe(true);
+              return;
+            }
+
+            expect(result, `${layer.name} is setup`).toBe(true);
+          });
+
+          it("is applied", async () => {
+            expect(layer.isSetup, `has isSetup for ${layer.name}`).toBeInstanceOf(Function);
+
+            let result = await layer.isSetup(project, true);
+
+            if (typeof result === "object") {
+              expect(result.reasons, `${layer.name} is setup`).deep.equal([]);
+              expect(result.isSetup, `${layer.name} is setup`).toBe(true);
+              return;
+            }
+
+            expect(result, `${layer.name} is setup`).toBe(true);
+
+            return;
+          });
+        });
+      });
+    });
+  });
+}