@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/commands/hydrogen/init.test.js

@@ -1,126 +1,378 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { vi, describe, beforeEach, it, expect } from 'vitest';
 import { temporaryDirectoryTask } from 'tempy';
 import { runInit } from './init.js';
-import { renderSelectPrompt, renderConfirmationPrompt, renderTextPrompt, renderInfo } from '@shopify/cli-kit/node/ui';
-import { outputContent } from '@shopify/cli-kit/node/output';
-import { installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { exec } from '@shopify/cli-kit/node/system';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { readFile, writeFile, isDirectory } from '@shopify/cli-kit/node/fs';
+import { basename, joinPath } from '@shopify/cli-kit/node/path';
+import { checkHydrogenVersion } from '../../lib/check-version.js';
+import { handleProjectLocation } from '../../lib/onboarding/common.js';
+import glob from 'fast-glob';
+import { getSkeletonSourceDir } from '../../lib/build.js';
+import { execAsync } from '../../lib/process.js';
+import { rmdir, symlink } from 'fs-extra';
 
+vi.mock("../../lib/template-downloader.js", async () => ({
+  getLatestTemplates: () => Promise.resolve({})
+}));
+vi.mock(
+  "@shopify/cli-kit/node/node-package-manager",
+  async (importOriginal) => {
+    const original = await importOriginal();
+    return {
+      ...original,
+      installNodeModules: vi.fn(),
+      getPackageManager: () => Promise.resolve("npm"),
+      packageManagerUsedForCreating: () => Promise.resolve("npm")
+    };
+  }
+);
+vi.mock("../../lib/check-version.js");
+const { renderTasksHook } = vi.hoisted(() => {
+  return {
+    renderTasksHook: vi.fn()
+  };
+});
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn(),
+    renderSelectPrompt: vi.fn(),
+    renderTextPrompt: vi.fn(),
+    renderInfo: vi.fn(),
+    renderTasks: vi.fn(async (args) => {
+      await original.renderTasks(args);
+      renderTasksHook();
+    })
+  };
+});
+vi.mock("../../lib/onboarding/common.js", async (importOriginal) => {
+  const original = await importOriginal();
+  return Object.keys(original).reduce((acc, item) => {
+    const key = item;
+    const value = original[key];
+    if (typeof value === "function") {
+      acc[key] = vi.fn(value);
+    } else {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+});
 describe("init", () => {
+  const outputMock = mockAndCaptureOutput();
   beforeEach(() => {
-    vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit/node/output");
-    vi.mock("../../lib/transpile-ts.js");
-    vi.mock("../../lib/template-downloader.js", async () => ({
-      getLatestTemplates: () => Promise.resolve({})
-    }));
-    vi.mock("@shopify/cli-kit/node/node-package-manager");
-    vi.mocked(outputContent).mockImplementation(() => ({
-      value: ""
-    }));
-    vi.mock("@shopify/cli-kit/node/ui");
-    vi.mock("@shopify/cli-kit/node/fs");
+    vi.clearAllMocks();
+    outputMock.clear();
   });
-  const defaultOptions = (stubs) => ({
-    template: "hello-world",
-    language: "js",
-    path: "path/to/project",
-    ...stubs
+  it("checks Hydrogen version", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const showUpgradeMock = vi.fn((param) => ({
+        currentVersion: "1.0.0",
+        newVersion: "1.0.1"
+      }));
+      vi.mocked(checkHydrogenVersion).mockResolvedValueOnce(showUpgradeMock);
+      vi.mocked(handleProjectLocation).mockResolvedValueOnce(void 0);
+      const project = await runInit({ path: tmpDir, git: false });
+      expect(project).toBeFalsy();
+      expect(checkHydrogenVersion).toHaveBeenCalledOnce();
+      expect(showUpgradeMock).toHaveBeenCalledWith(
+        expect.stringContaining("npm create @shopify/hydrogen@latest")
+      );
+    });
   });
-  describe.each([
-    {
-      flag: "template",
-      value: "hello-world",
-      condition: { fn: renderSelectPrompt, match: /template/i }
-    },
-    {
-      flag: "installDeps",
-      value: true,
-      condition: { fn: renderConfirmationPrompt, match: /install dependencies/i }
-    },
-    {
-      flag: "language",
-      value: "ts",
-      condition: { fn: renderSelectPrompt, match: /language/i }
-    },
-    {
-      flag: "path",
-      value: "./my-app",
-      condition: { fn: renderTextPrompt, match: /where/i }
-    }
-  ])("flag $flag", ({ flag, value, condition }) => {
-    it(`does not prompt the user for ${flag} when a value is passed in options`, async () => {
+  describe("local templates", () => {
+    it("creates basic projects", async () => {
       await temporaryDirectoryTask(async (tmpDir) => {
-        const options = defaultOptions({
+        await runInit({
           path: tmpDir,
-          [flag]: value
+          git: false,
+          language: "ts",
+          mockShop: true
+        });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        await runInit(options);
-        expect(condition.fn).not.toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: expect.stringMatching(condition.match)
-          })
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        const nonAppFiles = skeletonFiles.filter(
+          (item) => !item.startsWith("app/")
+        );
+        expect(projectFiles).toEqual(expect.arrayContaining(nonAppFiles));
+        expect(projectFiles).toContain("app/root.tsx");
+        expect(projectFiles).toContain("app/entry.client.tsx");
+        expect(projectFiles).toContain("app/entry.server.tsx");
+        expect(projectFiles).toContain("app/components/Layout.tsx");
+        expect(projectFiles).not.toContain("app/routes/_index.tsx");
+        await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
+          await readFile(`${getSkeletonSourceDir()}/server.ts`)
+        );
+        await expect(readFile(`${tmpDir}/package.json`)).resolves.toMatch(
+          `"name": "${basename(tmpDir)}"`
+        );
+        await expect(readFile(`${tmpDir}/.env`)).resolves.toMatch(
+          `PUBLIC_STORE_DOMAIN="mock.shop"`
+        );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).not.toMatch("Routes");
+        expect(output).toMatch(/Language:\s*TypeScript/);
+        expect(output).toMatch("Help");
+        expect(output).toMatch("Next steps");
+        expect(output).toMatch(
+          /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });
     });
-    it(`prompts the user for ${flag} when no value is passed in options`, async () => {
+    it("creates projects with route files", async () => {
       await temporaryDirectoryTask(async (tmpDir) => {
-        const options = defaultOptions({
-          path: tmpDir,
-          [flag]: void 0
+        await runInit({ path: tmpDir, git: false, routes: true, language: "ts" });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        await runInit(options);
-        expect(condition.fn).toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: expect.stringMatching(condition.match)
-          })
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        expect(projectFiles).toEqual(expect.arrayContaining(skeletonFiles));
+        expect(projectFiles).toContain("app/routes/_index.tsx");
+        await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
+          await readFile(`${getSkeletonSourceDir()}/server.ts`)
         );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).toMatch(/Language:\s*TypeScript/);
+        expect(output).toMatch("Routes");
+        expect(output).toMatch("Home (/ & /:catchAll)");
+        expect(output).toMatch("Account (/account/*)");
       });
     });
-  });
-  it("installs dependencies when installDeps is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({ installDeps: true, path: tmpDir });
-      await runInit(options);
-      expect(installNodeModules).toHaveBeenCalled();
+    it("transpiles projects to JS", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        await runInit({ path: tmpDir, git: false, routes: true, language: "js" });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
+        });
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        expect(projectFiles).toEqual(
+          expect.arrayContaining(
+            skeletonFiles.filter((item) => !item.endsWith(".d.ts")).map(
+              (item) => item.replace(/\.ts(x)?$/, ".js$1").replace(/tsconfig\.json$/, "jsconfig.json")
+            )
+          )
+        );
+        expect(projectFiles).toContain("app/routes/_index.jsx");
+        await expect(readFile(`${tmpDir}/server.js`)).resolves.toMatch(
+          /export default {\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/
+        );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).toMatch(/Language:\s*JavaScript/);
+        expect(output).toMatch("Routes");
+        expect(output).toMatch("Home (/ & /:catchAll)");
+        expect(output).toMatch("Account (/account/*)");
+      });
     });
-  });
-  it("does not install dependencies when installDeps is false", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({ installDeps: false, path: tmpDir });
-      await runInit(options);
-      expect(installNodeModules).not.toHaveBeenCalled();
+    describe("styling libraries", () => {
+      it("scaffolds Tailwind CSS", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "tailwind"
+          });
+          await expect(readFile(`${tmpDir}/remix.config.js`)).resolves.toMatch(
+            /tailwind: true,\n\s*postcss: true,\n\s*future:/
+          );
+          await expect(
+            readFile(`${tmpDir}/app/styles/tailwind.css`)
+          ).resolves.toMatch(/@tailwind base;/);
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import tailwindCss from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: tailwindCss\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*Tailwind/);
+        });
+      });
+      it("scaffolds CSS Modules", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "css-modules"
+          });
+          await expect(readFile(`${tmpDir}/package.json`)).resolves.toMatch(
+            `"@remix-run/css-bundle": "`
+          );
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import {cssBundleHref} from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: cssBundleHref\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*CSS Modules/);
+        });
+      });
+      it("scaffolds Vanilla Extract", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "vanilla-extract"
+          });
+          const packageJson = await readFile(`${tmpDir}/package.json`);
+          expect(packageJson).toMatch(/"@remix-run\/css-bundle": "/);
+          expect(packageJson).toMatch(/"@vanilla-extract\/css": "/);
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import {cssBundleHref} from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: cssBundleHref\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*Vanilla Extract/);
+        });
+      });
     });
