From 347848023bf72a80d822b737bac763c140e7e027 Mon Sep 17 00:00:00 2001
From: Varsha Menon <varshamenon04@gmail.com>
Date: Wed, 20 Nov 2024 22:20:10 -0500
Subject: [PATCH] test: update tests

---
 src/components/ChatBox/index.jsx      |  10 ++-
 src/components/ChatBox/index.test.jsx | 100 ++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ChatBox/index.test.jsx

diff --git a/src/components/ChatBox/index.jsx b/src/components/ChatBox/index.jsx
index 1e20512b..92a9736e 100644
--- a/src/components/ChatBox/index.jsx
+++ b/src/components/ChatBox/index.jsx
@@ -9,14 +9,18 @@ import MessageDivider from '../MessageDivider';
 const ChatBox = ({ chatboxContainerRef }) => {
   const { messageList, apiIsLoading } = useSelector(state => state.learningAssistant);
   const today = new Date();
+  const messagesBeforeToday = messageList.filter((m) => (m.timestamp.date < today.date));
+  const messagesToday = messageList.filter((m) => (m.timestamp.date === today.date));
 
   return (
     <div ref={chatboxContainerRef} className="flex-grow-1 scroller d-flex flex-column pb-4">
-      {messageList.filter((m) => (m.timestamp.date < today.date)).map(({ role, content, timestamp }) => (
+      {messagesBeforeToday.map(({ role, content, timestamp }) => (
         <Message key={timestamp.toString()} variant={role} message={content} />
       ))}
-      <MessageDivider text="Today" />
-      {messageList.filter((m) => (m.timestamp.date === today.date)).map(({ role, content, timestamp }) => (
+      {(messageList.length !== 0 && messagesBeforeToday.length !== 0) && (
+      <MessageDivider text="Today" data-testid="today-divider" />
+      )}
+      {messagesToday.map(({ role, content, timestamp }) => (
         <Message key={timestamp.toString()} variant={role} message={content} />
       ))}
       {apiIsLoading && (
diff --git a/src/components/ChatBox/index.test.jsx b/src/components/ChatBox/index.test.jsx
new file mode 100644
index 00000000..3578c9c4
--- /dev/null
+++ b/src/components/ChatBox/index.test.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import {screen, act, waitFor} from '@testing-library/react';
+
+import { render as renderComponent } from '../../utils/utils.test';
+import { initialState } from '../../data/slice';
+
+import ChatBox from '.';
+
+const mockedAuthenticatedUser = { userId: 123 };
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: () => mockedAuthenticatedUser,
+}));
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+const defaultProps = {
+  chatboxContainerRef: jest.fn(),
+};
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const unitId = 'block-v1:edX+DemoX+Demo_Course+type@unit+block@unit1';
+
+const render = async (props = {}, sliceState = {}) => {
+  const componentProps = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const initState = {
+    preloadedState: {
+      learningAssistant: {
+        ...initialState,
+        ...sliceState,
+      },
+    },
+  };
+  return act(async () => renderComponent(
+    <ChatBox {...componentProps} />,
+    initState,
+  ));
+};
+
+describe('<ChatBox />', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  it('message divider does not appear when no messages', () => {
+    const messageList = [];
+    const sliceState = {
+      messageList,
+    };
+    render(undefined, sliceState);
+
+    expect(screen.getByText('Today')).not.toBeInTheDocument();
+  });
+
+  it('message divider does not appear when all messages from today', () => {
+    const messageList = [
+      { role: 'user', content: 'hi', timestamp: +Date.now() },
+      { role: 'user', content: 'hi', timestamp: +Date.now() },
+    ];
+    const sliceState = {
+      messageList,
+    };
+    render(undefined, sliceState);
+
+    expect(screen.getByText('Today')).not.toBeInTheDocument();
+  });
+
+  it('message divider shows when all messages from before today', () => {
+    const messageList = [
+      { role: 'user', content: 'hi', timestamp: +Date.now() - 2 },
+      { role: 'user', content: 'hi', timestamp: +Date.now() - 2 },
+    ];
+    const sliceState = {
+      messageList,
+    };
+    render(undefined, sliceState);
+
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  //  todo: correctly divides old and new messages, check order
+  it('message divider shows when all messages from before today', () => {
+    const messageList = [
+      { role: 'user', content: 'hi yesterday', timestamp: +Date.now() - 1 },
+      { role: 'user', content: 'hi today', timestamp: +Date.now() },
+    ];
+    const sliceState = {
+      messageList,
+    };
+    render(undefined, sliceState);
+
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+});