diff --git a/src/components/ChatBox/index.jsx b/src/components/ChatBox/index.jsx
index 1e20512b..6d5adc16 100644
--- a/src/components/ChatBox/index.jsx
+++ b/src/components/ChatBox/index.jsx
@@ -15,7 +15,7 @@ const ChatBox = ({ chatboxContainerRef }) => {
{messageList.filter((m) => (m.timestamp.date < today.date)).map(({ role, content, timestamp }) => (
))}
-
+
{messageList.filter((m) => (m.timestamp.date === today.date)).map(({ role, content, timestamp }) => (
))}
diff --git a/src/widgets/Xpert.test.jsx b/src/widgets/Xpert.test.jsx
index 532669f3..efd62b23 100644
--- a/src/widgets/Xpert.test.jsx
+++ b/src/widgets/Xpert.test.jsx
@@ -348,3 +348,51 @@ test('survey monkey survey should appear after closing sidebar', async () => {
expect(survey).toBeCalledTimes(1);
survey.mockRestore();
});
+// todo: test that today divider doesn't appear with no messages
+test('message divider does not appear when no messages', async () => {
+ const user = userEvent.setup();
+
+ render(, { preloadedState: initialState });
+
+ // wait for button to appear
+ await screen.findByTestId('toggle-button');
+
+ await user.click(screen.queryByTestId('toggle-button'));
+
+ // assert that UI elements present in the sidebar are visible
+ expect(screen.getByRole('heading', { name: 'Hi, I\'m Xpert!' })).toBeVisible();
+ expect(screen.getByRole('textbox')).toBeVisible();
+ expect(screen.getByRole('button', { name: 'submit' })).toBeVisible();
+ expect(screen.getByTestId('close-button')).toBeVisible();
+
+ expect(screen.getByTestId('today-divider')).toBeVisible();
+});
+// todo: test that today divider doesn't appear when messages all from today
+// todo: test that today divider appears when message from before today
+// todo: test that today divider correctly divides messages between today and yesterday
+test('addt appears as message in the sidebar', async () => {
+ const user = userEvent.setup();
+ const userMessage = 'Hello, Xpert!';
+
+ render(, { preloadedState: initialState });
+
+ // wait for button to appear
+ await screen.findByTestId('toggle-button');
+
+ await user.click(screen.queryByTestId('toggle-button'));
+
+ // type the user message
+ const input = screen.getByRole('textbox');
+ await user.type(input, userMessage);
+
+ // because we use a controlled input element, assert that user's message appears in the input element
+ expect(input).toHaveValue(userMessage);
+
+ await user.click(screen.getByRole('button', { name: 'submit' }));
+
+ // assert that UI elements in the sidebar are in the DOM
+ expect(screen.getByText(userMessage)).toBeInTheDocument();
+
+ // because we use a controlled input element, assert that the input element is cleared
+ expect(input).toHaveValue('');
+});