feat: scroll to the top of the target message element in Channel component (#847)

Copy code
Addresses [AC-670](https://sendbird.atlassian.net/browse/AC-670)

Currently, users can set the position of the first displayed message using the `startingPoint` (or `scrollToMessage`) prop via the Channel component. However, the scroll stops at the middle of the target message element, requiring users to scroll up to see long content.

[AC-670]:
https://sendbird.atlassian.net/browse/AC-670?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: AhyoungRyu

src/modules/Channel/context/__test__/utils.spec.js

@@ -4,7 +4,7 @@
 //   const unique = getUniqueListByMessageId(mergedMessages);
 //   return unique;
 
-import { mergeAndSortMessages } from "../utils";
+import { mergeAndSortMessages, scrollToRenderedMessage } from "../utils";
 
 const oldMessages = [
   {
@@ -55,3 +55,52 @@ describe('mergeAndSortMessages', () => {
     ]);
   });
 });
+
+
+describe('scrollToRenderedMessage', () => {
+  const mockSetIsScrolled = jest.fn();
+  const mockRefCurrent = { offsetHeight: 500, querySelectorAll: jest.fn() };
+  const mockRef = { current: mockRefCurrent };
+  const initialTimeStamp = 123456789;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should handle the case where the element is not found', () => {
+    mockRefCurrent.querySelectorAll.mockReturnValue([]);
+
+    scrollToRenderedMessage(mockRef, initialTimeStamp, mockSetIsScrolled);
+
+    // Ensure that scrollTop is not modified
+    expect(mockRefCurrent.scrollTop).toBe(undefined);
+    expect(mockSetIsScrolled).toHaveBeenCalledWith(true);
+  });
+
+  it('should handle errors gracefully', () => {
+    // Mocking an error in the try block
+    mockRefCurrent.querySelectorAll.mockImplementation(() => {
+      throw new Error('Mock error');
+    });
+
+    scrollToRenderedMessage(mockRef, initialTimeStamp, mockSetIsScrolled);
+
+    // Ensure that scrollTop is not modified
+    expect(mockRefCurrent.scrollTop).toBe(undefined);
+    expect(mockSetIsScrolled).toHaveBeenCalledWith(true);
+  });
+
+
+  it('should scroll to the top of the element', () => {
+    // Mocking the element
+    const mockElement = document.createElement('div');
+    jest.spyOn(mockElement, 'offsetHeight', 'get').mockReturnValue(100);
+    jest.spyOn(mockElement, 'offsetTop', 'get').mockReturnValue(200);
+    mockRefCurrent.querySelectorAll.mockReturnValue([mockElement]);
+
+    scrollToRenderedMessage(mockRef, initialTimeStamp, mockSetIsScrolled);
+    // Ensure that scrollTop is modified
+    expect(mockRefCurrent.scrollTop).toBe(200);
+    expect(mockSetIsScrolled).toHaveBeenCalledWith(true);
+  });
+});

src/modules/Channel/context/utils.ts

@@ -16,12 +16,8 @@ export const scrollToRenderedMessage = (
     // scroll into the message with initialTimeStamp
     const element = container.querySelectorAll(`[data-sb-created-at="${initialTimeStamp}"]`)?.[0];
     if (element instanceof HTMLElement) {
-      // Calculate the offset of the element from the top of the container
-      const containerHeight = container.offsetHeight;
-      const elementHeight = element.offsetHeight;
-      const elementOffset = (containerHeight - elementHeight) / 2;
-      // Set the scroll position of the container to bring the element to the middle
-      container.scrollTop = element.offsetTop - elementOffset;
+      // Set the scroll position of the container to bring the element to the top
+      container.scrollTop = element.offsetTop;
     }
   } catch {
     // do nothing