Merge pull request #453 from ai-cfia/429-inspection-comment

issue #429: implement inspection notes

public/locales/en/confirmationPage.json

@@ -41,6 +41,10 @@
     "sectionTitle": "Ingredients",
     "nutrients": "Nutrients"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Add a note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "English",
@@ -56,9 +60,8 @@
     "confirmingButton": "Confirming",
     "editButton": "Edit Details"
   },
-  "expandRetractButton":{
+  "expandRetractButton": {
     "expandButton": "Hide image and show only label information.",
     "retractButton": "Show image and label information."
   }
-
 }

public/locales/fr/confirmationPage.json

@@ -41,6 +41,10 @@
     "sectionTitle": "Ingrédients",
     "nutrients": "Nutriments"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Ajouter une note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "Anglais",

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

@@ -8,6 +8,8 @@ import {
 import { fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
 import LabelDataConfirmationPage from "../page";
+import { QuantityChips } from "@/components/QuantityChip";
+import { Quantity } from "@/types/types";
 
 const mockedRouterPush = jest.fn();
 jest.mock("next/navigation", () => ({
@@ -205,3 +207,59 @@ describe("LabelDataConfirmationPage", () => {
     expect(bilingualTableContainers.length).toBe(4);
   });
 });
+
+describe("QuantityChips", () => {
+  it("renders valid quantities, filters out invalid values", () => {
+    const quantities: Quantity[] = [
+      { value: "5", unit: "kg" },
+      { value: "", unit: "g" },
+      { value: "0", unit: "kg" },
+    ];
+
+    render(<QuantityChips quantities={quantities} />);
+
+    expect(screen.getByText("5 kg")).toBeInTheDocument();
+    expect(screen.getByText("0 kg")).toBeInTheDocument();
+    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();
+  });
+});