testchatwithimages

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"],
        },
    });
  });
});