@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/lib/environment-variables.test.js

@@ -0,0 +1,147 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { inTemporaryDirectory, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { getAllEnvironmentVariables } from './environment-variables.js';
+import { getStorefrontEnvVariables } from './graphql/admin/pull-variables.js';
+import { login } from './auth.js';
+
+vi.mock("./auth.js");
+vi.mock("./graphql/admin/pull-variables.js");
+describe("getAllEnvironmentVariables()", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  const SHOPIFY_CONFIG = {
+    shop: "my-shop",
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Hydrogen"
+    }
+  };
+  beforeEach(() => {
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: SHOPIFY_CONFIG
+    });
+    vi.mocked(getStorefrontEnvVariables).mockResolvedValue({
+      id: SHOPIFY_CONFIG.storefront.id,
+      environmentVariables: [
+        {
+          id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+          key: "PUBLIC_API_TOKEN",
+          value: "abc123",
+          isSecret: false
+        }
+      ]
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  it("calls pullRemoteEnvironmentVariables", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await getAllEnvironmentVariables({
+        envBranch: "main",
+        root: tmpDir
+      });
+      expect(getStorefrontEnvVariables).toHaveBeenCalledWith(
+        ADMIN_SESSION,
+        SHOPIFY_CONFIG.storefront.id,
+        "main"
+      );
+    });
+  });
+  it("does not call pullRemoteEnvironmentVariables when indicated", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await getAllEnvironmentVariables({
+        envBranch: "main",
+        root: tmpDir,
+        fetchRemote: false
+      });
+      expect(getStorefrontEnvVariables).not.toHaveBeenCalled();
+    });
+  });
+  it("renders a message about injection", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await getAllEnvironmentVariables({ root: tmpDir });
+      expect(outputMock.info()).toMatch(
+        /Environment variables injected into MiniOxygen:/
+      );
+    });
+  });
+  it("lists all of the variables being used", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await getAllEnvironmentVariables({ root: tmpDir });
+      expect(outputMock.info()).toMatch(/PUBLIC_API_TOKEN\s+from Oxygen/);
+    });
+  });
+  it("doest not fail on network errors", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      vi.mocked(getStorefrontEnvVariables).mockRejectedValue(
+        new Error("Network error")
+      );
+      const outputMock = mockAndCaptureOutput();
+      await getAllEnvironmentVariables({ root: tmpDir });
+      expect(outputMock.info()).not.toMatch(/PUBLIC_API_TOKEN\s+from Oxygen/);
+      expect(outputMock.warn()).toMatch(/failed to load/i);
+    });
+  });
+  describe("when one of the variables is a secret", () => {
+    beforeEach(() => {
+      vi.mocked(getStorefrontEnvVariables).mockResolvedValue({
+        id: SHOPIFY_CONFIG.storefront.id,
+        environmentVariables: [
+          {
+            id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+            key: "PUBLIC_API_TOKEN",
+            value: "",
+            isSecret: true
+          }
+        ]
+      });
+    });
+    it("uses special messaging to alert the user", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const outputMock = mockAndCaptureOutput();
+        await getAllEnvironmentVariables({ root: tmpDir });
+        expect(outputMock.info()).toMatch(
+          /PUBLIC_API_TOKEN\s+from Oxygen \(Marked as secret\)/
+        );
+      });
+    });
+  });
+  describe("when there are local variables", () => {
+    it("includes local variables in the list", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const filePath = joinPath(tmpDir, ".env");
+        await writeFile(filePath, "LOCAL_TOKEN=1");
+        const outputMock = mockAndCaptureOutput();
+        await getAllEnvironmentVariables({ root: tmpDir });
+        expect(outputMock.info()).toMatch(/LOCAL_TOKEN\s+from local \.env/);
+      });
+    });
+    describe("and they overwrite remote variables", () => {
+      it("uses special messaging to alert the user", async () => {
+        await inTemporaryDirectory(async (tmpDir) => {
+          const filePath = joinPath(tmpDir, ".env");
+          await writeFile(filePath, "PUBLIC_API_TOKEN=abc");
+          const outputMock = mockAndCaptureOutput();
+          await getAllEnvironmentVariables({ root: tmpDir });
+          expect(outputMock.info()).not.toMatch(
+            /PUBLIC_API_TOKEN\s+from Oxygen/
+          );
+          expect(outputMock.info()).toMatch(
+            /PUBLIC_API_TOKEN\s+from local \.env/
+          );
+        });
+      });
+    });
+  });
+});

