snapme

1import { fireEvent, render, screen } from "@testing-library/react"
2import { beforeEach, describe, expect, it } from "vitest"
3
4import { DecorList } from "@/features/editor/DecorList"
5import { useBoothStore } from "@/stores/booth"
6
7/* M4 (DESIGN-SYSTEM §11): padanan daftar untuk keyboard dan pembaca layar.
8   Kanvas tidak diuji di sini; berkas ini menjaga bahwa tiap operasi hias bisa
9   diselesaikan tanpa penunjuk. */
10
11describe("DecorList", () => {
12  beforeEach(() => {
13    useBoothStore.getState().reset()
14  })
15
16  it("tidak dirender selama strip belum dihias", () => {
17    const { container } = render(<DecorList />)
18
19    expect(container.firstChild).toBeNull()
20    expect(screen.queryByRole("region", { name: "Isi strip" })).toBeNull()
21  })
22
23  it("menampilkan stiker baru beserta posisinya", () => {
24    useBoothStore.getState().addSticker("star")
25    render(<DecorList />)
26
27    expect(screen.getByText("Stiker Bintang")).toBeTruthy()
28    expect(screen.getByText("x 300 · y 900 · 120 px · -6°")).toBeTruthy()
29    expect(
30      screen.getByRole("button", { name: "Pindah kanan: Bintang" })
31    ).toBeTruthy()
32  })
33
34  it("memindahkan dan menghapus stiker lewat tombol", () => {
35    useBoothStore.getState().addSticker("heart")
36    render(<DecorList />)
37
38    fireEvent.click(screen.getByRole("button", { name: "Pindah kanan: Hati" }))
39    expect(screen.getByText("x 308 · y 900 · 120 px · -6°")).toBeTruthy()
40
41    fireEvent.click(screen.getByRole("button", { name: "Pindah atas: Hati" }))
42    expect(screen.getByText("x 308 · y 892 · 120 px · -6°")).toBeTruthy()
43
44    fireEvent.click(screen.getByRole("button", { name: "Putar: Hati" }))
45    expect(screen.getByText("x 308 · y 892 · 120 px · 9°")).toBeTruthy()
46
47    fireEvent.click(screen.getByRole("button", { name: "Perbesar: Hati" }))
48    expect(screen.getByText("x 308 · y 892 · 132 px · 9°")).toBeTruthy()
49
50    fireEvent.click(screen.getByRole("button", { name: "Perkecil: Hati" }))
51    expect(screen.getByText("x 308 · y 892 · 120 px · 9°")).toBeTruthy()
52
53    fireEvent.click(screen.getByRole("button", { name: "Hapus: Hati" }))
54    expect(screen.queryByText("Stiker Hati")).toBeNull()
55    expect(useBoothStore.getState().stickers).toEqual([])
56  })
57
58  it("menampilkan teks strip dengan tombol ukuran dan hapus", () => {
59    useBoothStore.getState().setStripText("halo")
60    render(<DecorList />)
61
62    expect(screen.getByText("Teks halo")).toBeTruthy()
63    expect(screen.getByText("ukuran 44 px")).toBeTruthy()
64
65    fireEvent.click(screen.getByRole("button", { name: "Perbesar: Teks halo" }))
66    expect(useBoothStore.getState().texts[0].fontSize).toBe(48)
67
68    fireEvent.click(screen.getByRole("button", { name: "Hapus: Teks halo" }))
69    expect(useBoothStore.getState().texts).toEqual([])
70  })
71})
72