TestChatWithImages

[ioannastantzou]

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();
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();
const elt = getByText(searchMsg);
expect(elt.parentElement?.parentElement?.parentElement?.parentElement).toHaveClass("taipy-chat");
});
it("can display an avatar", async () => {
const { getByAltText } = render();
const elt = getByAltText("Fred.png");
expect(elt.tagName).toBe("IMG");
});
it("is disabled", async () => {
const { getAllByRole } = render();
const elts = getAllByRole("button");
elts.forEach((elt) => expect(elt).toHaveClass("Mui-disabled"));
});
it("is enabled by default", async () => {
const { getAllByRole } = render();
const elts = getAllByRole("button");
elts.forEach((elt) => expect(elt).not.toHaveClass("Mui-disabled"));
});
it("is enabled by active", async () => {
const { getAllByRole } = render();
const elts = getAllByRole("button");
elts.forEach((elt) => expect(elt).not.toHaveClass("Mui-disabled"));
});
it("can hide input", async () => {
render();
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 }}>

</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 }}>

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

});
});

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.