add unit tests

app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx

@@ -13,7 +13,6 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
  const {
  // assistantName,
  chatTitle,
- description,
  isWaitingForResponse = false,
  onPromptChange,
  onSubmit,
@@ -47,15 +46,15 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
  <div className={styles.header}>
  <ChatTitle title={chatTitle} />
 
- {description ?? <Text size="body">{description}</Text>}
-
  <div className={styles.username}>
  <UserAvatar username={username} />
- <Text size="body">{username}</Text>
+ <Text data-testid="t--aichat-username" size="body">
+ {username}
+ </Text>
  </div>
  </div>
 
- <ul className={styles.thread}>
+ <ul className={styles.thread} data-testid="t--aichat-thread">
  {thread.map((message: ChatMessage) => (
  <ThreadMessage {...message} key={message.id} username={username} />
  ))}

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatTitle/ChatTitle.tsx

@@ -5,7 +5,11 @@ import type { ChatTitleProps } from "./types";
 
 export const ChatTitle = ({ className, title, ...rest }: ChatTitleProps) => {
  return (
- <div className={clsx(styles.root, className)} {...rest}>
+ <div
+ className={clsx(styles.root, className)}
+ {...rest}
+ data-testid="t--aichat-chat-title"
+ >
  <div className={styles.logo} />
  {title}
  </div>

app/client/packages/design-system/widgets/src/components/AIChat/src/types.ts

@@ -10,7 +10,7 @@ export interface AIChatProps {
  username: string;
  promptInputPlaceholder?: string;
  chatTitle?: string;
- description?: string;
+ chatDescription?: string;
  assistantName?: string;
  isWaitingForResponse?: boolean;
  onPromptChange: (prompt: string) => void;

app/client/packages/design-system/widgets/src/components/AIChat/tests/AIChat.test.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, within } from "@testing-library/react";
+import { faker } from "@faker-js/faker";
+
+import { AIChat, type AIChatProps } from "..";
+import userEvent from "@testing-library/user-event";
+
+const renderComponent = (props: Partial<AIChatProps> = {}) => {
+ const defaultProps: AIChatProps = {
+ username: "",
+ thread: [],
+ prompt: "",
+ onPromptChange: jest.fn(),
+ };
+
+ return render(<AIChat {...defaultProps} {...props} />);
+};
+
+describe("@appsmith/wds/AIChat", () => {
+ it("should render chat's title", () => {
+ const chatTitle = faker.lorem.words(2);
+
+ renderComponent({ chatTitle });
+
+ expect(screen.getByTestId("t--aichat-chat-title")).toHaveTextContent(
+ chatTitle,
+ );
+ });
+
+ it("should render username", () => {
+ const username = faker.name.firstName();
+
+ renderComponent({ username });
+
+ expect(screen.getByTestId("t--aichat-username")).toHaveTextContent(
+ username,
+ );
+ });
+
+ it("should render thread", () => {
+ const thread = [
+ {
+ id: faker.datatype.uuid(),
+ content: faker.lorem.paragraph(1),
+ isAssistant: false,
+ },
+ {
+ id: faker.datatype.uuid(),
+ content: faker.lorem.paragraph(2),
+ isAssistant: true,
+ },
+ ];
+
+ renderComponent({ thread });
+
+ const messages = within(
+ screen.getByTestId("t--aichat-thread"),
+ ).getAllByRole("listitem");
+
+ expect(messages).toHaveLength(thread.length);
+ expect(messages[0]).toHaveTextContent(thread[0].content);
+ expect(messages[1]).toHaveTextContent(thread[1].content);
+ });
+
+ it("should render prompt input placeholder", () => {
+ const promptInputPlaceholder = faker.lorem.words(3);
+
+ renderComponent({
+ promptInputPlaceholder,
+ });
+
+ expect(screen.getByRole("textbox")).toHaveAttribute(
+ "placeholder",
+ promptInputPlaceholder,
+ );
+ });
+
+ it("should render prompt input value", () => {
+ const prompt = faker.lorem.words(3);
+
+ renderComponent({
+ prompt,
+ });
+
+ expect(screen.getByRole("textbox")).toHaveValue(prompt);
+ });
+
+ it("should trigger user's prompt", async () => {
+ const onPromptChange = jest.fn();
+
+ renderComponent({
+ onPromptChange,
+ });
+
+ await userEvent.type(screen.getByRole("textbox"), "A");
+
+ expect(onPromptChange).toHaveBeenCalledWith("A");
+ });
+
+ it("should submit user's prompt", async () => {
+ const onSubmit = jest.fn();
+
+ renderComponent({
+ prompt: "ABCD",
+ onSubmit,
+ });
+
+ await userEvent.click(screen.getByRole("button", { name: "Send" }));
+
+ expect(onSubmit).toHaveBeenCalled();
+ });
+});

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx

@@ -198,7 +198,6 @@ class WDSAIChatWidget extends BaseWidget<WDSAIChatWidgetProps, State> {
  <AIChat
  assistantName={this.props.assistantName}
  chatTitle={this.props.chatTitle}
- description={this.props.description}
  isWaitingForResponse={this.state.isWaitingForResponse}
  onPromptChange={this.handlePromptChange}
  onSubmit={this.handleMessageSubmit}

app/client/test/__mocks__/reactMarkdown.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 jest.mock("react-markdown", () => (props: { children: unknown }) => {
  return <>{props.children}</>;
 });