130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import {
|
|
computeImageExportStyles,
|
|
computeImageEditorTokens,
|
|
computeImagePublicTokens,
|
|
} from "@/features/editor/utils/imageHelpers";
|
|
import type { ImageBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
describe("imageHelpers.computeImageExportStyles", () => {
|
|
it("기본 값에서는 배경/너비 없이 border-radius 8px 를 사용해야 한다(md 토큰)", () => {
|
|
const { wrapperStyleParts, imgStyleParts } = computeImageExportStyles({});
|
|
|
|
expect(wrapperStyleParts.length).toBe(0);
|
|
expect(imgStyleParts).toContain("border-radius:8px");
|
|
});
|
|
|
|
it("backgroundColorCustom 이 있으면 wrapperStyle 에 background-color 스타일을 추가해야 한다", () => {
|
|
const { wrapperStyleParts } = computeImageExportStyles({
|
|
backgroundColorCustom: "#123456",
|
|
});
|
|
|
|
expect(wrapperStyleParts).toContain("background-color:#123456");
|
|
});
|
|
|
|
it("widthMode=fixed 이고 widthPx 가 양수이면 이미지 width 스타일을 추가해야 한다", () => {
|
|
const { imgStyleParts } = computeImageExportStyles({
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
});
|
|
|
|
expect(imgStyleParts).toContain("width:320px");
|
|
});
|
|
|
|
it("borderRadius 토큰이 full 이면 border-radius 9999px 를 사용해야 한다", () => {
|
|
const { imgStyleParts } = computeImageExportStyles({
|
|
borderRadius: "full",
|
|
});
|
|
|
|
expect(imgStyleParts).toContain("border-radius:9999px");
|
|
});
|
|
|
|
it("borderRadiusPx 가 지정되면 토큰 대신 해당 값을 px 로 사용해야 한다", () => {
|
|
const { imgStyleParts } = computeImageExportStyles({
|
|
borderRadius: "lg",
|
|
borderRadiusPx: 20,
|
|
});
|
|
|
|
expect(imgStyleParts).toContain("border-radius:20px");
|
|
});
|
|
});
|
|
|
|
describe("computeImageEditorTokens", () => {
|
|
it("기본 값에서는 widthPx 없이 borderRadius 8px 를 사용해야 한다(md 토큰)", () => {
|
|
const tokens = computeImageEditorTokens({});
|
|
|
|
expect(tokens.widthPx).toBeUndefined();
|
|
expect(tokens.radiusPx).toBe(8);
|
|
});
|
|
|
|
it("widthMode=fixed 이고 widthPx 가 양수이면 widthPx 토큰을 그대로 사용해야 한다", () => {
|
|
const tokens = computeImageEditorTokens({
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
});
|
|
|
|
expect(tokens.widthPx).toBe(320);
|
|
});
|
|
|
|
it("borderRadius 토큰이 full 이면 radiusPx 9999 를 사용해야 한다", () => {
|
|
const tokens = computeImageEditorTokens({
|
|
borderRadius: "full",
|
|
});
|
|
|
|
expect(tokens.radiusPx).toBe(9999);
|
|
});
|
|
|
|
it("borderRadiusPx 가 지정되면 토큰 대신 해당 radiusPx 를 사용해야 한다", () => {
|
|
const tokens = computeImageEditorTokens({
|
|
borderRadius: "lg",
|
|
borderRadiusPx: 24,
|
|
});
|
|
|
|
expect(tokens.radiusPx).toBe(24);
|
|
});
|
|
});
|
|
|
|
describe("imageHelpers.computeImagePublicTokens", () => {
|
|
const baseProps: ImageBlockProps = {
|
|
src: "/images/example.png",
|
|
alt: "이미지",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
};
|
|
|
|
it("backgroundColorCustom 이 설정된 경우에만 wrapperStyle.backgroundColor 를 설정해야 한다", () => {
|
|
const tokensWithBg = computeImagePublicTokens({
|
|
...baseProps,
|
|
backgroundColorCustom: "#123456",
|
|
});
|
|
|
|
expect(tokensWithBg.wrapperStyle.backgroundColor).toBe("#123456");
|
|
|
|
const tokensWithoutBg = computeImagePublicTokens({
|
|
...baseProps,
|
|
backgroundColorCustom: undefined,
|
|
});
|
|
|
|
expect(tokensWithoutBg.wrapperStyle.backgroundColor).toBeUndefined();
|
|
});
|
|
|
|
it("widthMode 가 fixed 이고 widthPx 가 설정된 경우 imageStyle.width 는 em 단위로 설정되어야 한다", () => {
|
|
const tokens = computeImagePublicTokens({
|
|
...baseProps,
|
|
widthMode: "fixed",
|
|
widthPx: 480,
|
|
});
|
|
|
|
expect(tokens.imageStyle.width).toBe("30em");
|
|
});
|
|
|
|
it("borderRadiusPx 가 설정된 경우 imageStyle.borderRadius 는 em 단위로 설정되어야 한다", () => {
|
|
const tokens = computeImagePublicTokens({
|
|
...baseProps,
|
|
borderRadiusPx: 32,
|
|
});
|
|
|
|
expect(tokens.imageStyle.borderRadius).toBe("2em");
|
|
});
|
|
});
|