-  });
-  it("displays inventory information when using the demo-store template", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({
-        installDeps: false,
-        path: tmpDir,
-        template: "demo-store"
+    describe("i18n strategies", () => {
+      it("scaffolds i18n with domains strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "domains",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/domain = url.hostname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Top-level domains/);
+        });
+      });
+      it("scaffolds i18n with subdomains strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "subdomains",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/firstSubdomain = url.hostname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Subdomains/);
+        });
+      });
+      it("scaffolds i18n with subfolders strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "subfolders",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/($locale)._index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/url.pathname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Subfolders/);
+        });
       });
-      await runInit(options);
-      expect(renderInfo).toHaveBeenCalledTimes(1);
-      expect(renderInfo).toHaveBeenCalledWith(
-        expect.objectContaining({
-          body: expect.stringContaining(
-            "To connect this project to your Shopify store\u2019s inventory"
-          ),
-          headline: expect.stringContaining(
-            "Your project will display inventory from the Hydrogen Demo Store"
-          )
-        })
-      );
     });
-  });
-  it("does not display inventory information when using non-demo-store templates", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({
-        installDeps: false,
-        path: tmpDir,
-        template: "pizza-store"
+    describe("git", () => {
+      it("initializes a git repository and creates initial commits", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          renderTasksHook.mockImplementationOnce(async () => {
+            await writeFile(`${tmpDir}/package-lock.json`, "{}");
+          });
+          await runInit({
+            path: tmpDir,
+            git: true,
+            language: "js",
+            styling: "tailwind",
+            i18n: "domains",
+            routes: true,
+            installDeps: true
+          });
+          expect(isDirectory(`${tmpDir}/.git`)).resolves.toBeTruthy();
+          const { stdout: gitLog } = await execAsync(`git log --oneline`, {
+            cwd: tmpDir
+          });
+          expect(gitLog.split("\n")).toEqual(
+            expect.arrayContaining([
+              expect.stringContaining("Lockfile"),
+              expect.stringContaining("Generate routes for core functionality"),
+              expect.stringContaining("Setup Tailwind"),
+              expect.stringContaining("Scaffold Storefront")
+            ])
+          );
+        });
+      });
+    });
+    describe("project validity", () => {
+      it("typechecks the project", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          renderTasksHook.mockImplementationOnce(async () => {
+            await writeFile(`${tmpDir}/package-lock.json`, "{}");
+          });
+          await runInit({
+            path: tmpDir,
+            git: true,
+            language: "ts",
+            styling: "tailwind",
+            i18n: "subfolders",
+            routes: true,
+            installDeps: true
+          });
+          await rmdir(joinPath(tmpDir, "node_modules")).catch(() => {
+          });
+          await symlink(
+            fileURLToPath(
+              new URL("../../../../../node_modules", import.meta.url)
+            ),
+            joinPath(tmpDir, "node_modules")
+          );
+          await expect(
+            exec("npm", ["run", "typecheck"], {
+              cwd: tmpDir
+            })
+          ).resolves.not.toThrow();
+        });
       });
-      await runInit(options);
-      expect(renderInfo).toHaveBeenCalledTimes(0);
     });
   });
 });