@solhun/feedback-kit-core 0.1.0

package/src/widget/modal.test.ts

@@ -0,0 +1,472 @@
+import { describe, expect, it } from "vitest";
+
+import type { FeedbackReport, FeedbackScreenshot } from "../types.js";
+import type { QueueStatus, SubmitOutcome } from "../queue.js";
+import type { ReportParts } from "../report.js";
+import { WidgetController } from "./controller.js";
+import {
+  COMMENT_REQUIRED_MESSAGE,
+  COMMENT_TOO_LONG_MESSAGE,
+  MODAL_ACTION_SEND,
+  MODAL_FIELD_COMMENT,
+  MODAL_FIELD_PRIORITY,
+  ReportModalController,
+} from "./modal.js";
+import {
+  SCREENSHOT_FAILED_MESSAGE,
+  SCREENSHOT_MAX_BASE64_BYTES,
+  screenshotBytes,
+} from "./screenshot.js";
+
+const SHOT: FeedbackScreenshot = {
+  base64: "c2NyZWVuc2hvdA==",
+  contentType: "image/png",
+};
+
+class TestQueue {
+  readonly submitted: FeedbackReport[] = [];
+  private readonly listeners = new Set<(status: QueueStatus) => void>();
+  private readonly outcomes = new Map<
+    string,
+    Pick<SubmitOutcome, "delivered" | "id">
+  >();
+  outcome: SubmitOutcome = { delivered: true, id: "server-1", queued: false };
+  pending = 0;
+
+  async submit(report: FeedbackReport): Promise<SubmitOutcome> {
+    this.submitted.push(report);
+    if (this.outcome.queued) {
+      this.pending += 1;
+      this.emit();
+    } else {
+      this.outcomes.set(report.clientSubmissionId, this.outcome);
+    }
+    return this.outcome;
+  }
+
+  async retryNow(): Promise<void> {
+    const current = this.submitted.at(-1);
+    if (current && this.pending > 0) {
+      this.outcomes.set(current.clientSubmissionId, { delivered: true, id: "retried" });
+    }
+    this.pending = 0;
+    this.emit();
+  }
+
+  async size(): Promise<number> {
+    return this.pending;
+  }
+
+  subscribe(listener: (status: QueueStatus) => void): () => void {
+    this.listeners.add(listener);
+    listener(this.status());
+    return () => this.listeners.delete(listener);
+  }
+
+  getOutcome(clientSubmissionId: string): Pick<SubmitOutcome, "delivered" | "id"> | null {
+    return this.outcomes.get(clientSubmissionId) ?? null;
+  }
+
+  settle(
+    clientSubmissionId: string,
+    outcome: Pick<SubmitOutcome, "delivered" | "id">,
+    remaining: number,
+  ): void {
+    this.outcomes.set(clientSubmissionId, outcome);
+    this.pending = remaining;
+    this.emit();
+  }
+
+  private status(): QueueStatus {
+    return {
+      state: this.pending > 0 ? "pending" : "idle",
+      pending: this.pending,
+      lastError: null,
+    };
+  }
+
+  private emit(): void {
+    const status = this.status();
+    for (const listener of this.listeners) listener(status);
+  }
+}
+
+function reportFactory() {
+  let sequence = 0;
+  return async (parts: ReportParts): Promise<FeedbackReport> => {
+    sequence += 1;
+    return {
+      clientSubmissionId: `submission-${sequence}`,
+      ...parts,
+      context: {
+        app: "modal-test",
+        screen: "/",
+        url: null,
+        sessionId: "session",
+        user: null,
+        source: { screenId: null, sourceFile: null },
+        platform: "native",
+        timezone: "Asia/Seoul",
+        clientTimestamp: "2026-08-07T00:00:00.000Z",
+        native: null,
+        web: null,
+        diagnostics: null,
+        extra: {},
+      },
+      createdAt: `2026-08-07T00:00:0${sequence}.000Z`,
+    };
+  };
+}
+
+function nativeWidget(options: {
+  queue?: TestQueue;
+  capture?: () => FeedbackScreenshot | null | Promise<FeedbackScreenshot | null>;
+  reencode?: (
+    shot: FeedbackScreenshot,
+    quality: number,
+  ) => FeedbackScreenshot | null | Promise<FeedbackScreenshot | null>;
+} = {}) {
+  const queue = options.queue ?? new TestQueue();
+  const widget = new WidgetController({
+    queue,
+    createReport: reportFactory(),
+    platform: "native",
+    capture: options.capture ?? (() => SHOT),
+    reencode: options.reencode,
+  });
+  return { queue, widget };
+}
+
+describe("DP-258 리포트 모달", () => {
+  it("TC1 캡처에 실패해도 제출을 막지 않는다", async () => {
+    const { queue, widget } = nativeWidget({ capture: async () => { throw new Error("capture"); } });
+    await widget.openReport();
+
+    expect(widget.getState().modal.screenshotMessage).toBe(SCREENSHOT_FAILED_MESSAGE);
+    widget.modal.setComment("스크린샷 없이 전송");
+    expect(widget.getState().modal.canSubmit).toBe(true);
+    await widget.submitReport();
+
+    expect(queue.submitted).toHaveLength(1);
+    expect(queue.submitted[0]?.screenshot).toBeNull();
+    widget.dispose();
+  });
+
+  it("TC2 핀은 한 화면에 하나만 유지된다", async () => {
+    const { widget } = nativeWidget();
+    await widget.openReport();
+    widget.openPinScreen();
+    widget.placePin({ x: 10, y: 20 }, { width: 100, height: 100 });
+    widget.placePin({ x: 70, y: 80 }, { width: 100, height: 100 });
+
+    expect(widget.pin.count).toBe(1);
+    expect(widget.getState().pinDraft).toEqual({ x: 0.7, y: 0.8 });
+    widget.dispose();
+  });
+
+  it("TC3 코멘트가 비어 있으면 보낼 수 없다", async () => {
+    const { queue, widget } = nativeWidget();
+    await widget.openReport();
+    widget.modal.setComment("   ");
+
+    expect(widget.getState().modal.canSubmit).toBe(false);
+    expect(widget.getState().modal.commentError).toBe(COMMENT_REQUIRED_MESSAGE);
+    expect(await widget.submitReport()).toBeNull();
+    expect(queue.submitted).toHaveLength(0);
+    widget.dispose();
+  });
+
+  it("TC4 스크린샷이 없으면 핀 찍기를 쓸 수 없다", async () => {
+    const { widget } = nativeWidget();
+    await widget.openReport();
+    widget.modal.removeScreenshot();
+
+    expect(widget.getState().modal.canPin).toBe(false);
+    expect(widget.openPinScreen()).toBe(false);
+    expect(widget.getState().screen).toBe("modal");
+    widget.dispose();
+  });
+
+  it("TC5 스크린샷을 제거하면 없이 전송된다", async () => {
+    const { queue, widget } = nativeWidget();
+    await widget.openReport();
+    widget.modal.removeScreenshot();
+    widget.modal.setComment("이미지 제거");
+    await widget.submitReport();
+
+    expect(queue.submitted[0]?.screenshot).toBeNull();
+    widget.dispose();
+  });
+
+  it("TC6 모달을 키보드만으로 조작할 수 있다", async () => {
+    const { widget } = nativeWidget();
+    await widget.openReport();
+    const order = widget.getState().modal.focusOrder;
+
+    expect(order).toContain(MODAL_FIELD_COMMENT);
+    expect(order).toContain(MODAL_FIELD_PRIORITY);
+    expect(order).toContain(MODAL_ACTION_SEND);
+    widget.modal.focus(MODAL_ACTION_SEND);
+    expect(widget.modal.tabNext()).toBe(MODAL_FIELD_COMMENT);
+    expect(widget.closeReport()).toBe("closed");
+    expect(widget.getState().modal.restoreFocusTo).toBe("feedback-kit-floating-button");
+    widget.dispose();
+  });
+
+  it("TC7 모달을 열면 스크린샷이 자동 캡처된다", async () => {
+    let calls = 0;
+    const { widget } = nativeWidget({ capture: () => { calls += 1; return SHOT; } });
+
+    await widget.openReport();
+
+    expect(calls).toBe(1);
+    expect(widget.getState().modal.screenshot).toEqual(SHOT);
+    expect(widget.getState().modal.screenshotStatus).toBe("ready");
+    widget.dispose();
+  });
+
+  it("TC8 코멘트 4,000자 초과는 거부하고 자르지 않는다", async () => {
+    const { queue, widget } = nativeWidget();
+    await widget.openReport();
+    const value = "가".repeat(4001);
+    widget.modal.setComment(value);
+
+    expect(widget.getState().modal.comment).toBe(value);
+    expect(widget.getState().modal.commentError).toBe(COMMENT_TOO_LONG_MESSAGE);
+    expect(await widget.submitReport()).toBeNull();
+    expect(queue.submitted).toHaveLength(0);
+    widget.dispose();
+  });
+
+  it("TC9 스크린샷이 8 MiB를 넘으면 재인코딩한다", async () => {
+    const oversized: FeedbackScreenshot = {
+      base64: "a".repeat(SCREENSHOT_MAX_BASE64_BYTES + 1),
+      contentType: "image/png",
+    };
+    const compressed: FeedbackScreenshot = { base64: "small", contentType: "image/jpeg" };
+    const qualities: number[] = [];
+    const { widget } = nativeWidget({
+      capture: () => oversized,
+      reencode: (_shot, quality) => {
+        qualities.push(quality);
+        return compressed;
+      },
+    });
+    await widget.openReport();
+
+    expect(qualities).toEqual([0.7]);
+    expect(widget.getState().modal.screenshot).toEqual(compressed);
+    expect(screenshotBytes(widget.getState().modal.screenshot)).toBeLessThanOrEqual(
+      SCREENSHOT_MAX_BASE64_BYTES,
+    );
+    widget.dispose();
+
+    const failed = nativeWidget({ capture: () => oversized, reencode: () => oversized });
+    await failed.widget.openReport();
+    failed.widget.modal.setComment("용량 실패 뒤 제출");
+    expect(failed.widget.getState().modal.screenshotMessage).toBe(SCREENSHOT_FAILED_MESSAGE);
+    expect(failed.widget.getState().modal.canSubmit).toBe(true);
+    failed.widget.dispose();
+  });
+
+  it("TC10 입력 중 모달을 닫으려 하면 확인을 받는다", async () => {
+    const { widget } = nativeWidget();
+    await widget.openReport();
+    widget.modal.setComment("작성 중");
+
+    expect(widget.closeReport()).toBe("confirm");
+    expect(widget.getState().modal.open).toBe(true);
+    expect(widget.getState().modal.closeConfirmVisible).toBe(true);
+    expect(widget.getState().modal.comment).toBe("작성 중");
+    widget.dispose();
+  });
+
+  it("TC11 핀 지정을 취소하면 이전 좌표가 유지된다", async () => {
+    const { widget } = nativeWidget();
+    await widget.openReport();
+    widget.openPinScreen();
+    widget.placePin({ x: 20, y: 30 }, { width: 100, height: 100 });
+    widget.confirmPin();
+    widget.openPinScreen();
+    widget.placePin({ x: 80, y: 90 }, { width: 100, height: 100 });
+
+    widget.cancelPin();
+
+    expect(widget.getState().modal.pin).toEqual({ x: 0.2, y: 0.3 });
+    expect(widget.getState().screen).toBe("modal");
+    widget.dispose();
+  });
+
+  it("TC12 핀 좌표가 해상도와 무관한 상대 좌표로 저장된다", async () => {
+    const first = nativeWidget();
+    const second = nativeWidget();
+    await first.widget.openReport();
+    await second.widget.openReport();
+    first.widget.openPinScreen();
+    second.widget.openPinScreen();
+    first.widget.placePin({ x: 50, y: 75 }, { width: 100, height: 100 });
+    second.widget.placePin({ x: 500, y: 750 }, { width: 1000, height: 1000 });
+    first.widget.confirmPin();
+    second.widget.confirmPin();
+    first.widget.modal.setComment("기기 1");
+    second.widget.modal.setComment("기기 2");
+    await first.widget.submitReport();
+    await second.widget.submitReport();
+
+    expect(first.queue.submitted[0]?.pin).toEqual({ x: 0.5, y: 0.75 });
+    expect(second.queue.submitted[0]?.pin).toEqual(first.queue.submitted[0]?.pin);
+    first.widget.dispose();
+    second.widget.dispose();
+  });
+});
+
+describe("리포트 모달 회귀", () => {
+  it("pending 상태에서는 보내기를 다시 눌러도 새 제보를 만들지 않는다", async () => {
+    const queue = new TestQueue();
+    queue.outcome = { delivered: false, id: null, queued: true };
+    const { widget } = nativeWidget({ queue });
+    await widget.openReport();
+    widget.modal.setComment("중복 방지");
+    await widget.submitReport();
+
+    expect(await widget.submitReport()).toBeNull();
+    expect(queue.submitted).toHaveLength(1);
+    widget.dispose();
+  });
+
+  it("제보 조립 실패를 대기 큐 성공으로 가장하지 않는다", async () => {
+    const queue = new TestQueue();
+    const modal = new ReportModalController({
+      queue,
+      platform: "web",
+      createReport: async () => { throw new Error("context"); },
+    });
+    await modal.open();
+    modal.setComment("조립 실패");
+
+    const outcome = await modal.submit();
+
+    expect(outcome).toEqual({ delivered: false, id: null, queued: false });
+    expect(modal.getState().submitStatus).toBe("failed");
+    expect(modal.getState().showRetry).toBe(false);
+    expect(queue.submitted).toHaveLength(0);
+    modal.dispose();
+  });
+
+  it("닫힌 이전 캡처가 다시 연 모달의 최신 캡처를 덮지 않는다", async () => {
+    let resolveFirst!: (shot: FeedbackScreenshot) => void;
+    const firstCapture = new Promise<FeedbackScreenshot>((resolve) => { resolveFirst = resolve; });
+    let calls = 0;
+    const { widget } = nativeWidget({
+      capture: () => {
+        calls += 1;
+        return calls === 1 ? firstCapture : SHOT;
+      },
+    });
+    const opening = widget.openReport();
+    widget.closeReport();
+    await widget.openReport();
+    resolveFirst({ base64: "stale", contentType: "image/png" });
+    await opening;
+
+    expect(widget.getState().modal.screenshot).toEqual(SHOT);
+    widget.dispose();
+  });
+
+  it("복원된 대기 큐도 인라인 재전송을 제공하고 새 입력을 닫지 않는다", async () => {
+    const queue = new TestQueue();
+    queue.pending = 1;
+    const { widget } = nativeWidget({ queue });
+    await widget.openReport();
+    widget.modal.setComment("새로 작성 중인 내용");
+
+    expect(widget.getState().modal.showRetry).toBe(true);
+    await widget.retryReport();
+
+    expect(widget.getState().modal.open).toBe(true);
+    expect(widget.getState().modal.comment).toBe("새로 작성 중인 내용");
+    expect(widget.getState().modal.pending).toBe(0);
+    widget.dispose();
+  });
+
+  it("현재 제보가 영구 실패하면 큐가 비어도 성공으로 표시하지 않는다", async () => {
+    const queue = new TestQueue();
+    queue.outcome = { delivered: false, id: null, queued: true };
+    const { widget } = nativeWidget({ queue });
+    await widget.openReport();
+    widget.modal.setComment("영구 실패");
+    await widget.submitReport();
+    const id = widget.modal.getLastReport()!.clientSubmissionId;
+
+    queue.settle(id, { delivered: false, id: null }, 0);
+
+    expect(widget.getState().modal.open).toBe(true);
+    expect(widget.getState().modal.submitStatus).toBe("failed");
+    widget.dispose();
+  });
+
+  it("현재 제보가 성공하면 관련 없는 대기 항목이 있어도 완료된다", async () => {
+    const queue = new TestQueue();
+    queue.pending = 1;
+    queue.outcome = { delivered: false, id: null, queued: true };
+    const { widget } = nativeWidget({ queue });
+    await widget.openReport();
+    widget.modal.setComment("현재 건 성공");
+    await widget.submitReport();
+    const id = widget.modal.getLastReport()!.clientSubmissionId;
+
+    queue.settle(id, { delivered: true, id: "server-current" }, 1);
+
+    expect(widget.getState().screen).toBe("button");
+    expect(widget.getState().modal.submitStatus).toBe("sent");
+    widget.dispose();
+  });
+
+  it("대기 중인 제보의 입력과 첨부는 큐 원본과 다르게 수정되지 않는다", async () => {
+    const queue = new TestQueue();
+    queue.outcome = { delivered: false, id: null, queued: true };
+    const { widget } = nativeWidget({ queue });
+    await widget.openReport();
+    widget.modal.setComment("최초 내용");
+    widget.modal.setPriority("high");
+    await widget.submitReport();
+
+    widget.modal.setComment("바뀐 내용");
+    widget.modal.setPriority("urgent");
+    widget.modal.removeScreenshot();
+    await widget.modal.attachFile({ base64: "replacement", contentType: "image/jpeg" });
+
+    expect(widget.getState().modal.comment).toBe("최초 내용");
+    expect(widget.getState().modal.priority).toBe("high");
+    expect(widget.getState().modal.screenshot).toEqual(SHOT);
+    expect(queue.submitted[0]?.comment).toBe("최초 내용");
+    widget.dispose();
+  });
+
+  it("스크린샷 교체는 이전 핀을 지우고 늦은 캡처가 파일을 덮지 못하게 한다", async () => {
+    let finishCapture!: (shot: FeedbackScreenshot) => void;
+    const delayed = new Promise<FeedbackScreenshot>((resolve) => { finishCapture = resolve; });
+    let calls = 0;
+    const replacement = { base64: "replacement", contentType: "image/jpeg" } as const;
+    const { widget } = nativeWidget({
+      capture: () => {
+        calls += 1;
+        return calls === 1 ? SHOT : delayed;
+      },
+    });
+    await widget.openReport();
+    widget.openPinScreen();
+    widget.placePin({ x: 20, y: 30 }, { width: 100, height: 100 });
+    widget.confirmPin();
+
+    const recapturing = widget.modal.recapture();
+    await widget.modal.attachFile(replacement);
+    finishCapture({ base64: "late", contentType: "image/png" });
+    await recapturing;
+
+    expect(widget.getState().modal.screenshot).toEqual(replacement);
+    expect(widget.getState().modal.pin).toBeNull();
+    expect(widget.getState().pinConfirmed).toBeNull();
+    widget.dispose();
+  });
+});