264 lines
12 KiB
TypeScript
264 lines
12 KiB
TypeScript
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
|
import { expect, test } from "vitest";
|
|
|
|
import type { UploadAudioContentRequest } from "@/features/audio-contents/components/AudioContentForm";
|
|
import { AudioContentFormPage } from "@/features/audio-contents/pages/AudioContentFormPage";
|
|
import type { CapturedRequest } from "@/features/audio-contents/tests/audio-form-test-support";
|
|
import { createFormClient, fileWithSize, readJsonPart, requireFormData } from "@/features/audio-contents/tests/audio-form-test-support";
|
|
|
|
function createSuccessfulUpload(uploadedBodies: XMLHttpRequestBodyInit[]): UploadAudioContentRequest {
|
|
return async (options) => {
|
|
uploadedBodies.push(options.body);
|
|
return options.responseSchema.parse({ contentId: 9301 });
|
|
};
|
|
}
|
|
|
|
function renderCreateForm(uploadedBodies: XMLHttpRequestBodyInit[] = []) {
|
|
const requests: CapturedRequest[] = [];
|
|
window.history.pushState({}, "", "/ai-characters/101/audio-contents/new");
|
|
render(
|
|
<AudioContentFormPage
|
|
apiClient={createFormClient(requests)}
|
|
characterId="101"
|
|
createCropSource={(file) => Promise.resolve({ file, height: 800, previewUrl: "blob:cover", width: 800 })}
|
|
renderCrop={(request) => Promise.resolve(request.file)}
|
|
uploadAudioContentRequest={createSuccessfulUpload(uploadedBodies)}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
async function fillRequiredCreateFields() {
|
|
fireEvent.change(await screen.findByLabelText("제목"), { target: { value: "옵션 오디오" } });
|
|
fireEvent.change(screen.getByLabelText("상세 설명"), { target: { value: "옵션 설명" } });
|
|
fireEvent.change(screen.getByLabelText("태그"), { target: { value: "옵션" } });
|
|
fireEvent.keyDown(screen.getByLabelText("태그"), { key: "Enter" });
|
|
fireEvent.change(screen.getByLabelText("오디오 테마"), { target: { value: "7" } });
|
|
fireEvent.change(screen.getByLabelText("오디오 파일"), { target: { files: [fileWithSize("voice.mp3", "audio/mpeg", 10)] } });
|
|
fireEvent.change(screen.getByLabelText("커버 이미지"), { target: { files: [new File(["cover"], "cover.png", { type: "image/png" })] } });
|
|
fireEvent.click(await screen.findByRole("button", { name: "적용" }));
|
|
await waitFor(() => expect(screen.queryByRole("button", { name: "적용" })).not.toBeInTheDocument());
|
|
}
|
|
|
|
test("AudioContentFormPage commits tag chips with Enter and comma without submitting, then removes one with a native button", async () => {
|
|
// Given
|
|
const uploadedBodies: XMLHttpRequestBodyInit[] = [];
|
|
renderCreateForm(uploadedBodies);
|
|
const tagInput = await screen.findByLabelText("태그");
|
|
|
|
// When
|
|
fireEvent.change(tagInput, { target: { value: "상담" } });
|
|
fireEvent.keyDown(tagInput, { key: "Enter" });
|
|
fireEvent.change(tagInput, { target: { value: "힐링" } });
|
|
fireEvent.keyDown(tagInput, { key: "," });
|
|
|
|
// Then
|
|
expect(tagInput).toHaveValue("");
|
|
expect(uploadedBodies).toHaveLength(0);
|
|
const removeConsulting = screen.getByRole("button", { name: "태그 상담 삭제" });
|
|
expect(removeConsulting.tagName).toBe("BUTTON");
|
|
expect(screen.getByRole("button", { name: "태그 힐링 삭제" })).toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(removeConsulting);
|
|
|
|
// Then
|
|
expect(screen.queryByRole("button", { name: "태그 상담 삭제" })).not.toBeInTheDocument();
|
|
expect(screen.getByRole("button", { name: "태그 힐링 삭제" })).toBeInTheDocument();
|
|
});
|
|
|
|
test.each([
|
|
"-1",
|
|
"1.5",
|
|
"100000",
|
|
])("AudioContentFormPage preserves the raw price input %s", async (value) => {
|
|
// Given
|
|
renderCreateForm();
|
|
const priceInput = await screen.findByLabelText("가격");
|
|
expect(priceInput).toHaveValue(0);
|
|
expect(priceInput).toHaveAttribute("type", "number");
|
|
expect(priceInput).toHaveAttribute("min", "0");
|
|
expect(priceInput).toHaveAttribute("step", "1");
|
|
|
|
// When
|
|
fireEvent.change(priceInput, { target: { value } });
|
|
|
|
// Then
|
|
expect(priceInput).toHaveValue(Number(value));
|
|
});
|
|
|
|
test("AudioContentFormPage shows paid options only for a positive price", async () => {
|
|
// Given
|
|
renderCreateForm();
|
|
const priceInput = await screen.findByLabelText("가격");
|
|
|
|
// When
|
|
fireEvent.change(priceInput, { target: { value: "0" } });
|
|
|
|
// Then
|
|
expect(screen.queryByRole("group", { name: "구매 옵션" })).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 생성")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("포인트 사용")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 시작")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 종료")).not.toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.change(priceInput, { target: { value: "1" } });
|
|
|
|
// Then
|
|
expect(screen.getByRole("group", { name: "구매 옵션" })).toBeInTheDocument();
|
|
expect(screen.getByLabelText("미리듣기 생성")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("포인트 사용")).toBeInTheDocument();
|
|
});
|
|
|
|
test("AudioContentFormPage resets paid settings and retains removed-control defaults when price is numeric zero", async () => {
|
|
// Given
|
|
const uploadedBodies: XMLHttpRequestBodyInit[] = [];
|
|
renderCreateForm(uploadedBodies);
|
|
await fillRequiredCreateFields();
|
|
const priceInput = screen.getByLabelText("가격");
|
|
fireEvent.change(priceInput, { target: { value: "1" } });
|
|
fireEvent.click(screen.getByRole("radio", { name: "대여 전용" }));
|
|
fireEvent.click(screen.getByLabelText("미리듣기 생성"));
|
|
fireEvent.click(screen.getByLabelText("포인트 사용"));
|
|
fireEvent.change(screen.getByLabelText("미리듣기 시작"), { target: { value: "00:00:30" } });
|
|
fireEvent.change(screen.getByLabelText("미리듣기 종료"), { target: { value: "01:00:05" } });
|
|
|
|
// When
|
|
fireEvent.change(priceInput, { target: { value: "00" } });
|
|
|
|
// Then
|
|
expect(screen.queryByRole("group", { name: "구매 옵션" })).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 생성")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("포인트 사용")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 시작")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 종료")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("기간제")).not.toBeInTheDocument();
|
|
expect(screen.queryByRole("checkbox", { name: "대여 전용" })).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("언어 코드")).not.toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(screen.getByRole("button", { name: "생성" }));
|
|
|
|
// Then
|
|
await waitFor(() => expect(uploadedBodies).toHaveLength(1));
|
|
expect(await readJsonPart(requireFormData(uploadedBodies.at(-1)).get("request"))).toMatchObject({
|
|
price: 0,
|
|
purchaseOption: "BOTH",
|
|
limited: null,
|
|
isGeneratePreview: false,
|
|
isOnlyRental: false,
|
|
isPointAvailable: false,
|
|
previewStartTime: null,
|
|
previewEndTime: null,
|
|
languageCode: null,
|
|
});
|
|
});
|
|
|
|
test("AudioContentFormPage reveals preview duration offset inputs only when preview generation is enabled and submits full HH:MM:SS values", async () => {
|
|
// Given
|
|
const uploadedBodies: XMLHttpRequestBodyInit[] = [];
|
|
renderCreateForm(uploadedBodies);
|
|
await fillRequiredCreateFields();
|
|
fireEvent.change(screen.getByLabelText("가격"), { target: { value: "1" } });
|
|
expect(screen.queryByLabelText("미리듣기 시작")).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText("미리듣기 종료")).not.toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(screen.getByLabelText("미리듣기 생성"));
|
|
|
|
// Then
|
|
const previewStart = screen.getByLabelText("미리듣기 시작");
|
|
const previewEnd = screen.getByLabelText("미리듣기 종료");
|
|
expect(previewStart).toHaveAttribute("type", "text");
|
|
expect(previewStart).toHaveAttribute("placeholder", "예: 00:00:30");
|
|
expect(previewStart).toHaveAttribute("pattern", "[0-9]{2}:[0-9]{2}:[0-9]{2}");
|
|
expect(previewStart).not.toHaveAttribute("step");
|
|
expect(previewEnd).toHaveAttribute("type", "text");
|
|
expect(previewEnd).toHaveAttribute("placeholder", "예: 01:00:05");
|
|
expect(previewEnd).toHaveAttribute("pattern", "[0-9]{2}:[0-9]{2}:[0-9]{2}");
|
|
expect(previewEnd).not.toHaveAttribute("step");
|
|
|
|
// When
|
|
fireEvent.change(previewStart, { target: { value: "00:00:30" } });
|
|
fireEvent.change(previewEnd, { target: { value: "01:00:05" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "생성" }));
|
|
|
|
// Then
|
|
await waitFor(() => expect(uploadedBodies).toHaveLength(1));
|
|
expect(await readJsonPart(requireFormData(uploadedBodies.at(-1)).get("request"))).toMatchObject({
|
|
previewStartTime: "00:00:30",
|
|
previewEndTime: "01:00:05",
|
|
});
|
|
});
|
|
|
|
test("AudioContentFormPage rejects malformed preview offsets through the submit button", async () => {
|
|
// Given
|
|
const uploadedBodies: XMLHttpRequestBodyInit[] = [];
|
|
renderCreateForm(uploadedBodies);
|
|
await fillRequiredCreateFields();
|
|
fireEvent.change(screen.getByLabelText("가격"), { target: { value: "1" } });
|
|
fireEvent.click(screen.getByLabelText("미리듣기 생성"));
|
|
const previewStart = screen.getByLabelText("미리듣기 시작");
|
|
const previewEnd = screen.getByLabelText("미리듣기 종료");
|
|
|
|
// When
|
|
fireEvent.change(previewStart, { target: { value: "30" } });
|
|
fireEvent.change(previewEnd, { target: { value: "01:00" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "생성" }));
|
|
|
|
// Then
|
|
expect(await screen.findAllByText("미리듣기 시간은 HH:MM:SS 형식으로 입력하세요.")).toHaveLength(2);
|
|
expect(previewStart).toHaveAttribute("aria-invalid", "true");
|
|
expect(previewEnd).toHaveAttribute("aria-invalid", "true");
|
|
await waitFor(() => expect(previewStart).toHaveFocus());
|
|
expect(uploadedBodies).toHaveLength(0);
|
|
});
|
|
|
|
test("AudioContentFormPage conditionally renders and clears the native scheduled release datetime", async () => {
|
|
// Given
|
|
renderCreateForm();
|
|
await screen.findByLabelText("즉시 공개");
|
|
expect(screen.queryByLabelText("예약 공개일")).not.toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(screen.getByLabelText("예약 공개"));
|
|
|
|
// Then
|
|
const scheduledInput = screen.getByLabelText("예약 공개일");
|
|
expect(scheduledInput).toHaveAttribute("type", "datetime-local");
|
|
|
|
// When
|
|
fireEvent.change(scheduledInput, { target: { value: "2026-08-05T12:00" } });
|
|
fireEvent.click(screen.getByLabelText("즉시 공개"));
|
|
|
|
// Then
|
|
expect(screen.queryByLabelText("예약 공개일")).not.toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(screen.getByLabelText("예약 공개"));
|
|
|
|
// Then
|
|
expect(screen.getByLabelText("예약 공개일")).toHaveValue("");
|
|
});
|
|
|
|
test("AudioContentFormPage turns edit tags into removable chips and serializes the remaining chips as a comma string", async () => {
|
|
// Given
|
|
const requests: CapturedRequest[] = [];
|
|
window.history.pushState({}, "", "/ai-characters/101/audio-contents/9001/edit");
|
|
render(<AudioContentFormPage apiClient={createFormClient(requests)} characterId="101" contentId="9001" />);
|
|
|
|
// Then
|
|
await waitFor(() => expect(screen.queryByRole("button", { name: "태그 상담 삭제" })).toBeInTheDocument());
|
|
expect(screen.getByRole("button", { name: "태그 힐링 삭제" })).toBeInTheDocument();
|
|
|
|
// When
|
|
fireEvent.click(screen.getByRole("button", { name: "태그 상담 삭제" }));
|
|
fireEvent.change(screen.getByLabelText("태그"), { target: { value: "집중" } });
|
|
fireEvent.keyDown(screen.getByLabelText("태그"), { key: "Enter" });
|
|
fireEvent.click(screen.getByRole("button", { name: "저장" }));
|
|
|
|
// Then
|
|
await waitFor(() => expect(window.location.pathname).toBe("/ai-characters/101/audio-contents/9001"));
|
|
expect(await readJsonPart(requireFormData(requests.at(-1)?.body).get("request"))).toMatchObject({ tags: "힐링,집중" });
|
|
});
|