package/dist/lib/file.js

@@ -0,0 +1,41 @@
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { readFile, writeFile, isDirectory, fileExists } from '@shopify/cli-kit/node/fs';
+import { readdir } from 'fs/promises';
+import { formatCode } from './format-code.js';
+
+async function replaceFileContent(filepath, formatConfig, replacer) {
+  let content = await replacer(await readFile(filepath));
+  if (typeof content !== "string")
+    return;
+  if (formatConfig) {
+    content = formatCode(content, formatConfig, filepath);
+  }
+  return writeFile(filepath, content);
+}
+const DEFAULT_EXTENSIONS = ["tsx", "ts", "jsx", "js", "mjs", "cjs"];
+async function findFileWithExtension(directory, fileBase, extensions = DEFAULT_EXTENSIONS) {
+  const dirFiles = await readdir(directory);
+  if (dirFiles.includes(fileBase)) {
+    const filepath = resolvePath(directory, fileBase);
+    if (!await isDirectory(filepath)) {
+      return { filepath };
+    }
+    for (const extension of ["ts", "js"]) {
+      const filepath2 = resolvePath(directory, `${fileBase}/index.${extension}`);
+      if (await fileExists(resolvePath(directory, filepath2))) {
+        return { filepath: filepath2, extension, astType: extension };
+      }
+    }
+  } else {
+    for (const extension of extensions) {
+      const filename = `${fileBase}.${extension}`;
+      if (dirFiles.includes(filename)) {
+        const astType = extension === "mjs" || extension === "cjs" ? "js" : extension;
+        return { filepath: resolvePath(directory, filename), extension, astType };
+      }
+    }
+  }
+  return {};
+}
+
+export { findFileWithExtension, replaceFileContent };

package/dist/lib/file.test.js

@@ -0,0 +1,69 @@
+import { temporaryDirectoryTask } from 'tempy';
+import { describe, it, expect } from 'vitest';
+import { replaceFileContent, findFileWithExtension } from './file.js';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { writeFile, readFile, mkdir } from '@shopify/cli-kit/node/fs';
+
+describe("File utils", () => {
+  describe("replaceFileContent", () => {
+    it("replaces the content of a file and formats it", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const filepath = resolvePath(tmpDir, "index.js");
+        await writeFile(
+          filepath,
+          'function foo() { console.log("foo"); return null}'
+        );
+        await replaceFileContent(filepath, {}, async (content) => {
+          return content.replaceAll("foo", "bar");
+        });
+        expect(await readFile(filepath)).toBe(
+          'function bar() {\n  console.log("bar");\n  return null;\n}\n'
+        );
+      });
+    });
+  });
+  describe("findFileWithExtension", () => {
+    it("ignores missing files", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        expect(findFileWithExtension(tmpDir, "nope")).resolves.toEqual({
+          filepath: void 0,
+          extension: void 0,
+          astType: void 0
+        });
+      });
+    });
+    it("finds the file with its corresponding extension and astType", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        await writeFile(resolvePath(tmpDir, "first.js"), "content");
+        await writeFile(resolvePath(tmpDir, "second.tsx"), "content");
+        await writeFile(resolvePath(tmpDir, "third.mjs"), "content");
+        await writeFile(resolvePath(tmpDir, "fourth"), "content");
+        await mkdir(resolvePath(tmpDir, "fifth"));
+        await writeFile(resolvePath(tmpDir, "fifth", "index.ts"), "content");
+        expect(findFileWithExtension(tmpDir, "first")).resolves.toEqual({
+          filepath: expect.stringMatching(/first\.js$/),
+          extension: "js",
+          astType: "js"
+        });
+        expect(findFileWithExtension(tmpDir, "second")).resolves.toEqual({
+          filepath: expect.stringMatching(/second\.tsx$/),
+          extension: "tsx",
+          astType: "tsx"
+        });
+        expect(findFileWithExtension(tmpDir, "third")).resolves.toEqual({
+          filepath: expect.stringMatching(/third\.mjs$/),
+          extension: "mjs",
+          astType: "js"
+        });
+        expect(findFileWithExtension(tmpDir, "fourth")).resolves.toEqual({
+          filepath: expect.stringMatching(/fourth$/)
+        });
+        expect(findFileWithExtension(tmpDir, "fifth")).resolves.toEqual({
+          filepath: expect.stringMatching(/fifth\/index\.ts$/),
+          extension: "ts",
+          astType: "ts"
+        });
+      });
+    });
+  });
+});

