diff --git a/resources/js/Components/Galleries/DeleteGalleryButton.test.tsx b/resources/js/Components/Galleries/DeleteGalleryButton.test.tsx new file mode 100644 index 000000000..fcca6398a --- /dev/null +++ b/resources/js/Components/Galleries/DeleteGalleryButton.test.tsx @@ -0,0 +1,62 @@ +import userEvent from "@testing-library/user-event"; +import DeleteGalleryButton from "./DeleteGalleryButton"; +import GalleryDataFactory from "@/Tests/Factories/Gallery/GalleryDataFactory"; +import { mockInertiaUseForm, render, screen } from "@/Tests/testing-library"; + +describe("DeleteGalleryButton", () => { + const gallery = new GalleryDataFactory().create(); + + it("should render", () => { + render(); + + expect(screen.getByTestId("DeleteGalleryButton")).toBeInTheDocument(); + }); + + it("opens the slideout panel when pressed", async () => { + render(); + + expect(screen.queryByTestId("ConfirmationDialog__form")).not.toBeInTheDocument(); + + await userEvent.click(screen.getByTestId("DeleteGalleryButton")); + + expect(screen.getByTestId("ConfirmationDialog__form")).toBeInTheDocument(); + }); + + it("closes the slideout panel when close button is pressed", async () => { + render(); + + expect(screen.queryByTestId("ConfirmationDialog__form")).not.toBeInTheDocument(); + + await userEvent.click(screen.getByTestId("DeleteGalleryButton")); + + expect(screen.getByTestId("ConfirmationDialog__form")).toBeInTheDocument(); + + await userEvent.click(screen.getByTestId("ConfirmationDialog__close")); + + expect(screen.queryByTestId("ConfirmationDialog__form")).not.toBeInTheDocument(); + }); + + it("deletes the gallery when submitted", async () => { + const submitFunction = vi.fn().mockImplementation((_, options) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + options?.onFinish?.(); + }); + + mockInertiaUseForm({ + data: {}, + delete: submitFunction, + }); + + render(); + + await userEvent.click(screen.getByTestId("DeleteGalleryButton")); + + await userEvent.type(screen.getByTestId("ConfirmDeletionDialog__input"), "DELETE"); + + await userEvent.click(screen.getByTestId("ConfirmationDialog__confirm")); + + expect(submitFunction).toHaveBeenCalled(); + + expect(screen.queryByTestId("ConfirmationDialog__form")).not.toBeInTheDocument(); + }); +}); diff --git a/resources/js/Components/Galleries/DeleteGalleryButton.tsx b/resources/js/Components/Galleries/DeleteGalleryButton.tsx new file mode 100644 index 000000000..0b5b578b3 --- /dev/null +++ b/resources/js/Components/Galleries/DeleteGalleryButton.tsx @@ -0,0 +1,54 @@ +import { useForm } from "@inertiajs/react"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Button } from "@/Components/Buttons"; +import { ConfirmDeletionDialog } from "@/Components/ConfirmDeletionDialog"; + +const DeleteGalleryButton = ({ gallery }: { gallery: App.Data.Gallery.GalleryData }): JSX.Element => { + const { t } = useTranslation(); + const [open, setOpen] = useState(false); + + const { processing, delete: remove } = useForm({}); + + const submit = (): void => { + remove( + route("my-galleries.destroy", { + slug: gallery.slug, + }), + { + onFinish: () => { + setOpen(false); + }, + }, + ); + }; + + return ( + <> +