feat(VirtualizedMessageList): allow to merge custom virtuoso components with the SDK defaults (#2140)

Allow integrators to add only some custom virtuoso components via `VirtualizedMessageListProps['additionalVirtuosoProps']['components']`
and the rest to be filled with the defaults provided by the SDK.

Author: MartinCupela

src/components/DateSeparator/DateSeparator.tsx

@@ -27,7 +27,7 @@ const UnMemoizedDateSeparator = (props: DateSeparatorProps) => {
   });
 
   return (
-    <div className='str-chat__date-separator'>
+    <div className='str-chat__date-separator' data-testid='date-separator'>
       {(position === 'right' || position === 'center') && (
         <hr className='str-chat__date-separator-line' />
       )}

src/components/DateSeparator/__tests__/DateSeparator.test.js

@@ -47,6 +47,7 @@ describe('DateSeparator', () => {
     expect(tree).toMatchInlineSnapshot(`
       <div
         className="str-chat__date-separator"
+        data-testid="date-separator"
       >
         <hr
           className="str-chat__date-separator-line"
@@ -80,6 +81,7 @@ describe('DateSeparator', () => {
       expect(tree).toMatchInlineSnapshot(`
         <div
           className="str-chat__date-separator"
+          data-testid="date-separator"
         >
           <hr
             className="str-chat__date-separator-line"
@@ -99,6 +101,7 @@ describe('DateSeparator', () => {
       expect(tree).toMatchInlineSnapshot(`
         <div
           className="str-chat__date-separator"
+          data-testid="date-separator"
         >
           <div
             className="str-chat__date-separator-date"
@@ -117,6 +120,7 @@ describe('DateSeparator', () => {
       expect(tree).toMatchInlineSnapshot(`
         <div
           className="str-chat__date-separator"
+          data-testid="date-separator"
         >
           <hr
             className="str-chat__date-separator-line"

src/components/EventComponent/EventComponent.tsx

@@ -34,7 +34,7 @@ const UnMemoizedEventComponent = <
 
   if (type === 'system')
     return (
-      <div className='str-chat__message--system'>
+      <div className='str-chat__message--system' data-testid='message-system'>
         <div className='str-chat__message--system__text'>
           <div className='str-chat__message--system__line' />
           <p>{text}</p>

src/components/EventComponent/__tests__/EventComponent.test.js

@@ -30,6 +30,7 @@ describe('EventComponent', () => {
     expect(tree).toMatchInlineSnapshot(`
       <div
         className="str-chat__message--system"
+        data-testid="message-system"
       >
         <div
           className="str-chat__message--system__text"

src/components/MessageList/MessageList.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
-import { useEnrichedMessages } from './hooks/useEnrichedMessages';
-import { useMessageListElements } from './hooks/useMessageListElements';
-import { useScrollLocationLogic } from './hooks/useScrollLocationLogic';
+import {
+  useEnrichedMessages,
+  useMessageListElements,
+  useScrollLocationLogic,
+} from './hooks/MessageList';
 
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';