test(frontend): downloads through FileDetails

frontend/src/components/FileDetails.tsx

@@ -8,7 +8,11 @@ import MuiDownloadIcon from "@mui/icons-material/Download"
 import MuiIconButton from "@mui/material/IconButton"
 
 import { useLocationContext } from "../contexts/LocationContext"
-import { useFileDetails, useFileMutations } from "../queries/files"
+import {
+	useFileDetails,
+	useFileMutations,
+	useFileFetches,
+} from "../queries/files"
 
 interface FileDetailsProps {
 	itemId: string
@@ -18,13 +22,10 @@ function FileDetails({ itemId }: FileDetailsProps) {
 	const { isLoading, data } = useFileDetails(itemId)
 	const { deleteFile } = useFileMutations()
 	const { navigate } = useLocationContext()
+	const { downloadFile } = useFileFetches()
 
 	if (isLoading || !data) return null
 
-	const handleDownloadClick = () => {
-		console.log("download click")
-	}
-
 	const currentFileDetails = data
 
 	return (
@@ -45,7 +46,9 @@ function FileDetails({ itemId }: FileDetailsProps) {
 				<>
 					<MuiIconButton
 						aria-label="download item"
-						onClick={() => handleDownloadClick()}
+						onClick={async () => {
+							await downloadFile(itemId, currentFileDetails.filename)
+						}}
 					>
 						<MuiDownloadIcon />
 					</MuiIconButton>

frontend/tests/FileDetails.test.tsx

@@ -16,6 +16,41 @@ describe("FileDetails", () => {
 		size: 1,
 		id: "b61bf93d-a9db-473e-822e-a65003b1b7e3",
 	}
+	test("Clicking the download button trigger a file download", async () => {
+		// FIXME: Validating file downloads is ... tricky. The current interaction with dynamically created DOM
+		// elements is not visible by jest.
+
+		const expectedUrlPattern = new RegExp(`/files/${mockItem.id}/content/$`)
+
+		const axiosMock = getAxiosMockAdapter()
+
+		axiosMock.onGet(expectedUrlPattern).reply(200, mockItem)
+
+		jest
+			.spyOn(fileQueries, "useFileDetails")
+			.mockReturnValue({ data: mockItem, isLoading: false } as UseQueryResult<
+				FileData,
+				unknown
+			>)
+		const user = userEvent.setup()
+
+		const { getByLabelText, debug, rerender } = render(
+			<FileDetails itemId={mockItem.id} />,
+		)
+
+		const downloadButton = getByLabelText("download item")
+
+		await user.click(downloadButton)
+
+		const downloadRequests = axiosMock.history.get
+
+		expect(downloadRequests.length).toEqual(1)
+
+		const downloadRequest = downloadRequests[0]
+
+		expect(downloadRequest.url).toMatch(expectedUrlPattern)
+	})
+
 	test("Clicking the delete button fires request to delete file", async () => {
 		const expectedUrlPattern = new RegExp(`/files/${mockItem.id}/$`)