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(''); +});