Test typescriptification - MessagePanel (#8943)

* mv test/components/structures/MessagePanel-test.js test/components/structures/MessagePanel-test.tsx

* convert simpler messagepanel tests to rtl

* add data-testid to eventlistsummary

* convert read marker tests to rtl

* formatting

* remove commented

src/components/structures/MessagePanel.tsx

@@ -1313,6 +1313,7 @@ class MainGrouper extends BaseGrouper {
         ret.push(
             <EventListSummary
                 key={key}
+                data-testid={key}
                 events={this.events}
                 onToggle={panel.onHeightChanged} // Update scroll state
                 startExpanded={highlightInSummary}

src/components/views/elements/EventListSummary.tsx

@@ -527,6 +527,7 @@ export default class EventListSummary extends React.Component<IProps> {
         );
 
         return <GenericEventListSummary
+            data-testid={this.props['data-testid']}
             events={this.props.events}
             threshold={this.props.threshold}
             onToggle={this.props.onToggle}

src/components/views/elements/GenericEventListSummary.tsx

@@ -43,6 +43,7 @@ interface IProps {
     onToggle?(): void;
     // The layout currently used
     layout?: Layout;
+    'data-testid'?: string;
 }
 
 const GenericEventListSummary: React.FC<IProps> = ({
@@ -54,6 +55,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
     summaryMembers = [],
     summaryText,
     layout = Layout.Group,
+    'data-testid': testId,
 }) => {
     const [expanded, toggleExpanded] = useStateToggle(startExpanded);
 
@@ -110,7 +112,13 @@ const GenericEventListSummary: React.FC<IProps> = ({
     }
 
     return (
-        <li className="mx_GenericEventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""} data-layout={layout}>
+        <li
+            className="mx_GenericEventListSummary"
+            data-scroll-tokens={eventIds}
+            data-expanded={expanded + ""}
+            data-layout={layout}
+            data-testid={testId}
+        >
             <AccessibleButton className="mx_GenericEventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>