Merge branch 'main' into 202-confirm-page

ai-cfia · Dec 23, 2024 · 29e4294 · 29e4294
2 parents 4dd4a0a + 249e091
commit 29e4294
Show file tree

Hide file tree

Showing 17 changed files with 442 additions and 263 deletions.
diff --git a/public/img/unverifyIcon.svg b/public/img/unverifyIcon.svg
diff --git a/src/app/__tests__/HomePage.test.tsx b/src/app/__tests__/HomePage.test.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react-hooks/rules-of-hooks */
 import useUploadedFilesStore from "@/stores/fileStore";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useTranslation } from "react-i18next";
 import { Response } from "whatwg-fetch";
@@ -27,28 +27,6 @@ jest.mock("react-i18next", () => ({
 }));
 const { t } = useTranslation("homePage");
 
-// Mock the FileElement component
-jest.mock(
-  "../../components/FileElement",
-  () =>
-    ({
-      fileName,
-      fileUrl,
-      handleDelete,
-    }: {
-      fileName: string;
-      fileUrl: string;
-      handleDelete: (url: string) => void;
-    }) => (
-      <div data-testid="file-element">
-        <span data-testid="file-name">{fileName}</span>
-        <button data-testid="delete" onClick={() => handleDelete(fileUrl)}>
-          Delete
-        </button>
-      </div>
-    ),
-);
-
 global.URL.createObjectURL = jest
   .fn()
   .mockImplementation(() => "blob:example/image.png");
@@ -98,18 +76,24 @@ describe("HomePage Component", () => {
     userEvent.upload(input, file);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const fileName = await screen.findByTestId("file-name");
     expect(fileName).toHaveTextContent("hello.png");
 
+    fireEvent.mouseEnter(fileElement);
+
+    await waitFor(() => {
+
     // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete");
+    const deleteButton = screen.getByTestId("delete-hello.png");
     fireEvent.click(deleteButton);
+    });
+
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
   });
 
   it("should allow file uploads via drag and drop", async () => {
@@ -159,21 +143,26 @@ describe("HomePage Component", () => {
     });
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const fileName = await screen.findByTestId("file-name");
     expect(fileName).toHaveTextContent("hello.png");
 
+    fireEvent.mouseEnter(fileElement);
+
+    await waitFor(() => {
+
     // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete");
+    const deleteButton = screen.getByTestId("delete-hello.png");
     fireEvent.click(deleteButton);
+    });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
   });
 
