@kodelyth/line 2026.5.39 → 2026.5.42

package/src/reply-payload-transform.ts

@@ -0,0 +1,317 @@
+import type { ReplyPayload } from "klaw/plugin-sdk/reply-runtime";
+import { normalizeLowercaseStringOrEmpty } from "klaw/plugin-sdk/string-coerce-runtime";
+import {
+  createAgendaCard,
+  createAppleTvRemoteCard,
+  createDeviceControlCard,
+  createEventCard,
+  createMediaPlayerCard,
+} from "./flex-templates.js";
+import type { LineChannelData } from "./types.js";
+
+/**
+ * Parse LINE-specific directives from text and extract them into ReplyPayload fields.
+ *
+ * Supported directives:
+ * - [[quick_replies: option1, option2, option3]]
+ * - [[location: title | address | latitude | longitude]]
+ * - [[confirm: question | yes_label | no_label]]
+ * - [[buttons: title | text | btn1:data1, btn2:data2]]
+ * - [[media_player: title | artist | source | imageUrl | playing/paused]]
+ * - [[event: title | date | time | location | description]]
+ * - [[agenda: title | event1_title:event1_time, event2_title:event2_time, ...]]
+ * - [[device: name | type | status | ctrl1:data1, ctrl2:data2]]
+ * - [[appletv_remote: name | status]]
+ */
+export function parseLineDirectives(payload: ReplyPayload): ReplyPayload {
+  let text = payload.text;
+  if (!text) {
+    return payload;
+  }
+
+  const result: ReplyPayload = { ...payload };
+  const lineData: LineChannelData = {
+    ...(result.channelData?.line as LineChannelData | undefined),
+  };
+  const toSlug = (value: string): string =>
+    normalizeLowercaseStringOrEmpty(value)
+      .replace(/[^a-z0-9]+/g, "_")
+      .replace(/^_+|_+$/g, "") || "device";
+  const lineActionData = (action: string, extras?: Record<string, string>): string => {
+    const base = [`line.action=${encodeURIComponent(action)}`];
+    if (extras) {
+      for (const [key, value] of Object.entries(extras)) {
+        base.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+      }
+    }
+    return base.join("&");
+  };
+
+  const quickRepliesMatch = text.match(/\[\[quick_replies:\s*([^\]]+)\]\]/i);
+  if (quickRepliesMatch) {
+    const options = quickRepliesMatch[1]
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (options.length > 0) {
+      lineData.quickReplies = [...(lineData.quickReplies || []), ...options];
+    }
+    text = text.replace(quickRepliesMatch[0], "").trim();
+  }
+
+  const locationMatch = text.match(/\[\[location:\s*([^\]]+)\]\]/i);
+  if (locationMatch && !lineData.location) {
+    const parts = locationMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 4) {
+      const [title, address, latStr, lonStr] = parts;
+      const latitude = Number.parseFloat(latStr);
+      const longitude = Number.parseFloat(lonStr);
+      if (!Number.isNaN(latitude) && !Number.isNaN(longitude)) {
+        lineData.location = {
+          title: title || "Location",
+          address: address || "",
+          latitude,
+          longitude,
+        };
+      }
+    }
+    text = text.replace(locationMatch[0], "").trim();
+  }
+
+  const confirmMatch = text.match(/\[\[confirm:\s*([^\]]+)\]\]/i);
+  if (confirmMatch && !lineData.templateMessage) {
+    const parts = confirmMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 3) {
+      const [question, yesPart, noPart] = parts;
+      const [yesLabel, yesData] = yesPart.includes(":")
+        ? yesPart.split(":").map((s) => s.trim())
+        : [yesPart, normalizeLowercaseStringOrEmpty(yesPart)];
+      const [noLabel, noData] = noPart.includes(":")
+        ? noPart.split(":").map((s) => s.trim())
+        : [noPart, normalizeLowercaseStringOrEmpty(noPart)];
+
+      lineData.templateMessage = {
+        type: "confirm",
+        text: question,
+        confirmLabel: yesLabel,
+        confirmData: yesData,
+        cancelLabel: noLabel,
+        cancelData: noData,
+        altText: question,
+      };
+    }
+    text = text.replace(confirmMatch[0], "").trim();
+  }
+
+  const buttonsMatch = text.match(/\[\[buttons:\s*([^\]]+)\]\]/i);
+  if (buttonsMatch && !lineData.templateMessage) {
+    const parts = buttonsMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 3) {
+      const [title, bodyText, actionsStr] = parts;
+
+      const actions = actionsStr.split(",").map((actionStr) => {
+        const trimmed = actionStr.trim();
+        const colonIndex = (() => {
+          const index = trimmed.indexOf(":");
+          if (index === -1) {
+            return -1;
+          }
+          const lower = normalizeLowercaseStringOrEmpty(trimmed);
+          if (lower.startsWith("http://") || lower.startsWith("https://")) {
+            return -1;
+          }
+          return index;
+        })();
+
+        let label: string;
+        let data: string;
+
+        if (colonIndex === -1) {
+          label = trimmed;
+          data = trimmed;
+        } else {
+          label = trimmed.slice(0, colonIndex).trim();
+          data = trimmed.slice(colonIndex + 1).trim();
+        }
+
+        if (data.startsWith("http://") || data.startsWith("https://")) {
+          return { type: "uri" as const, label, uri: data };
+        }
+        if (data.includes("=")) {
+          return { type: "postback" as const, label, data };
+        }
+        return { type: "message" as const, label, data: data || label };
+      });
+
+      if (actions.length > 0) {
+        lineData.templateMessage = {
+          type: "buttons",
+          title,
+          text: bodyText,
+          actions: actions.slice(0, 4),
+          altText: `${title}: ${bodyText}`,
+        };
+      }
+    }
+    text = text.replace(buttonsMatch[0], "").trim();
+  }
+
+  const mediaPlayerMatch = text.match(/\[\[media_player:\s*([^\]]+)\]\]/i);
+  if (mediaPlayerMatch && !lineData.flexMessage) {
+    const parts = mediaPlayerMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 1) {
+      const [title, artist, source, imageUrl, statusStr] = parts;
+      const isPlaying = normalizeLowercaseStringOrEmpty(statusStr) === "playing";
+      const validImageUrl = imageUrl?.startsWith("https://") ? imageUrl : undefined;
+      const deviceKey = toSlug(source || title || "media");
+      const card = createMediaPlayerCard({
+        title: title || "Unknown Track",
+        subtitle: artist || undefined,
+        source: source || undefined,
+        imageUrl: validImageUrl,
+        isPlaying: statusStr ? isPlaying : undefined,
+        controls: {
+          previous: { data: lineActionData("previous", { "line.device": deviceKey }) },
+          play: { data: lineActionData("play", { "line.device": deviceKey }) },
+          pause: { data: lineActionData("pause", { "line.device": deviceKey }) },
+          next: { data: lineActionData("next", { "line.device": deviceKey }) },
+        },
+      });
+
+      lineData.flexMessage = {
+        altText: `🎵 ${title}${artist ? ` - ${artist}` : ""}`,
+        contents: card,
+      };
+    }
+    text = text.replace(mediaPlayerMatch[0], "").trim();
+  }
+
+  const eventMatch = text.match(/\[\[event:\s*([^\]]+)\]\]/i);
+  if (eventMatch && !lineData.flexMessage) {
+    const parts = eventMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 2) {
+      const [title, date, time, location, description] = parts;
+
+      const card = createEventCard({
+        title: title || "Event",
+        date: date || "TBD",
+        time: time || undefined,
+        location: location || undefined,
+        description: description || undefined,
+      });
+
+      lineData.flexMessage = {
+        altText: `📅 ${title} - ${date}${time ? ` ${time}` : ""}`,
+        contents: card,
+      };
+    }
+    text = text.replace(eventMatch[0], "").trim();
+  }
+
+  const appleTvMatch = text.match(/\[\[appletv_remote:\s*([^\]]+)\]\]/i);
+  if (appleTvMatch && !lineData.flexMessage) {
+    const parts = appleTvMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 1) {
+      const [deviceName, status] = parts;
+      const deviceKey = toSlug(deviceName || "apple_tv");
+
+      const card = createAppleTvRemoteCard({
+        deviceName: deviceName || "Apple TV",
+        status: status || undefined,
+        actionData: {
+          up: lineActionData("up", { "line.device": deviceKey }),
+          down: lineActionData("down", { "line.device": deviceKey }),
+          left: lineActionData("left", { "line.device": deviceKey }),
+          right: lineActionData("right", { "line.device": deviceKey }),
+          select: lineActionData("select", { "line.device": deviceKey }),
+          menu: lineActionData("menu", { "line.device": deviceKey }),
+          home: lineActionData("home", { "line.device": deviceKey }),
+          play: lineActionData("play", { "line.device": deviceKey }),
+          pause: lineActionData("pause", { "line.device": deviceKey }),
+          volumeUp: lineActionData("volume_up", { "line.device": deviceKey }),
+          volumeDown: lineActionData("volume_down", { "line.device": deviceKey }),
+          mute: lineActionData("mute", { "line.device": deviceKey }),
+        },
+      });
+
+      lineData.flexMessage = {
+        altText: `📺 ${deviceName || "Apple TV"} Remote`,
+        contents: card,
+      };
+    }
+    text = text.replace(appleTvMatch[0], "").trim();
+  }
+
+  const agendaMatch = text.match(/\[\[agenda:\s*([^\]]+)\]\]/i);
+  if (agendaMatch && !lineData.flexMessage) {
+    const parts = agendaMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 2) {
+      const [title, eventsStr] = parts;
+      const events = eventsStr.split(",").map((eventStr) => {
+        const trimmed = eventStr.trim();
+        const colonIdx = trimmed.lastIndexOf(":");
+        if (colonIdx > 0) {
+          return {
+            title: trimmed.slice(0, colonIdx).trim(),
+            time: trimmed.slice(colonIdx + 1).trim(),
+          };
+        }
+        return { title: trimmed };
+      });
+
+      const card = createAgendaCard({
+        title: title || "Agenda",
+        events,
+      });
+
+      lineData.flexMessage = {
+        altText: `📋 ${title} (${events.length} events)`,
+        contents: card,
+      };
+    }
+    text = text.replace(agendaMatch[0], "").trim();
+  }
+
+  const deviceMatch = text.match(/\[\[device:\s*([^\]]+)\]\]/i);
+  if (deviceMatch && !lineData.flexMessage) {
+    const parts = deviceMatch[1].split("|").map((s) => s.trim());
+    if (parts.length >= 1) {
+      const [deviceName, deviceType, status, controlsStr] = parts;
+      const deviceKey = toSlug(deviceName || "device");
+      const controls = controlsStr
+        ? controlsStr.split(",").map((ctrlStr) => {
+            const [label, data] = ctrlStr.split(":").map((s) => s.trim());
+            const action = data || normalizeLowercaseStringOrEmpty(label).replace(/\s+/g, "_");
+            return { label, data: lineActionData(action, { "line.device": deviceKey }) };
+          })
+        : [];
+
+      const card = createDeviceControlCard({
+        deviceName: deviceName || "Device",
+        deviceType: deviceType || undefined,
+        status: status || undefined,
+        controls,
+      });
+
+      lineData.flexMessage = {
+        altText: `📱 ${deviceName}${status ? `: ${status}` : ""}`,
+        contents: card,
+      };
+    }
+    text = text.replace(deviceMatch[0], "").trim();
+  }
+
+  text = text.replace(/\n{3,}/g, "\n\n").trim();
+
+  result.text = text || undefined;
+  if (Object.keys(lineData).length > 0) {
+    result.channelData = { ...result.channelData, line: lineData };
+  }
+  return result;
+}
+
+export function hasLineDirectives(text: string): boolean {
+  return /\[\[(quick_replies|location|confirm|buttons|media_player|event|agenda|device|appletv_remote):/i.test(
+    text,
+  );
+}

package/src/rich-menu.test.ts

@@ -0,0 +1,315 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import type { KlawConfig } from "klaw/plugin-sdk/config-contracts";
+import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  createDefaultMenuConfig,
+  createGridLayout,
+  datetimePickerAction,
+  messageAction,
+  postbackAction,
+  uploadRichMenuImage,
+  uriAction,
+} from "./rich-menu.js";
+
+const { setRichMenuImageMock, MessagingApiBlobClientMock } = vi.hoisted(() => {
+  const setRichMenuImageMock = vi.fn();
+  const MessagingApiBlobClientMock = vi.fn(function () {
+    return { setRichMenuImage: setRichMenuImageMock };
+  });
+  return { setRichMenuImageMock, MessagingApiBlobClientMock };
+});
+
+vi.mock("@line/bot-sdk", () => ({
+  messagingApi: { MessagingApiBlobClient: MessagingApiBlobClientMock },
+}));
+
+afterAll(() => {
+  vi.doUnmock("@line/bot-sdk");
+  vi.resetModules();
+});
+
+describe("messageAction", () => {
+  it("creates message actions with explicit or default text", () => {
+    const cases = [
+      { name: "explicit text", label: "Help", text: "/help", expectedText: "/help" },
+      { name: "defaults to label", label: "Click", text: undefined, expectedText: "Click" },
+    ] as const;
+    for (const testCase of cases) {
+      const action = testCase.text
+        ? messageAction(testCase.label, testCase.text)
+        : messageAction(testCase.label);
+      expect(action.type, testCase.name).toBe("message");
+      expect(action.label, testCase.name).toBe(testCase.label);
+      expect((action as { text: string }).text, testCase.name).toBe(testCase.expectedText);
+    }
+  });
+});
+
+describe("uriAction", () => {
+  it("creates a URI action", () => {
+    const action = uriAction("Open", "https://example.com");
+
+    expect(action.type).toBe("uri");
+    expect(action.label).toBe("Open");
+    expect((action as { uri: string }).uri).toBe("https://example.com");
+  });
+});
+
+describe("action label truncation", () => {
+  it.each([
+    {
+      createAction: () => messageAction("This is a very long label text"),
+      expectedLabel: "This is a very long ",
+    },
+    {
+      createAction: () => uriAction("Click here to visit our website", "https://example.com"),
+      expectedLabel: "Click here to visit ",
+    },
+  ])("truncates labels to 20 characters", ({ createAction, expectedLabel }) => {
+    const action = createAction();
+    expect(action.label).toBe(expectedLabel);
+    expect((action.label ?? "").length).toBe(20);
+  });
+});
+
+describe("postbackAction", () => {
+  it("creates a postback action", () => {
+    const action = postbackAction("Select", "action=select&item=1", "Selected item 1");
+
+    expect(action.type).toBe("postback");
+    expect(action.label).toBe("Select");
+    expect((action as { data: string }).data).toBe("action=select&item=1");
+    expect((action as { displayText: string }).displayText).toBe("Selected item 1");
+  });
+
+  it("applies postback payload truncation and displayText behavior", () => {
+    const truncatedData = postbackAction("Test", "x".repeat(400));
+    expect((truncatedData as { data: string }).data.length).toBe(300);
+
+    const truncatedDisplay = postbackAction("Test", "data", "y".repeat(400));
+    expect((truncatedDisplay as { displayText: string }).displayText?.length).toBe(300);
+
+    const noDisplayText = postbackAction("Test", "data");
+    expect((noDisplayText as { displayText?: string }).displayText).toBeUndefined();
+  });
+});
+
+describe("datetimePickerAction", () => {
+  it("creates picker actions for all supported modes", () => {
+    const cases = [
+      { label: "Pick date", data: "date_picked", mode: "date" as const },
+      { label: "Pick time", data: "time_picked", mode: "time" as const },
+      { label: "Pick datetime", data: "datetime_picked", mode: "datetime" as const },
+    ];
+    for (const testCase of cases) {
+      const action = datetimePickerAction(testCase.label, testCase.data, testCase.mode);
+      expect(action.type).toBe("datetimepicker");
+      expect(action.label).toBe(testCase.label);
+      expect((action as { mode: string }).mode).toBe(testCase.mode);
+      expect((action as { data: string }).data).toBe(testCase.data);
+    }
+  });
+
+  it("includes initial/min/max when provided", () => {
+    const action = datetimePickerAction("Pick", "data", "date", {
+      initial: "2024-06-15",
+      min: "2024-01-01",
+      max: "2024-12-31",
+    });
+
+    expect((action as { initial: string }).initial).toBe("2024-06-15");
+    expect((action as { min: string }).min).toBe("2024-01-01");
+    expect((action as { max: string }).max).toBe("2024-12-31");
+  });
+});
+
+describe("createGridLayout", () => {
+  function createSixSimpleActions() {
+    return [
+      messageAction("A1"),
+      messageAction("A2"),
+      messageAction("A3"),
+      messageAction("A4"),
+      messageAction("A5"),
+      messageAction("A6"),
+    ] as [
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+    ];
+  }
+
+  it("computes expected 2x3 layout for supported menu heights", () => {
+    const actions = createSixSimpleActions();
+    const cases = [
+      { height: 1686, firstRowY: 0, secondRowY: 843, rowHeight: 843 },
+      { height: 843, firstRowY: 0, secondRowY: 421, rowHeight: 421 },
+    ] as const;
+    for (const testCase of cases) {
+      const areas = createGridLayout(testCase.height, actions);
+      expect(areas.length).toBe(6);
+      expect(areas[0]?.bounds.y).toBe(testCase.firstRowY);
+      expect(areas[0]?.bounds.height).toBe(testCase.rowHeight);
+      expect(areas[3]?.bounds.y).toBe(testCase.secondRowY);
+      expect(areas[0]?.bounds.x).toBe(0);
+      expect(areas[1]?.bounds.x).toBe(833);
+      expect(areas[2]?.bounds.x).toBe(1666);
+    }
+  });
+
+  it("assigns correct actions to areas", () => {
+    const actions = [
+      messageAction("Help", "/help"),
+      messageAction("Status", "/status"),
+      messageAction("Settings", "/settings"),
+      messageAction("About", "/about"),
+      messageAction("Feedback", "/feedback"),
+      messageAction("Contact", "/contact"),
+    ] as [
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+      ReturnType<typeof messageAction>,
+    ];
+
+    const areas = createGridLayout(843, actions);
+
+    expect((areas[0].action as { text: string }).text).toBe("/help");
+    expect((areas[1].action as { text: string }).text).toBe("/status");
+    expect((areas[2].action as { text: string }).text).toBe("/settings");
+    expect((areas[3].action as { text: string }).text).toBe("/about");
+    expect((areas[4].action as { text: string }).text).toBe("/feedback");
+    expect((areas[5].action as { text: string }).text).toBe("/contact");
+  });
+});
+
+describe("createDefaultMenuConfig", () => {
+  it("creates a valid default menu configuration", () => {
+    const config = createDefaultMenuConfig();
+
+    expect(config.size.width).toBe(2500);
+    expect(config.size.height).toBe(843);
+    expect(config.selected).toBe(false);
+    expect(config.name).toBe("Default Menu");
+    expect(config.chatBarText).toBe("Menu");
+    expect(config.areas.length).toBe(6);
+  });
+
+  it("has valid area bounds", () => {
+    const config = createDefaultMenuConfig();
+
+    for (const area of config.areas) {
+      expect(area.bounds.x).toBeGreaterThanOrEqual(0);
+      expect(area.bounds.y).toBeGreaterThanOrEqual(0);
+      expect(area.bounds.width).toBeGreaterThan(0);
+      expect(area.bounds.height).toBeGreaterThan(0);
+      expect(area.bounds.x + area.bounds.width).toBeLessThanOrEqual(2500);
+      expect(area.bounds.y + area.bounds.height).toBeLessThanOrEqual(843);
+    }
+  });
+
+  it("uses message actions with expected default commands", () => {
+    const config = createDefaultMenuConfig();
+
+    for (const area of config.areas) {
+      expect(area.action.type).toBe("message");
+    }
+    const commands = config.areas.map((a) => (a.action as { text: string }).text);
+    expect(commands).toContain("/help");
+    expect(commands).toContain("/status");
+    expect(commands).toContain("/settings");
+  });
+});
+
+const richMenuUploadCfg: KlawConfig = {
+  channels: {
+    line: {
+      channelAccessToken: "line-token",
+      channelSecret: "line-secret",
+    },
+  },
+};
+
+describe("uploadRichMenuImage", () => {
+  let tempRoot: string;
+
+  beforeEach(async () => {
+    tempRoot = await fs.mkdtemp(path.join(os.tmpdir(), "klaw-line-rich-menu-"));
+    setRichMenuImageMock.mockReset();
+    MessagingApiBlobClientMock.mockClear();
+  });
+
+  afterEach(async () => {
+    await fs.rm(tempRoot, { recursive: true, force: true });
+  });
+
+  it("loads local image paths through approved media localRoots", async () => {
+    const workspaceDir = path.join(tempRoot, "workspace");
+    await fs.mkdir(workspaceDir, { recursive: true });
+    const imagePath = path.join(workspaceDir, "menu.png");
+    const imageBytes = Buffer.from([
+      0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x00,
+    ]);
+    await fs.writeFile(imagePath, imageBytes);
+
+    await uploadRichMenuImage("rich-menu-1", imagePath, {
+      cfg: richMenuUploadCfg,
+      mediaLocalRoots: [workspaceDir],
+    });
+
+    expect(MessagingApiBlobClientMock).toHaveBeenCalledWith({ channelAccessToken: "line-token" });
+    expect(setRichMenuImageMock).toHaveBeenCalledOnce();
+    const [richMenuId, blob] = setRichMenuImageMock.mock.calls[0] ?? [];
+    expect(richMenuId).toBe("rich-menu-1");
+    expect(blob).toBeInstanceOf(Blob);
+    expect((blob as Blob).type).toBe("image/png");
+    await expect((blob as Blob).arrayBuffer()).resolves.toEqual(
+      imageBytes.buffer.slice(imageBytes.byteOffset, imageBytes.byteOffset + imageBytes.byteLength),
+    );
+  });
+
+  it("rejects local image paths outside approved media localRoots before uploading", async () => {
+    const workspaceDir = path.join(tempRoot, "workspace");
+    const outsideDir = path.join(tempRoot, "outside");
+    await fs.mkdir(workspaceDir, { recursive: true });
+    await fs.mkdir(outsideDir, { recursive: true });
+    const outsideImagePath = path.join(outsideDir, "menu.jpg");
+    await fs.writeFile(outsideImagePath, Buffer.from([0xff, 0xd8, 0xff, 0xd9]));
+
+    await expect(
+      uploadRichMenuImage("rich-menu-1", outsideImagePath, {
+        cfg: richMenuUploadCfg,
+        mediaLocalRoots: [workspaceDir],
+      }),
+    ).rejects.toThrow(/Local media path is not under an allowed directory/i);
+
+    expect(setRichMenuImageMock).not.toHaveBeenCalled();
+  });
+
+  it("preserves extension-based content-type fallback for approved local paths", async () => {
+    const workspaceDir = path.join(tempRoot, "workspace");
+    await fs.mkdir(workspaceDir, { recursive: true });
+    const imagePath = path.join(workspaceDir, "menu.jpg");
+    const imageBytes = Buffer.from("placeholder image bytes");
+    await fs.writeFile(imagePath, imageBytes);
+
+    await uploadRichMenuImage("rich-menu-2", imagePath, {
+      cfg: richMenuUploadCfg,
+      mediaLocalRoots: [workspaceDir],
+    });
+
+    expect(setRichMenuImageMock).toHaveBeenCalledOnce();
+    const blob = setRichMenuImageMock.mock.calls[0]?.[1] as Blob;
+    expect(blob.type).toBe("image/jpeg");
+    await expect(blob.arrayBuffer()).resolves.toEqual(
+      imageBytes.buffer.slice(imageBytes.byteOffset, imageBytes.byteOffset + imageBytes.byteLength),
+    );
+  });
+});