fix: Flaky test and auto-scroll behavior

Author: rkaraivanov

src/components/chat/chat.spec.ts

@@ -1,6 +1,6 @@
-import { elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
+import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html, nothing } from 'lit';
-import { spy, stub } from 'sinon';
+import { spy, stub, useFakeTimers } from 'sinon';
 import type IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
@@ -882,22 +882,25 @@ describe('Chat', () => {
     });
 
     it('emits igcTypingChange', async () => {
+      const clock = useFakeTimers({ now: 0, toFake: ['Date', 'setTimeout'] });
+
       const eventSpy = spy(chat, 'emitEvent');
       const textArea = getChatDOM(chat).input.textarea;
 
-      chat.options = { stopTypingDelay: 100 };
+      chat.options = { stopTypingDelay: 2500 };
       simulateKeyboard(textArea, 'a');
       await elementUpdated(chat);
 
       expect(eventSpy).calledWith('igcTypingChange');
       expect(eventSpy.firstCall.args[1]?.detail).to.eql({ isTyping: true });
 
-      eventSpy.resetHistory();
-
-      await waitUntil(() => eventSpy.calledWith('igcTypingChange'));
+      clock.setSystemTime(2501);
+      await clock.runAllAsync();
 
       expect(eventSpy).calledWith('igcTypingChange');
-      expect(eventSpy.firstCall.args[1]?.detail).to.eql({ isTyping: false });
+      expect(eventSpy.lastCall.args[1]?.detail).to.eql({ isTyping: false });
+
+      clock.restore();
     });
 
     it('emits igcInputFocus', async () => {

src/components/chat/chat.ts

@@ -237,6 +237,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @query('[part="suggestions-container"]')
   private readonly _suggestionsContainer?: HTMLElement;
 
+  @query('[part="message-area-container"]', true)
+  private readonly _scrollContainer!: HTMLElement;
+
   private _updateContext(): void {
     this._context.setValue(this._state, true);
   }
@@ -347,15 +350,15 @@ export default class IgcChatComponent extends EventEmitterMixin<
       return;
     }
 
-    const lastMessage = this.renderRoot
-      .querySelectorAll(IgcChatMessageComponent.tagName)
-      .item(this.messages.length - 1);
-
-    const scrollTarget =
-      this._typingIndicator ?? this._suggestionsContainer ?? lastMessage;
+    const current = this._scrollContainer.scrollTop;
 
     requestAnimationFrame(() => {
-      scrollTarget?.scrollIntoView({ block: 'end', inline: 'end' });
+      const scrollHeight = this._scrollContainer.scrollHeight;
+      if (current < scrollHeight) {
+        this._scrollContainer.scrollBy({
+          top: Math.abs(scrollHeight - current),
+        });
+      }
     });
   }
 

stories/chat.stories.ts

@@ -116,8 +116,6 @@ And some sample html:
 
 const userMessages: any[] = [];
 
-let isResponseSent: boolean;
-
 const _messageAuthorTemplate = ({ message }: ChatMessageRenderContext) => {
   return message.sender !== 'user'
     ? html`
@@ -134,7 +132,7 @@ const _messageAuthorTemplate = ({ message }: ChatMessageRenderContext) => {
     : nothing;
 };
 const _messageActionsTemplate = ({ message }: ChatMessageRenderContext) => {
-  return message.sender !== 'user' && message.text.trim() && isResponseSent
+  return message.sender !== 'user' && message.text.trim()
     ? html`
         <div>
           <igc-icon-button
@@ -185,7 +183,7 @@ function handleCustomSendClick(chat: IgcChatComponent) {
   chat.draftMessage = { text: '', attachments: [] };
 }
 
-function handleMessageSend(event: CustomEvent<IgcChatMessage>): void {
+async function handleMessageSend(event: CustomEvent<IgcChatMessage>) {
   const chat = event.target as IgcChatComponent;
   const message = event.detail;
 
@@ -205,29 +203,31 @@ function handleMessageSend(event: CustomEvent<IgcChatMessage>): void {
         ]
       : [];
 
-  isResponseSent = false;
-  setTimeout(async () => {
-    chat.messages = [
-      ...chat.messages,
-      { id: crypto.randomUUID(), text: '', sender: 'bot', attachments },
-    ];
-
-    await showResponse(chat, generateAIResponse(message.text).split(' '));
-
-    messages = chat.messages;
-    isResponseSent = true;
-    chat.options = { ...chat.options, suggestions: [], isTyping: false };
-    // TODO: add attachments (if any) to the response message
-  }, 1000);
-}
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  chat.options = { ...chat.options, isTyping: false };
+
+  const responseText = generateAIResponse(message.text).split(' ');
 
-async function showResponse(chat: IgcChatComponent, responseParts: string[]) {
-  const lastMessage = chat.messages[chat.messages.length - 1];
+  const aiResponse = {
+    id: Date.now().toString(),
+    sender: 'bot',
+    text: '',
+    attachments,
+  };
+
+  chat.messages = [...chat.messages, aiResponse];
 
-  for (const part of responseParts) {
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    lastMessage.text = `${lastMessage.text} ${part}`;
-    chat.messages = [...chat.messages];
+  for (const part of responseText) {
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    const updated = [...chat.messages];
+    const currentMessage = updated[updated.length - 1];
+    const updatedMessage = {
+      ...aiResponse,
+      text: `${currentMessage.text} ${part}`,
+    };
+    updated[updated.length - 1] = updatedMessage;
+    chat.messages = updated;
   }
 }
 
@@ -441,15 +441,6 @@ export const Basic: Story = {
   render: () => {
     messages = initialMessages;
     return html`
-      <style>
-        igc-chat::part(typing-dot) {
-          background: var(--igc-background, #f00);
-          border: solid 1px var(--igc-background, #f00);
-          border-radius: 8px;
-          color: var(--igc-color, #932424);
-          width: 12px;
-        }
-      </style>
       <igc-chat
         style="--igc-chat-height: calc(100vh - 32px);"
         .messages=${messages}