package/dist/lib/flags.js

@@ -3,6 +3,8 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
+import { SETUP_CSS_STRATEGIES } from './setups/css/index.js';
+import { I18N_CHOICES } from './setups/i18n/index.js';
 
 const commonFlags = {
   path: Flags.string({
@@ -25,7 +27,12 @@ const commonFlags = {
     env: "SHOPIFY_SHOP",
     parse: async (input) => normalizeStoreFqdn(input)
   }),
-  ["env-branch"]: Flags.string({
+  installDeps: Flags.boolean({
+    description: "Auto install dependencies using the active package manager",
+    env: "SHOPIFY_HYDROGEN_FLAG_INSTALL_DEPS",
+    allowNo: true
+  }),
+  envBranch: Flags.string({
     description: "Specify an environment's branch name when using remote environment variables.",
     env: "SHOPIFY_HYDROGEN_ENVIRONMENT_BRANCH",
     char: "e"
@@ -35,6 +42,30 @@ const commonFlags = {
     env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
     default: true,
     allowNo: true
+  }),
+  codegenConfigPath: Flags.string({
+    description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
+    required: false,
+    dependsOn: ["codegen-unstable"]
+  }),
+  styling: Flags.string({
+    description: `Sets the styling strategy to use. One of ${SETUP_CSS_STRATEGIES.map(
+      (item) => `\`${item}\``
+    ).join(", ")}.`,
+    choices: SETUP_CSS_STRATEGIES,
+    env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
+  }),
+  markets: Flags.string({
+    description: `Sets the URL structure to support multiple markets. One of ${I18N_CHOICES.map(
+      (item) => `\`${item}\``
+    ).join(", ")}.`,
+    choices: I18N_CHOICES,
+    env: "SHOPIFY_HYDROGEN_FLAG_I18N"
+  }),
+  shortcut: Flags.boolean({
+    description: "Create a shortcut to the Shopify Hydrogen CLI.",
+    env: "SHOPIFY_HYDROGEN_FLAG_SHORTCUT",
+    allowNo: true
   })
 };
 function flagsToCamelObject(obj) {
@@ -74,5 +105,11 @@ function deprecated(name) {
     hidden: true
   });
 }
+function overrideFlag(flag, extra) {
+  return {
+    ...flag,
+    ...extra
+  };
+}
 
-export { commonFlags, deprecated, flagsToCamelObject, parseProcessFlags };
+export { commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };

package/dist/lib/format-code.js

@@ -0,0 +1,26 @@
+import prettier from 'prettier';
+import { extname } from '@shopify/cli-kit/node/path';
+
+const DEFAULT_PRETTIER_CONFIG = {
+  arrowParens: "always",
+  singleQuote: true,
+  bracketSpacing: false,
+  trailingComma: "all"
+};
+async function getCodeFormatOptions(filePath = process.cwd()) {
+  try {
+    return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
+  } catch {
+    return DEFAULT_PRETTIER_CONFIG;
+  }
+}
+function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
+  const ext = extname(filePath);
+  const formattedContent = prettier.format(content, {
+    parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
+    ...config
+  });
+  return formattedContent;
+}
+
+export { formatCode, getCodeFormatOptions };

package/dist/lib/gid.js

@@ -0,0 +1,12 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+
+const GID_REGEXP = /gid:\/\/shopify\/\w*\/(\d+)/;
+function parseGid(gid) {
+  const matches = GID_REGEXP.exec(gid);
+  if (matches && matches[1] !== void 0) {
+    return matches[1];
+  }
+  throw new AbortError(`Invalid Global ID: ${gid}`);
+}
+
+export { parseGid };

package/dist/lib/{graphql.test.js → gid.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { parseGid } from './graphql.js';
+import { parseGid } from './gid.js';
 
 describe("parseGid", () => {
   it("returns an ID", () => {

package/dist/lib/graphql/admin/client.js

@@ -0,0 +1,27 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { graphqlRequest } from '@shopify/cli-kit/node/api/graphql';
+
+async function adminRequest(query, session, variables) {
+  const api = "Admin";
+  const url = `https://${session.storeFqdn}/admin/api/unstable/graphql.json`;
+  try {
+    return await graphqlRequest({
+      query,
+      api,
+      url,
+      token: session.token,
+      variables
+    });
+  } catch (error) {
+    const errors = error.errors;
+    if (errors?.some?.((error2) => error2.message.includes("app is not installed"))) {
+      throw new AbortError(
+        "Hydrogen sales channel isn't installed",
+        "Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen"
+      );
+    }
+    throw error;
+  }
+}
+
+export { adminRequest };

package/dist/lib/graphql/admin/client.test.js

@@ -0,0 +1,51 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { vi, describe, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { graphqlRequest } from '@shopify/cli-kit/node/api/graphql';
+
+vi.mock("@shopify/cli-kit/node/api/graphql");
+describe("adminRequest", () => {
+  it("sends a query to the Admin API and returns the successful response", async () => {
+    const fakeResponse = {
+      test: "test"
+    };
+    vi.mocked(graphqlRequest).mockResolvedValue(fakeResponse);
+    const response = await adminRequest("", {
+      token: "",
+      storeFqdn: ""
+    });
+    expect(response).toContain(fakeResponse);
+  });
+  describe("error response", () => {
+    it("sends a query to the Admin API and returns an unknown error response", async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: "test error"
+          }
+        ]
+      };
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+      const response = adminRequest("", {
+        token: "",
+        storeFqdn: ""
+      });
+      await expect(response).rejects.toContain(fakeGraphqlError);
+    });
+    it("sends a query to the Admin API and returns an error where app isn't installed", async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: "app is not installed"
+          }
+        ]
+      };
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+      const response = adminRequest("", {
+        token: "",
+        storeFqdn: ""
+      });
+      await expect(response).rejects.toThrowError(AbortError);
+    });
+  });
+});

