diff --git a/packages/lib/src/message-input/MessageInput.test.tsx b/packages/lib/src/message-input/MessageInput.test.tsx
index 10284a204..c56e57a45 100644
--- a/packages/lib/src/message-input/MessageInput.test.tsx
+++ b/packages/lib/src/message-input/MessageInput.test.tsx
@@ -68,12 +68,13 @@ describe("Message Input component tests", () => {
expect(getByText("This is an error")).toBeInTheDocument();
});
- test("calls onChange when user types", () => {
+ test("calls onChange when user types", async () => {
+ const user = userEvent.setup();
const onChange = jest.fn();
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.type(input, "Hello");
+ await user.type(input, "Hello");
expect(onChange).toHaveBeenCalledTimes(5);
expect(onChange).toHaveBeenLastCalledWith({ value: "Hello" });
@@ -84,62 +85,66 @@ describe("Message Input component tests", () => {
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.click(input);
- userEvent.type(input, "Test");
- userEvent.tab();
+ fireEvent.change(input, { target: { value: "Test" } });
+ fireEvent.blur(input);
expect(onBlur).toHaveBeenCalledWith({ value: "Test" });
});
- test("calls onButtonClick when Enter key is pressed", () => {
+ test("calls onButtonClick when Enter key is pressed", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.click(input);
- userEvent.type(input, "Test message{Enter}");
+ await user.click(input);
+ await user.type(input, "Test message{Enter}");
expect(onButtonClick).toHaveBeenCalledWith({ type: "submit", value: "Test message" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
});
- test("does not call onButtonClick when Shift+Enter is pressed", () => {
+ test("does not call onButtonClick when Shift+Enter is pressed", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.click(input);
- userEvent.type(input, "Line 1{Shift>}{Enter}{/Shift}Line 2");
+ await user.click(input);
+ await user.type(input, "Line 1{Shift>}{Enter}{/Shift}Line 2");
expect(onButtonClick).not.toHaveBeenCalled();
});
- test("does not call onButtonClick when Enter is pressed and component is disabled", () => {
+ test("does not call onButtonClick when Enter is pressed and component is disabled", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.type(input, "Test message{Enter}");
+ await user.type(input, "Test message{Enter}");
expect(onButtonClick).not.toHaveBeenCalled();
});
- test("does not call onButtonClick when Enter is pressed and isGenerating is true", () => {
+ test("does not call onButtonClick when Enter is pressed and isGenerating is true", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByRole } = render();
const input = getByRole("textbox");
- userEvent.type(input, "Test message{Enter}");
+ await user.type(input, "Test message{Enter}");
expect(onButtonClick).not.toHaveBeenCalled();
});
- test("calls onButtonClick when submit button is clicked", () => {
+ test("calls onButtonClick when submit button is clicked", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByLabelText } = render();
const submitButton = getByLabelText("Send message");
- userEvent.click(submitButton);
+ await user.click(submitButton);
expect(onButtonClick).toHaveBeenCalledWith({ type: "submit", value: "" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
@@ -167,12 +172,13 @@ describe("Message Input component tests", () => {
expect(stopButton).toBeInTheDocument();
});
- test("calls onButtonClick with 'stop' when stop button is clicked", () => {
+ test("calls onButtonClick with 'stop' when stop button is clicked", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByLabelText } = render();
const stopButton = getByLabelText("Stop request");
- userEvent.click(stopButton);
+ await user.click(stopButton);
expect(onButtonClick).toHaveBeenCalledWith({ type: "stop" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
@@ -218,14 +224,15 @@ describe("Message Input component tests", () => {
expect(input).toHaveAttribute("maxLength", "10");
});
- test("works as controlled component", () => {
+ test("works as controlled component", async () => {
+ const user = userEvent.setup();
const onChange = jest.fn();
const { getByRole, rerender } = render();
const input = getByRole("textbox");
expect(input).toHaveValue("Initial");
- userEvent.type(input, " text");
+ await user.type(input, " text");
rerender();
expect(input).toHaveValue("Initial text");
@@ -258,9 +265,9 @@ describe("Message Input component tests", () => {
const { getByRole } = render();
const select = getByRole("combobox");
- userEvent.click(select);
+ fireEvent.click(select);
const option1 = getByRole("option", { name: "Option 1" });
- userEvent.click(option1);
+ fireEvent.click(option1);
expect(onSelect).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith("option1");
@@ -271,12 +278,13 @@ describe("Message Input component tests", () => {
expect(queryByText("This is an error")).not.toBeInTheDocument();
});
- test("does not call onButtonClick when disabled", () => {
+ test("does not call onButtonClick when disabled", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByLabelText } = render();
const submitButton = getByLabelText("Send message");
- userEvent.click(submitButton);
+ await user.click(submitButton);
expect(onButtonClick).not.toHaveBeenCalled();
});
@@ -295,7 +303,7 @@ describe("Message Input component tests", () => {
const dropdown = getByRole("button", { name: "Show options" });
// Simulate selecting the option
- userEvent.click(dropdown);
+ fireEvent.click(dropdown);
expect(dropdown).toBeInTheDocument();
});
@@ -318,12 +326,13 @@ describe("Message Input component tests", () => {
expect(callbackFile).toHaveBeenCalled();
});
- test("calls onButtonClick with submit when submit button is clicked", () => {
+ test("calls onButtonClick with submit when submit button is clicked", async () => {
+ const user = userEvent.setup();
const onButtonClick = jest.fn();
const { getByLabelText } = render();
const submitButton = getByLabelText("Send message");
- userEvent.click(submitButton);
+ await user.click(submitButton);
expect(onButtonClick).toHaveBeenCalledWith({ type: "submit", value: "" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
});