chore(compass-assistant): fix assistant tests

gagik · gagik · commit 76c6025c23f9 · 2025-08-26T13:26:03.000+02:00
diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx
@@ -1,12 +1,24 @@
 import React from 'react';
-import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '@mongodb-js/testing-library-compass';
 import { AssistantChat } from './assistant-chat';
 import { expect } from 'chai';
 import { createMockChat } from '../test/utils';
 import type { AssistantMessage } from './compass-assistant-provider';
 
-// TODO: some internal logic in lg-chat breaks all these tests, re-enable the tests
-describe.skip('AssistantChat', function () {
+describe('AssistantChat', function () {
+  // Mock scrollTo method for DOM elements to prevent test failures
+  before(function () {
+    if (!Element.prototype.scrollTo) {
+      Element.prototype.scrollTo = function () {
+        // No-op implementation for testing
+      };
+    }
+  });
   const mockMessages: AssistantMessage[] = [
     {
       id: 'user',
@@ -36,8 +48,10 @@ describe.skip('AssistantChat', function () {
   it('renders input field and send button', function () {
     renderWithChat([]);
 
-    const inputField = screen.getByTestId('assistant-chat-input');
-    const sendButton = screen.getByTestId('assistant-chat-send-button');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
+    const sendButton = screen.getByLabelText('Send message');
 
     expect(inputField).to.exist;
     expect(sendButton).to.exist;
@@ -47,9 +61,9 @@ describe.skip('AssistantChat', function () {
     renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const inputField = screen.getByTestId(
-      'assistant-chat-input'
-    ) as HTMLInputElement;
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    ) as HTMLTextAreaElement;
 
     userEvent.type(inputField, 'What is MongoDB?');
 
@@ -60,58 +74,67 @@ describe.skip('AssistantChat', function () {
     renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const sendButton = screen.getByTestId(
-      'assistant-chat-send-button'
+    const sendButton = screen.getByLabelText(
+      'Send message'
     ) as HTMLButtonElement;
 
-    expect(sendButton.disabled).to.be.true;
+    expect(sendButton.getAttribute('aria-disabled')).to.equal('true');
   });
 
   it('send button is enabled when input has text', function () {
     renderWithChat([]);
 
-    const inputField = screen.getByTestId('assistant-chat-input');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const sendButton = screen.getByTestId(
-      'assistant-chat-send-button'
+    const sendButton = screen.getByLabelText(
+      'Send message'
     ) as HTMLButtonElement;
 
     userEvent.type(inputField, 'What is MongoDB?');
 
     expect(sendButton.disabled).to.be.false;
   });
 
-  it('send button is disabled for whitespace-only input', function () {
+  // Not currently supported by the LeafyGreen Input Bar
+  it.skip('send button is disabled for whitespace-only input', async function () {
     renderWithChat([]);
 
-    const inputField = screen.getByTestId('assistant-chat-input');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const sendButton = screen.getByTestId(
-      'assistant-chat-send-button'
+    const sendButton = screen.getByLabelText(
+      'Send message'
     ) as HTMLButtonElement;
 
     userEvent.type(inputField, '   ');
 
-    expect(sendButton.disabled).to.be.true;
+    await waitFor(() => {
+      expect(sendButton.getAttribute('aria-disabled')).to.equal('true');
+    });
   });
 
   it('displays messages in the chat feed', function () {
     renderWithChat(mockMessages);
 
     expect(screen.getByTestId('assistant-message-user')).to.exist;
     expect(screen.getByTestId('assistant-message-assistant')).to.exist;
-    expect(screen.getByTestId('assistant-message-user')).to.have.text(
+    expect(screen.getByTestId('assistant-message-user')).to.contain.text(
       'Hello, MongoDB Assistant!'
     );
-    expect(screen.getByTestId('assistant-message-assistant')).to.have.text(
+    expect(screen.getByTestId('assistant-message-assistant')).to.contain.text(
       'Hello! How can I help you with MongoDB today?'
     );
   });
 
   it('calls sendMessage when form is submitted', function () {
     const { chat } = renderWithChat([]);
-    const inputField = screen.getByTestId('assistant-chat-input');
-    const sendButton = screen.getByTestId('assistant-chat-send-button');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
+    const sendButton = screen.getByLabelText('Send message');
 
     userEvent.type(inputField, 'What is aggregation?');
     userEvent.click(sendButton);
@@ -124,24 +147,26 @@ describe.skip('AssistantChat', function () {
     renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const inputField = screen.getByTestId(
-      'assistant-chat-input'
-    ) as HTMLInputElement;
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    ) as HTMLTextAreaElement;
 
     userEvent.type(inputField, 'Test message');
     expect(inputField.value).to.equal('Test message');
 
-    userEvent.click(screen.getByTestId('assistant-chat-send-button'));
+    userEvent.click(screen.getByLabelText('Send message'));
     expect(inputField.value).to.equal('');
   });
 
   it('trims whitespace from input before sending', function () {
     const { chat } = renderWithChat([]);
 
-    const inputField = screen.getByTestId('assistant-chat-input');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
 
     userEvent.type(inputField, '  What is sharding?  ');
-    userEvent.click(screen.getByTestId('assistant-chat-send-button'));
+    userEvent.click(screen.getByLabelText('Send message'));
 
     expect(chat.sendMessage.calledWith({ text: 'What is sharding?' })).to.be
       .true;
@@ -150,8 +175,10 @@ describe.skip('AssistantChat', function () {
   it('does not call sendMessage when input is empty or whitespace-only', function () {
     const { chat } = renderWithChat([]);
 
-    const inputField = screen.getByTestId('assistant-chat-input');
-    const chatForm = screen.getByTestId('assistant-chat-form');
+    const inputField = screen.getByPlaceholderText(
+      'Ask MongoDB Assistant a question'
+    );
+    const chatForm = screen.getByTestId('assistant-chat-input');
 
     // Test empty input
     userEvent.click(chatForm);
@@ -169,16 +196,12 @@ describe.skip('AssistantChat', function () {
     const userMessage = screen.getByTestId('assistant-message-user');
     const assistantMessage = screen.getByTestId('assistant-message-assistant');
 
-    // User messages should have different background color than assistant messages
+    // User messages should have different class names than assistant messages
     expect(userMessage).to.exist;
     expect(assistantMessage).to.exist;
 
-    const userStyle = window.getComputedStyle(userMessage);
-    const assistantStyle = window.getComputedStyle(assistantMessage);
-
-    expect(userStyle.backgroundColor).to.not.equal(
-      assistantStyle.backgroundColor
-    );
+    // Check that they have different class names (indicating different styling)
+    expect(userMessage.className).to.not.equal(assistantMessage.className);
   });
 
   it('handles messages with multiple text parts', function () {
diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx
@@ -8,6 +8,8 @@ import {
   LgChatMessage,
   LgChatMessageFeed,
   LgChatInputBar,
+  spacing,
+  css,
 } from '@mongodb-js/compass-components';
 
 const { ChatWindow } = LgChatChatWindow;
@@ -20,6 +22,20 @@ interface AssistantChatProps {
   chat: Chat<AssistantMessage>;
 }
 
+// TODO(COMPASS-9751): These are temporary patches to make the Assistant chat take the entire
+// width and height of the drawer since Leafygreen doesn't support this yet.
+const assistantChatFixesStyles = css({
+  // Negative margin to patch the padding of the drawer.
+  margin: -spacing[400],
+  '> div, > div > div, > div > div > div, > div > div > div > div': {
+    height: '100%',
+  },
+});
+const messageFeedFixesStyles = css({ height: '100%' });
+const chatWindowFixesStyles = css({
+  height: '100%',
+});
+
 export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   chat,
 }) => {
@@ -42,19 +58,30 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
 
   const handleMessageSend = useCallback(
     (messageBody: string) => {
-      void sendMessage({ text: messageBody });
+      const trimmedMessageBody = messageBody.trim();
+      if (trimmedMessageBody) {
+        void sendMessage({ text: trimmedMessageBody });
+      }
     },
     [sendMessage]
   );
 
   return (
-    <div data-testid="assistant-chat" style={{ height: '100%', width: '100%' }}>
+    <div
+      data-testid="assistant-chat"
+      className={assistantChatFixesStyles}
+      style={{ height: '100%', width: '100%' }}
+    >
       <LeafyGreenChatProvider variant={Variant.Compact}>
-        <ChatWindow title="MongoDB Assistant">
-          <MessageFeed data-testid="assistant-chat-messages">
+        <ChatWindow title="MongoDB Assistant" className={chatWindowFixesStyles}>
+          <MessageFeed
+            data-testid="assistant-chat-messages"
+            className={messageFeedFixesStyles}
+          >
             {lgMessages.map((messageFields) => (
               <Message
                 key={messageFields.id}
+                sourceType="markdown"
                 {...messageFields}
                 data-testid={`assistant-message-${messageFields.id}`}
               />
diff --git a/packages/compass-assistant/src/compass-assistant-provider.spec.tsx b/packages/compass-assistant/src/compass-assistant-provider.spec.tsx
@@ -84,8 +84,7 @@ describe('AssistantProvider', function () {
     );
   });
 
-  // TODO: some internal logic in lg-chat breaks all these tests, re-enable the tests
-  describe.skip('with existing chat instance', function () {
+  describe('with existing chat instance', function () {
     before(function () {
       // TODO(COMPASS-9618): skip in electron runtime for now, drawer has issues rendering
       if ((process as any).type === 'renderer') {
@@ -138,8 +137,10 @@ describe('AssistantProvider', function () {
 
       await renderOpenAssistantDrawer(mockChat);
 
-      const input = screen.getByTestId('assistant-chat-input');
-      const sendButton = screen.getByTestId('assistant-chat-send-button');
+      const input = screen.getByPlaceholderText(
+        'Ask MongoDB Assistant a question'
+      );
+      const sendButton = screen.getByLabelText('Send message');
 
       userEvent.type(input, 'Hello assistant');
       userEvent.click(sendButton);
@@ -176,10 +177,10 @@ describe('AssistantProvider', function () {
       await renderOpenAssistantDrawer(mockChat);
 
       userEvent.type(
-        screen.getByTestId('assistant-chat-input'),
+        screen.getByPlaceholderText('Ask MongoDB Assistant a question'),
         'Hello assistant!'
       );
-      userEvent.click(screen.getByTestId('assistant-chat-send-button'));
+      userEvent.click(screen.getByLabelText('Send message'));
 
       expect(sendMessageSpy.calledOnce).to.be.true;
       expect(sendMessageSpy.firstCall.args[0]).to.deep.include({
