test: add tests

src/components/ChatBox/index.jsx

@@ -15,7 +15,7 @@ const ChatBox = ({ chatboxContainerRef }) => {
       {messageList.filter((m) => (m.timestamp.date < today.date)).map(({ role, content, timestamp }) => (
         <Message key={timestamp.toString()} variant={role} message={content} />
       ))}
-      <MessageDivider text="Today" />
+      <MessageDivider text="Today" data-testid="today-divider" />
       {messageList.filter((m) => (m.timestamp.date === today.date)).map(({ role, content, timestamp }) => (
         <Message key={timestamp.toString()} variant={role} message={content} />
       ))}

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(<Xpert courseId={courseId} contentToolsEnabled={false} unitId={unitId} />, { 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(<Xpert courseId={courseId} contentToolsEnabled={false} unitId={unitId} />, { 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('');
+});