Create testchatwithimages

The added lines of code test simulates a user interaction when clicking sendbutton and after with using gettAllByTestId("file-input") that creates a mock image file.

testchatwithimages

@@ -0,0 +1,135 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import Chat from "./Chat";
+import { INITIAL_STATE, TaipyState } from "../../context/taipyReducers";
+import { TaipyContext } from "../../context/taipyContext";
+import { stringIcon } from "../../utils/icon";
+import { TableValueType } from "./tableUtils";
+
+const valueKey = "Infinite-Entity--asc";
+const messages: TableValueType = {
+    [valueKey]: {
+        data: [
+    ["1", "msg 1", "Fred"],
+    ["2", "msg From Another unknown User", "Fredo"],
+    ["3", "This from the sender User", "taipy"],
+    ["4", "And from another known one", "Fredi"],
+], rowcount: 4, start: 0}};
+const user1: [string, stringIcon] = ["Fred", { path: "/images/favicon.png", text: "Fred.png" }];
+const user2: [string, stringIcon] = ["Fredi", { path: "/images/fred.png", text: "Fredi.png" }];
+const users = [user1, user2];
+const id = "chatId";
+const updateVarName = "updateVar";
+const searchMsg = messages[valueKey].data[0][1];
+
+describe("Chat Component", () => {
+    it("renders", async () => {
+        const { getByText, getByLabelText } = render(<Chat messages={messages} defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elt = getByText(searchMsg);
+        expect(elt.tagName).toBe("DIV");
+        const input = getByLabelText("message (taipy)");
+        expect(input.tagName).toBe("INPUT");
+    });
+    it("uses the class", async () => {
+        const { getByText } = render(<Chat messages={messages} className="taipy-chat" defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elt = getByText(searchMsg);
+        expect(elt.parentElement?.parentElement?.parentElement?.parentElement).toHaveClass("taipy-chat");
+    });
+    it("can display an avatar", async () => {
+        const { getByAltText } = render(<Chat messages={messages} users={users} defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elt = getByAltText("Fred.png");
+        expect(elt.tagName).toBe("IMG");
+    });
+    it("is disabled", async () => {
+        const { getAllByRole } = render(<Chat messages={messages} active={false} defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elts = getAllByRole("button");
+        elts.forEach((elt) => expect(elt).toHaveClass("Mui-disabled"));
+    });
+    it("is enabled by default", async () => {
+        const { getAllByRole } = render(<Chat messages={messages} defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elts = getAllByRole("button");
+        elts.forEach((elt) => expect(elt).not.toHaveClass("Mui-disabled"));
+    });
+    it("is enabled by active", async () => {
+        const { getAllByRole } = render(<Chat messages={messages} active={true} defaultKey={valueKey} id={id} updateVarName={updateVarName}  />);
+        const elts = getAllByRole("button");
+        elts.forEach((elt) => expect(elt).not.toHaveClass("Mui-disabled"));
+    });
+    it("can hide input", async () => {
+        render(<Chat messages={messages} withInput={false} className="taipy-chat" defaultKey={valueKey} id={id} updateVarName={updateVarName}/>);
+        const elt = document.querySelector(".taipy-chat input");
+        expect(elt).toBeNull();
+    });
+    it("dispatch a well formed message by Keyboard", async () => {
+        const dispatch = jest.fn();
+        const state: TaipyState = INITIAL_STATE;
+        const { getByLabelText } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Chat messages={messages} updateVarName="varname" defaultKey={valueKey} id={id}   />
+            </TaipyContext.Provider>
+        );
+        const elt = getByLabelText("message (taipy)");
+        await userEvent.click(elt);
+        await userEvent.keyboard("new message{Enter}");
+        expect(dispatch).toHaveBeenCalledWith({
+            type: "SEND_ACTION_ACTION",
+            name: "",
+            context: undefined,
+            payload: {
+                action: undefined,
+                args: ["Enter", "varname", "new message", "taipy"],
+            },
+        });
+    });
+    it("dispatch a well formed message by button", async () => {
+        const dispatch = jest.fn();
+        const state: TaipyState = INITIAL_STATE;
+        const { getByLabelText, getByRole , getAllByTestId} = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Chat messages={messages} updateVarName="varname" defaultKey={valueKey} id={id}  />
+            </TaipyContext.Provider>
+        );
+        const messageInput = getByLabelText("message (taipy)");
+    await userEvent.click(messageInput);
+    await userEvent.keyboard("new message");
+
+    // Trigger the send action for text message
+    const sendButton = getByRole("button", { name: "Send" });
+    await userEvent.click(sendButton);
+
+    // Simulate selecting an image file
+    const fileInput = getAllByTestId("file-input");
+    const imageFile = new File(["(⌐□_□)"], "random.png", { type: "image/png" });
+    Object.defineProperty(fileInput, "files", {
+        value: [imageFile],
+    });
+    await userEvent.upload(fileInput[0], imageFile);
+
+    // Trigger the send action for the image
+    const sendImageButton = getAllByTestId("send-image-button")[0];
+    await userEvent.click(sendImageButton);
+
+    // Assert dispatch is called with the correct arguments for both text message and image
+    expect(dispatch).toHaveBeenCalledWith({
+        type: "SEND_ACTION_ACTION",
+        name: "",
+        context: undefined,
+        payload: {
+            action: undefined,
+            args: ["click", "varname", "new message", "taipy"],
+        },
+    });
+    expect(dispatch).toHaveBeenCalledWith({
+        type: "SEND_ACTION_ACTION",
+        name: "",
+        context: undefined,
+        payload: {
+            action: undefined,
+            args: ["click", "varname", imageFile, "taipy"],
+        },
+    });
+  });
+});