diff --git a/client/src/__tests__/components/ImageGallery/ImageGalleryModal.test.tsx b/client/src/__tests__/components/ImageGallery/ImageGalleryModal.test.tsx
new file mode 100644
index 0000000..f5a65a6
--- /dev/null
+++ b/client/src/__tests__/components/ImageGallery/ImageGalleryModal.test.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import ImageGalleryModal from "../../../components/ImageGallery/ImageGalleryModal/ImageGalleryModal";
+import "@testing-library/jest-dom";
+
+jest.mock("../../../components/ImageGallery/ImageGallery", () => ({
+ __esModule: true,
+ default: jest.fn(() =>
),
+}));
+
+describe("ImageGalleryModal", () => {
+
+ it("renders button correctly", () => {
+ render();
+
+ const button = screen.getByLabelText(/images-open/i);
+ expect(button).toBeInTheDocument();
+ });
+
+ it("opens the modal when button is clicked", () => {
+ render();
+
+ const button = screen.getByRole("button", { name: /images/i });
+ fireEvent.click(button);
+
+ const dialog = screen.getByRole("dialog");
+ expect(dialog).toBeInTheDocument();
+ });
+
+
+ it("closes the modal when close button is clicked", async () => {
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: /images/i }));
+
+ const closeButton = screen.getByRole("button", { name: /close/i });
+ fireEvent.click(closeButton);
+
+ await waitFor(() => {
+ expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+ });
+ });
+
+});
diff --git a/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx b/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx
index 7ea2404..f960352 100644
--- a/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx
+++ b/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx
@@ -25,7 +25,7 @@ const ImageGalleryModal: React.FC = ({ handleCopy }) =>
<>
@@ -34,6 +34,7 @@ const ImageGalleryModal: React.FC = ({ handleCopy }) =>