package/dist/lib/graphql/admin/create-storefront.js

@@ -1,5 +1,5 @@
-import { adminRequest } from '../../graphql.js';
-import { getAdminSession } from '../../admin-session.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { adminRequest } from './client.js';
 
 const CreateStorefrontMutation = `#graphql
   mutation CreateStorefront($title: String!) {
@@ -18,21 +18,19 @@ const CreateStorefrontMutation = `#graphql
     }
   }
 `;
-async function createStorefront(shop, title) {
-  const adminSession = await getAdminSession(shop);
-  const { hydrogenStorefrontCreate } = await adminRequest(
+async function createStorefront(adminSession, title) {
+  const {
+    hydrogenStorefrontCreate: { hydrogenStorefront, userErrors, jobId }
+  } = await adminRequest(
     CreateStorefrontMutation,
     adminSession,
-    {
-      title
-    }
+    { title }
   );
-  return {
-    adminSession,
-    storefront: hydrogenStorefrontCreate.hydrogenStorefront,
-    userErrors: hydrogenStorefrontCreate.userErrors,
-    jobId: hydrogenStorefrontCreate.jobId
-  };
+  if (!hydrogenStorefront || !jobId || userErrors.length > 0) {
+    const errorMessages = userErrors.map(({ message }) => message).join(", ");
+    throw new AbortError("Could not create storefront. " + errorMessages);
+  }
+  return { jobId, storefront: hydrogenStorefront };
 }
 
-export { CreateStorefrontMutation, createStorefront };
+export { createStorefront };

package/dist/lib/graphql/admin/create-storefront.test.js

@@ -0,0 +1,64 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { createStorefront } from './create-storefront.js';
+
+vi.mock("./client.js");
+describe("createStorefront", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("sends a mutation to create a new storefront and returns it", async () => {
+    vi.mocked(adminRequest).mockImplementation(
+      (_, __, variables) => Promise.resolve({
+        hydrogenStorefrontCreate: {
+          hydrogenStorefront: {
+            id: "gid://shopify/HydrogenStorefront/123",
+            title: variables?.title,
+            productionUrl: "https://..."
+          },
+          userErrors: [],
+          jobId: "123"
+        }
+      })
+    );
+    const TITLE = "title";
+    await expect(createStorefront(ADMIN_SESSION, TITLE)).resolves.toStrictEqual(
+      {
+        jobId: "123",
+        storefront: {
+          id: "gid://shopify/HydrogenStorefront/123",
+          title: TITLE,
+          productionUrl: "https://..."
+        }
+      }
+    );
+    expect(adminRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+mutation.+hydrogenStorefrontCreate\(/s),
+      ADMIN_SESSION,
+      { title: TITLE }
+    );
+  });
+  it("throws formatted GraphQL errors", async () => {
+    const error = "Title is invalid";
+    vi.mocked(adminRequest).mockResolvedValue({
+      hydrogenStorefrontCreate: {
+        jobId: void 0,
+        hydrogenStorefront: void 0,
+        userErrors: [
+          {
+            code: "INVALID",
+            field: ["title"],
+            message: error
+          }
+        ]
+      }
+    });
+    await expect(createStorefront(ADMIN_SESSION, "title")).rejects.toThrow(
+      error
+    );
+  });
+});

package/dist/lib/graphql/admin/fetch-job.js

@@ -1,5 +1,4 @@
-import { adminRequest } from '../../graphql.js';
-import { getAdminSession } from '../../admin-session.js';
+import { adminRequest } from './client.js';
 
 const FetchJobQuery = `#graphql
   query FetchJob($id: ID!) {
@@ -13,26 +12,18 @@ const FetchJobQuery = `#graphql
     }
   }
 `;
-async function fetchJob(shop, jobId) {
-  const adminSession = await getAdminSession(shop);
+async function fetchJob(adminSession, jobId) {
   const { hydrogenStorefrontJob } = await adminRequest(
     FetchJobQuery,
     adminSession,
-    {
-      id: jobId
-    }
+    { id: jobId }
   );
-  return {
-    adminSession,
-    id: hydrogenStorefrontJob.id,
-    done: hydrogenStorefrontJob.done,
-    errors: hydrogenStorefrontJob.errors
-  };
+  return hydrogenStorefrontJob;
 }
-function waitForJob(shop, jobId) {
+function waitForJob(adminSession, jobId) {
   return new Promise((resolve, reject) => {
     const interval = setInterval(async () => {
-      const job = await fetchJob(shop, jobId);
+      const job = await fetchJob(adminSession, jobId);
       if (job.errors.length > 0) {
         clearInterval(interval);
         return reject();

package/dist/lib/graphql/admin/link-storefront.js

@@ -1,5 +1,5 @@
-import { adminRequest, parseGid } from '../../graphql.js';
-import { getAdminSession } from '../../admin-session.js';
+import { adminRequest } from './client.js';
+import { parseGid } from '../../gid.js';
 
 const LinkStorefrontQuery = `#graphql
   query LinkStorefront {
@@ -10,19 +10,15 @@ const LinkStorefrontQuery = `#graphql
     }
   }
 `;
-async function getStorefronts(shop) {
-  const adminSession = await getAdminSession(shop);
+async function getStorefronts(adminSession) {
   const { hydrogenStorefronts } = await adminRequest(
     LinkStorefrontQuery,
     adminSession
   );
-  return {
-    adminSession,
-    storefronts: hydrogenStorefronts.map((storefront) => ({
-      ...storefront,
-      parsedId: parseGid(storefront.id)
-    }))
-  };
+  return hydrogenStorefronts.map((storefront) => ({
+    ...storefront,
+    parsedId: parseGid(storefront.id)
+  }));
 }
 
 export { LinkStorefrontQuery, getStorefronts };

package/dist/lib/graphql/admin/link-storefront.test.js

@@ -0,0 +1,38 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { getStorefronts } from './link-storefront.js';
+
+vi.mock("./client.js");
+describe("getStorefrontsWithDeployment", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("calls the graphql client and returns Hydrogen storefronts", async () => {
+    const mockedResponse = {
+      hydrogenStorefronts: [
+        {
+          id: "gid://shopify/HydrogenStorefront/123",
+          title: "title",
+          productionUrl: "https://..."
+        }
+      ]
+    };
+    vi.mocked(adminRequest).mockResolvedValue(
+      mockedResponse
+    );
+    await expect(getStorefronts(ADMIN_SESSION)).resolves.toStrictEqual([
+      {
+        ...mockedResponse.hydrogenStorefronts[0],
+        parsedId: "123"
+      }
+    ]);
+    expect(adminRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+query.+hydrogenStorefronts\s*{/s),
+      ADMIN_SESSION
+    );
+  });
+});