Skip to content

fix message input tests #2547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 1 commit into from
Sep 25, 2026
+37 −28
Merged

fix message input tests #2547

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 37 additions & 28 deletions packages/lib/src/message-input/MessageInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<DxcMessageInput onChange={onChange} />);
const input = getByRole("textbox");

userEvent.type(input, "Hello");
await user.type(input, "Hello");

expect(onChange).toHaveBeenCalledTimes(5);
expect(onChange).toHaveBeenLastCalledWith({ value: "Hello" });
Expand All @@ -84,62 +85,66 @@ describe("Message Input component tests", () => {
const { getByRole } = render(<DxcMessageInput onBlur={onBlur} />);
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(<DxcMessageInput onButtonClick={onButtonClick} />);
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(<DxcMessageInput onButtonClick={onButtonClick} />);
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(<DxcMessageInput disabled onButtonClick={onButtonClick} />);
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(<DxcMessageInput isGenerating onButtonClick={onButtonClick} />);
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(<DxcMessageInput onButtonClick={onButtonClick} />);
const submitButton = getByLabelText("Send message");

userEvent.click(submitButton);
await user.click(submitButton);

expect(onButtonClick).toHaveBeenCalledWith({ type: "submit", value: "" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -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(<DxcMessageInput isGenerating onButtonClick={onButtonClick} />);
const stopButton = getByLabelText("Stop request");

userEvent.click(stopButton);
await user.click(stopButton);

expect(onButtonClick).toHaveBeenCalledWith({ type: "stop" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -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(<DxcMessageInput value="Initial" onChange={onChange} />);
const input = getByRole("textbox");

expect(input).toHaveValue("Initial");

userEvent.type(input, " text");
await user.type(input, " text");

rerender(<DxcMessageInput value="Initial text" onChange={onChange} />);
expect(input).toHaveValue("Initial text");
Expand Down Expand Up @@ -258,9 +265,9 @@ describe("Message Input component tests", () => {
const { getByRole } = render(<DxcMessageInput selectOptions={selectOptions} />);
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");
Expand All @@ -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(<DxcMessageInput disabled onButtonClick={onButtonClick} />);
const submitButton = getByLabelText("Send message");

userEvent.click(submitButton);
await user.click(submitButton);

expect(onButtonClick).not.toHaveBeenCalled();
});
Expand All @@ -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();
});
Expand All @@ -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(<DxcMessageInput onButtonClick={onButtonClick} />);
const submitButton = getByLabelText("Send message");

userEvent.click(submitButton);
await user.click(submitButton);
expect(onButtonClick).toHaveBeenCalledWith({ type: "submit", value: "" });
expect(onButtonClick).toHaveBeenCalledTimes(1);
});
Expand Down
Loading