Merge branch 'main' into 231-labelling-options

public/locales/en/confirmationPage.json

@@ -42,6 +42,10 @@
     "nutrients": "Nutrients",
     "recordKeeping": "Record Keeping"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Add a note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "English",

public/locales/fr/confirmationPage.json

@@ -42,6 +42,10 @@
     "nutrients": "Nutriments",
     "recordKeeping": "Tenue de registres"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Ajouter une note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "Anglais",

src/app/__tests__/HomePage.test.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react-hooks/rules-of-hooks */
+import FileUploaded from "@/classe/File";
 import useUploadedFilesStore from "@/stores/fileStore";
+import useLabelDataStore from "@/stores/labelDataStore";
+import { VERIFIED_LABEL_DATA } from "@/utils/client/constants";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useTranslation } from "react-i18next";
@@ -85,15 +88,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
-
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("should allow file uploads via drag and drop", async () => {
@@ -152,14 +155,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("should allow file upload via input and keep hover effect until delete button is clicked", async () => {
@@ -182,14 +186,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("The button submit should be visible when a file is uploaded", async () => {
@@ -248,7 +253,7 @@ describe("HomePage Component", () => {
     userEvent.upload(input, [file, file2]);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement =  await screen.findByTestId("file-element-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.
@@ -303,4 +308,22 @@ describe("HomePage Component", () => {
 
     expect(mockedRouterPush).toHaveBeenCalledWith("/label-data-validation");
   });
+
+  it("should clear uploaded files and reset label data on mount", () => {
+    useUploadedFilesStore.getState().addUploadedFile(
+      FileUploaded.newFile(
+        { username: "testUser" },
+        "/uploads/test1.png",
+        new File(["dummy content"], "test1.png", {
+          type: "image/png",
+        }),
+      ),
+    );
+    useLabelDataStore.getState().setLabelData(VERIFIED_LABEL_DATA);
+    expect(useUploadedFilesStore.getState().uploadedFiles.length).toBe(1);
+    expect(useLabelDataStore.getState().labelData).not.toBeNull();
+    render(<HomePage />);
+    expect(useUploadedFilesStore.getState().uploadedFiles.length).toBe(0);
+    expect(useLabelDataStore.getState().labelData).toBe(null);
+  });
 });

src/app/label-data-confirmation/__tests__/ConfirmationPage.test.tsx

@@ -1,14 +1,15 @@
 import FileUploaded from "@/classe/File";
 import useUploadedFilesStore from "@/stores/fileStore";
 import useLabelDataStore from "@/stores/labelDataStore";
-import { Quantity } from "@/types/types";
 import {
   VERIFIED_LABEL_DATA,
   VERIFIED_LABEL_DATA_WITH_ID,
 } from "@/utils/client/constants";
 import { fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
-import LabelDataConfirmationPage, { QuantityChips } from "../page";
+import LabelDataConfirmationPage from "../page";
+import { QuantityChips } from "@/components/QuantityChip";
+import { Quantity } from "@/types/types";
 
 const mockedRouterPush = jest.fn();
 jest.mock("next/navigation", () => ({
@@ -222,3 +223,43 @@ describe("QuantityChips", () => {
     expect(screen.queryByText("g")).not.toBeInTheDocument();
   });
 });
+
+describe("Notes Section Tests", () => {
+  it("should render the notes section with a textbox", () => {
+    render(<LabelDataConfirmationPage />);
+    const notesSection = screen.getByTestId("notes-section");
+    const notesTextbox = screen.getByTestId("notes-textbox");
+    expect(notesSection).toBeInTheDocument();
+    expect(notesTextbox).toBeInTheDocument();
+  });
+
+  it("should update the comment value when text is entered", () => {
+    useLabelDataStore.getState().setLabelData(VERIFIED_LABEL_DATA);
+    expect(useLabelDataStore.getState().labelData?.comment).toBe("Compliant with regulations.");
+    render(<LabelDataConfirmationPage />);
+    const notesTextbox = screen
+      .getByTestId("notes-textbox")
+      .querySelector("textarea");
+    expect(notesTextbox).toBeInTheDocument();
+    fireEvent.change(notesTextbox!, { target: { value: "New note" } });
+    expect(useLabelDataStore.getState().labelData?.comment).toBe("New note");
+    expect(notesTextbox).toHaveValue("New note");
+  });
+
+  it("should toggle the notes textbox disabled state when the checkbox is clicked", () => {
+    render(<LabelDataConfirmationPage />);
+    const notesTextbox = screen
+      .getByTestId("notes-textbox")
+      .querySelector("textarea");
+    const checkboxInput = screen
+      .getByTestId("confirmation-checkbox")
+      .querySelector("input");
+    expect(notesTextbox).toBeInTheDocument();
+    expect(checkboxInput).toBeInTheDocument();
+    expect(notesTextbox).not.toBeDisabled();
+    fireEvent.click(checkboxInput!);
+    expect(notesTextbox).toBeDisabled();
+    fireEvent.click(checkboxInput!);
+    expect(notesTextbox).not.toBeDisabled();
+  });
+});