ember.nvp 0.5.0 → 0.7.0

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

@@ -1,15 +1,139 @@
-import { describe, it, afterAll, expect } from "vitest";
+import { describe, it, beforeAll, afterAll, expect } from "vitest";
 import { generate } from "#test-helpers";
-import { rimraf } from "rimraf";
+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";
+
+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"))
+    .filter((path) => !path.startsWith(`dist${sep}`))
+    .sort();
+}
+
+async function read(project: Project, filePath: string): Promise<string> {
+  return readFile(join(project.directory, filePath), "utf-8");
+}
+
+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);
+}
 
 /**
- * The replace-or-update question only matters when a project already exists
- * at the target path. These tests generate a project, assert the baseline
- * state, then regenerate over it the way the CLI does once the user has
- * answered the question, and assert the resulting project output is correct
- * for each answer.
+ * The layer ships testing infrastructure only; the tests exercising the
+ * base's example exports are generated here, in both flavors.
  */
+const exampleTests = {
+  typescript: {
+    "tests/rendering/greeting-test.gts": `import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+
+import Greeting from "#src/components/greeting.gts";
+
+module("Rendering | Greeting", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    await render(<template><Greeting @name="Tomster" /></template>);
+
+    assert.dom("p").hasText("Hello, Tomster!");
+  });
+});
+`,
+    "tests/rendering/badge-test.gts": `import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+
+import { Badge } from "#src/components/badge.gts";
+
+module("Rendering | Badge", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders its content", async function (assert) {
+    await render(<template><Badge>New</Badge></template>);
+
+    assert.dom("span.badge").hasText("New");
+  });
+});
+`,
+    "tests/unit/math-test.ts": `import { module, test } from "qunit";
+
+import { add } from "#src/utils/math.ts";
+
+module("Unit | add", function () {
+  test("adds two numbers", function (assert) {
+    assert.strictEqual(add(1, 2), 3);
+  });
+});
+`,
+  },
+  javascript: {
+    "tests/rendering/greeting-test.gjs": `import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+
+import Greeting from "#src/components/greeting.gjs";
+
+module("Rendering | Greeting", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    await render(<template><Greeting @name="Tomster" /></template>);
+
+    assert.dom("p").hasText("Hello, Tomster!");
+  });
+});
+`,
+    "tests/rendering/badge-test.gjs": `import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+
+import { Badge } from "#src/components/badge.gjs";
+
+module("Rendering | Badge", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders its content", async function (assert) {
+    await render(<template><Badge>New</Badge></template>);
+
+    assert.dom("span.badge").hasText("New");
+  });
+});
+`,
+    "tests/unit/math-test.js": `import { module, test } from "qunit";
+
+import { add } from "#src/utils/math.js";
+
+module("Unit | add", function () {
+  test("adds two numbers", function (assert) {
+    assert.strictEqual(add(1, 2), 3);
+  });
+});
+`,
+  },
+};
+
+async function writeExampleTests(project: Project, flavor: keyof typeof exampleTests) {
+  for (let [filePath, contents] of Object.entries(exampleTests[flavor])) {
+    let target = join(project.directory, filePath);
+
+    await mkdir(dirname(target), { recursive: true });
+    await writeFile(target, contents);
+  }
+}
+
 describe("layer: qunit", () => {
   const dirs: string[] = [];
 
@@ -17,18 +141,255 @@ describe("layer: qunit", () => {
     if (process.env.CI) return;
 
     for (const dir of dirs) {
-      await rimraf(dir, { maxRetries: 3, retryDelay: 100 });
+      await rm(dir, { recursive: true, force: true, maxRetries: 3, retryDelay: 100 });
     }
   });
 
-  it("it boots and run tests", async () => {
-    const project = await generate({ type: "app", layers: ["qunit"] });
-    dirs.push(project.directory);
+  describe("app", () => {
+    it("it boots and run tests", async () => {
+      const project = await generate({ type: "app", layers: ["qunit"] });
+      dirs.push(project.directory);
+
+      await installAndTest(project);
+    });
+  });
+
+  describe("library (TypeScript)", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({
+        type: "library",
+        name: "my-lib",
+        layers: ["qunit", "typescript"],
+      });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files, without any index.html", async () => {
+      let files = await listFiles(project.directory);
+
+      expect(files.some((file) => file.endsWith("index.html"))).toBe(false);
+      expect(files).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "config/test/babel.config.js",
+          "config/test/testem.cjs",
+          "package.json",
+          "src/index.ts",
+          "tests/rendering/.gitkeep",
+          "tests/test-helper.ts",
+          "tests/unit/.gitkeep",
+          "tsconfig.json",
+          "tsdown.config.js",
+          "vite.config.mjs",
+        ]
+      `);
+    });
+
+    it("generates the test build config", async () => {
+      expect(await read(project, "vite.config.mjs")).toMatchInlineSnapshot(`
+        "import { defineConfig } from "vite";
+        import { ember } from "@nullvoxpopuli/ember-vite";
+
+        export default defineConfig({
+          plugins: [ember({ babel: { configFile: "./config/test/babel.config.js" } })],
+        });
+        "
+      `);
+      expect(await read(project, "config/test/babel.config.js")).toMatchInlineSnapshot(`
+        "import { buildMacros } from "@embroider/macros/babel";
+
+        const macros = buildMacros({
+          configure(config) {
+            if (process.env.EMBER_ENV === "test") {
+              config.enableRuntimeMode();
+            }
+          },
+        });
+
+        export default {
+          plugins: [
+            [
+              "@babel/plugin-transform-typescript",
+              {
+                allExtensions: true,
+                onlyRemoveTypeImports: true,
+                allowDeclareFields: true,
+              },
+            ],
+            [
+              "babel-plugin-ember-template-compilation",
+              {
+                transforms: [...macros.templateMacros],
+              },
+            ],
+            [
+              "module:decorator-transforms",
+              {
+                runtime: {
+                  import: import.meta.resolve("decorator-transforms/runtime-esm"),
+                },
+              },
+            ],
+            ...macros.babelMacros,
+          ],
+
+          generatorOpts: {
+            compact: false,
+          },
+        };
+        "
+      `);
+      expect(await read(project, "config/test/testem.cjs")).toMatchInlineSnapshot(`
+        ""use strict";
+
+        if (typeof module !== "undefined") {
+          module.exports = {
+            test_page: "tests/index.html?hidepassed",
+            cwd: "dist",
+            disable_watching: true,
+            launch_in_ci: ["Chrome"],
+            launch_in_dev: ["Chrome"],
+            browser_start_timeout: 120,
+            browser_args: {
+              Chrome: {
+                ci: [
+                  // --no-sandbox is needed when running Chrome inside a container
+                  process.env.CI ? "--no-sandbox" : null,
+                  "--headless",
+                  "--disable-dev-shm-usage",
+                  "--disable-software-rasterizer",
+                  "--mute-audio",
+                  "--remote-debugging-port=0",
+                  "--window-size=1440,900",
+                ].filter(Boolean),
+              },
+            },
+          };
+        }
+        "
+      `);
+    });
+
+    it("leaves the publish build config alone", async () => {
+      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+        "import { defineConfig, ember } from "@nullvoxpopuli/ember-rolldown";
+
+        export default defineConfig({
+          entry: ["./src/index.ts"],
+          plugins: [ember()],
+        });
+        "
+      `);
+    });
+
+    it("installs, and tests generated against the library's exports pass", async () => {
+      await writeLibrarySource(project, "typescript");
+      await writeExampleTests(project, "typescript");
+      await installAndTest(project);
+    });
+
+    it("the publish build still ships precompileTemplate", async () => {
+      let build = await execa("pnpm build", { cwd: project.directory, shell: true });
+      expect(build.exitCode).toBe(0);
+
+      let output = await read(project, "dist/index.js");
+
+      expect(output).toContain("precompileTemplate");
+      expect(output).not.toContain("createTemplateFactory");
+    });
+  });
+
+  describe("library (JavaScript)", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({ type: "library", name: "my-lib", layers: ["qunit"] });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files, without any index.html", async () => {
+      let files = await listFiles(project.directory);
+
+      expect(files.some((file) => file.endsWith("index.html"))).toBe(false);
+      expect(files).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "config/test/babel.config.js",
+          "config/test/testem.cjs",
+          "package.json",
+          "src/index.js",
+          "tests/rendering/.gitkeep",
+          "tests/test-helper.js",
+          "tests/unit/.gitkeep",
+          "tsdown.config.js",
+          "vite.config.mjs",
+        ]
+      `);
+    });
+
+    it("has no TypeScript leftovers in the test build config", async () => {
+      expect(await read(project, "config/test/babel.config.js")).toMatchInlineSnapshot(`
+        "import { buildMacros } from "@embroider/macros/babel";
+
+        const macros = buildMacros({
+          configure(config) {
+            if (process.env.EMBER_ENV === "test") {
+              config.enableRuntimeMode();
+            }
+          },
+        });
+
+        export default {
+          plugins: [[
+            "babel-plugin-ember-template-compilation",
+            {
+              transforms: [...macros.templateMacros],
+            },
+          ], [
+            "module:decorator-transforms",
+            {
+              runtime: {
+                import: import.meta.resolve("decorator-transforms/runtime-esm"),
+              },
+            },
+          ], ...macros.babelMacros],
+
+          generatorOpts: {
+            compact: false,
+          },
+        };
+        "
+      `);
+      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+        "import { defineConfig, ember } from "@nullvoxpopuli/ember-rolldown";
+
+        export default defineConfig({
+          entry: ["./src/index.js"],
+          dts: false,
+          plugins: [ember()],
+        });
+        "
+      `);
+    });
+
+    it("installs, and tests generated against the library's exports pass", async () => {
+      await writeLibrarySource(project, "javascript");
+      await writeExampleTests(project, "javascript");
+      await installAndTest(project);
+    });
+
+    it("the publish build still ships precompileTemplate", async () => {
+      let build = await execa("pnpm build", { cwd: project.directory, shell: true });
+      expect(build.exitCode).toBe(0);
 
-    let install = await execa("pnpm install", { cwd: project.directory, shell: true });
-    expect(install.exitCode).toBe(0);
+      let output = await read(project, "dist/index.js");
 
-    let test = await execa("pnpm test", { cwd: project.directory, shell: true });
-    expect(test.exitCode).toBe(0);
+      expect(output).toContain("precompileTemplate");
+      expect(output).not.toContain("createTemplateFactory");
+    });
   });
 });

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();
+    });
+  });
 });