-  it("should allow file upload via input", async () => {
+  it("should allow file upload via input and keep hover effect until delete button is clicked", async () => {
     render(<HomePage />);
 
     // Mock file
@@ -184,18 +173,23 @@ describe("HomePage Component", () => {
     userEvent.upload(input, file);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const fileName = await screen.findByTestId("file-name");
     expect(fileName).toHaveTextContent("hello.png");
 
+    fireEvent.mouseEnter(fileElement);
+
+    await waitFor(() => {
+
     // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete");
+    const deleteButton = screen.getByTestId("delete-hello.png");
     fireEvent.click(deleteButton);
+    });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
   });
 
   it("The button submit should be visible when a file is uploaded", async () => {
@@ -209,7 +203,7 @@ describe("HomePage Component", () => {
     userEvent.upload(input, file);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const fileName = await screen.findByTestId("file-name");
@@ -230,7 +224,7 @@ describe("HomePage Component", () => {
     userEvent.upload(input, file);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const fileName = await screen.findByTestId("file-name");
@@ -254,11 +248,11 @@ describe("HomePage Component", () => {
     userEvent.upload(input, [file, file2]);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement = await screen.findByText("hello.png");
+    const fileElement =  await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement2 = await screen.findByText("hello2.png");
+    const fileElement2 = await screen.findByTestId("file-element-hello2.png");
     expect(fileElement2).toBeInTheDocument();
 
     // Check that the file count is displayed
@@ -301,7 +295,7 @@ describe("HomePage Component", () => {
     const input = screen.getByLabelText(t("dropzone.browseFile"));
     userEvent.upload(input, file);
 
-    const fileElement = await screen.findByTestId("file-element");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     const submitButton = screen.getByTestId("submit-button");

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -58,11 +58,11 @@ function HomePage() {
               title={t("submitButtonDisabledHint")}
               disableHoverListener={uploadedFiles.length !== 0}
               placement="top"
-              className="w-[90%] max-w-full"
+              className="w-[90%] max-w-full min-w-[133.44px]"
             >
               <span className="flex justify-center w-full">
                 <Button
-                  className="xs:w-[90%] md:w-[100%] min-w-[133.44px] max-h-[40px]"
+                  className={`xs:w-[90%] md:w-[100%] min-w-[133.44px] max-h-[40px] md:max-w-[470px]`} // do not modify md:max-w-[470px] so that the button keeps the same width as the FileList
                   data-testid="submit-button"
                   variant="contained"
                   color="secondary"

diff --git a/src/components/AlertBanner.tsx b/src/components/AlertBanner.tsx
@@ -36,7 +36,8 @@ const AlertBanner: React.FC = () => {
   }, [alert, hideAlert, startAutoDismissTimer]);
 
   return (
-    <Box className="w-full" data-testid="alert-banner-container">
+    <Box className="fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-lg"
+      data-testid="alert-banner-container">
       <Collapse in={Boolean(alert)}>
         {alert && (
           <Alert

diff --git a/src/components/Dropzone.tsx b/src/components/Dropzone.tsx
@@ -2,7 +2,7 @@
 import FileUploaded from "@/classe/File";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
-import type { DropzoneState, ImageLoadEvent } from "@/types/types";
+import type { DropzoneState } from "@/types/types";
 import { CloudUpload } from "@mui/icons-material";
 import { Box, Button, Typography, useTheme } from "@mui/material";
 import React from "react";
@@ -28,7 +28,6 @@ interface DropzoneProps {
  */
 const Dropzone: React.FC<DropzoneProps> = ({
   dropzoneState,
-  setDropzoneState,
 }) => {
   const theme = useTheme();
   const { t: tHomePage } = useTranslation("homePage");
@@ -97,7 +96,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
     const newFile = FileUploaded.newFile(
       { username: "user" },
       URL.createObjectURL(file),
-      file,
+      file
     );
 
     const detectedType = await FileUploaded.detectType(newFile.getInfo().path);
@@ -108,34 +107,6 @@ const Dropzone: React.FC<DropzoneProps> = ({
     }
   }
 
-  /**
-   * Handles the image load event and updates the dropzone state based on the image width.
-   */
-  function handleImageLoad(event: ImageLoadEvent) {
-    const { width } = event.target;
-
-    const dropzoneElement = document.getElementById("dropzone");
-    if (!dropzoneElement) {
-      console.error("Dropzone element not found");
-      return;
-    }
-
-    const { width: parentWidth } = dropzoneElement.getBoundingClientRect();
-    const widthPercentage = (width / parentWidth) * 100;
-
-    if (widthPercentage >= 70) {
-      setDropzoneState((prevState) => ({
-        ...prevState,
-        fillPercentage: Math.max(widthPercentage, 100),
-      }));
-    } else {
-      setDropzoneState((prevState) => ({
-        ...prevState,
-        fillPercentage: 0,
-      }));
-    }
-  }
-
   return (
     <Box
       data-testid="dropzone"
@@ -151,12 +122,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
           component="img"
           src={dropzoneState.imageUrl}
           alt={tHomePage("altText.hoveredImageAlt")}
-          onLoad={handleImageLoad}
-          className={`absolute max-w-full max-h-full object-contain ${
-            dropzoneState.fillPercentage && dropzoneState.fillPercentage >= 90
-              ? "w-[80%] h-[80%]"
-              : "w-auto h-auto"
-          }`}
+          className="absolute max-w-full max-h-full object-contain w-auto h-auto "
         />
       ) : (
         <Box className="text-center">
@@ -167,13 +133,13 @@ const Dropzone: React.FC<DropzoneProps> = ({
               fontSize: "7rem",
             }}
           />
-          <Typography variant="h5" color={theme.palette.secondary.main}>
+          <Typography  className="select-none" variant="h5" color={theme.palette.secondary.main}>
             <b>{tHomePage("dropzone.dragDrop")}</b>
           </Typography>
-          <Typography variant="h5" color={theme.palette.secondary.main}>
+          <Typography className="select-none" variant="h5" color={theme.palette.secondary.main}>
             <b>{tHomePage("dropzone.or")}</b>
           </Typography>
-          <Button variant="contained" component="label" color="secondary">
+          <Button className="select-none" variant="contained" component="label" color="secondary">
             <b>{tHomePage("dropzone.browseFile")}</b>
             <input
               type="file"