refactor: consolidate prober logic into shared helper and add test-testid attributes to core UI elements

src/chart.tsx

@@ -596,7 +596,7 @@ export function Chart(props: ChartProps) {
         </button>
       </Media>
       <svg id="chartSvg">
-        <g id="chart" />
+        <g id="chart" data-testid="chart" />
       </svg>
     </div>
   );

src/components/error_display.tsx

@@ -4,7 +4,7 @@ import {Message, Portal} from 'semantic-ui-react';
 /** Shows an error message in the middle of the screen. */
 export function ErrorMessage(props: {message?: string}) {
   return (
-    <Message negative className="error">
+    <Message negative className="error" data-testid="error-message">
       <Message.Header>
         <FormattedMessage
           id="error.failed_to_load_file"
@@ -28,7 +28,7 @@ export interface ErrorPopupProps {
 export function ErrorPopup(props: ErrorPopupProps) {
   return (
     <Portal open={props.open} onClose={props.onDismiss}>
-      <Message negative className="errorPopup" onDismiss={props.onDismiss}>
+      <Message negative className="errorPopup" onDismiss={props.onDismiss} data-testid="error-popup">
         <Message.Header>
           <FormattedMessage id="error.error" defaultMessage={'Error'} />
         </Message.Header>

src/pages/view_page.tsx

@@ -199,7 +199,7 @@ export function ViewPage() {
         }
         const selection = updatedSelection;
         return (
-          <div id="content">
+          <div id="content" data-testid="content">
             <ErrorPopup
               open={showErrorPopup}
               message={error}

src/sidepanel/details/details.tsx

@@ -354,7 +354,7 @@ export function Details(props: Props) {
   const entries = props.gedcom.indis[props.indi].tree;
 
   return (
-    <div className="details">
+    <div className="details" data-testid="details">
       <Item.Group divided>
         {getSectionForEachMatchingEntry(
           entries,