diff --git a/frontend/src/components/QuestionImage/QuestionImage.test.tsx b/frontend/src/components/QuestionImage/QuestionImage.test.tsx index 8d33e517be..1b602d08f7 100644 --- a/frontend/src/components/QuestionImage/QuestionImage.test.tsx +++ b/frontend/src/components/QuestionImage/QuestionImage.test.tsx @@ -1,12 +1,6 @@ import { fireEvent, render, screen } from "@testing-library/react"; import QuestionImage from "."; -Object.assign(navigator, { - clipboard: { - writeText: jest.fn(), - }, -}); - describe("Question Image", () => { const url = "https://example.com/image.jpg"; const mockHandleClickOpen = jest.fn(); @@ -15,19 +9,23 @@ describe("Question Image", () => { render(); const image = screen.getByAltText("question image"); - expect(image).toBeInTheDocument(); }); it("Copy Question Image url", () => { + const promptSpy = jest.spyOn(window, "prompt").mockImplementation(() => ""); + render(); const copyButton = screen.getByLabelText("copy"); fireEvent.click(copyButton); - expect(navigator.clipboard.writeText).toHaveBeenCalledWith( + expect(promptSpy).toHaveBeenCalledWith( + "Copy to clipboard: Ctrl+C, Enter", `![image](${url})` ); + + promptSpy.mockRestore(); }); it("Expand Question Image", () => { diff --git a/frontend/src/components/QuestionImage/index.tsx b/frontend/src/components/QuestionImage/index.tsx index 9314d8c616..4bd7cccd65 100644 --- a/frontend/src/components/QuestionImage/index.tsx +++ b/frontend/src/components/QuestionImage/index.tsx @@ -1,7 +1,6 @@ import { Box, ImageListItem, IconButton } from "@mui/material"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import FullscreenIcon from "@mui/icons-material/Fullscreen"; -import { toast } from "react-toastify"; interface QuestionImageProps { url: string; @@ -56,8 +55,11 @@ const QuestionImage: React.FC = ({ > { - navigator.clipboard.writeText(`![image](${url})`); - toast.success("Image URL copied to clipboard"); + // switch to window.prompt since navigator.clipboard.writeText is not supported in HTTP + window.prompt( + "Copy to clipboard: Ctrl+C, Enter", + `![image](${url})` + ); }} sx={{ color: "#fff" }} aria-label="copy" diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts index 1b7739f405..70d5f52120 100644 --- a/frontend/src/theme.ts +++ b/frontend/src/theme.ts @@ -1,4 +1,4 @@ -import grey from "@mui/material/colors/grey"; +import { grey } from "@mui/material/colors"; import { createTheme } from "@mui/material/styles"; const theme = createTheme({ @@ -47,13 +47,13 @@ const theme = createTheme({ }, }, }, - MuiListItemText: { - styleOverrides: { - primary: { - fontSize: "14px", - }, + MuiListItemText: { + styleOverrides: { + primary: { + fontSize: "14px", }, - } + }, + }, }, });