FDG-9226 Non-DAP GA4: Create Custom Events - Dataset Page

src/components/dataset-data/chart-table-toggle/chart-table-toggle.jsx

@@ -111,6 +111,7 @@ const ChartTableToggle = ({
           {selectedTab === 1 ? (
             <HideLegendToggle
               displayText={legend ? 'Hide Legend' : 'Show Legend'}
+              ga4Selector={legend ? 'hide-legend' : 'show-legend'}
               displayIcon={faSlidersH}
               showToggle={showToggleChart}
               onToggleLegend={onToggleLegend}

src/components/dataset-data/hide-legend-toggle/hideLegendToggle.jsx

@@ -3,12 +3,12 @@ import { icon, selectColumnsIcon, toggleButton, toggleContainer } from './hideLe
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCrosshairs } from '@fortawesome/free-solid-svg-icons/faCrosshairs';
 
-const HideLegendToggle = ({ displayText, displayIcon, showToggle, onToggleLegend, selectedTab, role }) => {
+const HideLegendToggle = ({ displayText, displayIcon, showToggle, onToggleLegend, selectedTab, role, ga4Selector }) => {
   return (
     <>
       <div className={toggleContainer} role={role}>
         {selectedTab && showToggle && (
-          <button className={toggleButton} onClick={onToggleLegend}>
+          <button className={toggleButton} onClick={onToggleLegend} data-testid={ga4Selector}>
             <span>
               <FontAwesomeIcon icon={displayIcon} className={displayIcon === faCrosshairs ? selectColumnsIcon : icon} size="1x" />
               {displayText}

src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx

@@ -82,7 +82,7 @@ const PivotOptions = ({ datasetName, table, pivotSelection, setSelectedPivot, pi
             </span>
             <span className={dropdownContainer}>
               <SelectControl
-                data-testid="pivot-options-view"
+                ga4Selector="pivot-view-options"
                 options={table.dataDisplays}
                 optionLabelKey="title"
                 ariaLabel="pivot view"
@@ -97,6 +97,7 @@ const PivotOptions = ({ datasetName, table, pivotSelection, setSelectedPivot, pi
             </span>
             <span className={dropdownContainer}>
               <SelectControl
+                ga4Selector="pivot-value-options"
                 options={pivotOptions}
                 optionLabelKey="prettyName"
                 ariaLabel="pivot value"

src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.jsx

@@ -5,7 +5,13 @@ import { faChartBar } from '@fortawesome/free-regular-svg-icons/faChartBar';
 
 const PivotToggle = ({ clickHandler, open }) => {
   return (
-    <button className={headerToggle} data-testid="pivotToggle" onClick={clickHandler} aria-haspopup aria-expanded={open}>
+    <button
+      className={headerToggle}
+      data-testid={open ? 'hide-pivot-options' : 'show-pivot-options'}
+      onClick={clickHandler}
+      aria-haspopup
+      aria-expanded={open}
+    >
       <FontAwesomeIcon icon={faChartBar} className={toggleIcon} data-testid="bar-chart-icon" size="1x" />
       <span data-testid="toggleText">{open ? 'Hide ' : 'Show '} Pivot Options</span>
     </button>

src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.spec.js

@@ -22,7 +22,7 @@ describe('PivotToggle component', () => {
   it('fires its click handler when clicked', () => {
     const { getByTestId } = render(<PivotToggle clickHandler={mockHandler} open={false} />);
     expect(handlerTracker).toBeNull();
-    fireEvent.click(getByTestId('pivotToggle'));
+    fireEvent.click(getByTestId('show-pivot-options'));
     expect(handlerTracker).toEqual('called');
   });
 });

src/components/dataset-data/table-section-container/table-section-container.spec.js

@@ -278,7 +278,7 @@ describe('TableSectionContainer with Pivot Options', () => {
       </>
     );
     expect(getByTestId('pivotOptionsDrawer').className).toContain(active);
-    fireEvent.click(getByTestId('pivotToggle'));
+    fireEvent.click(getByTestId('hide-pivot-options'));
     expect(getByTestId('pivotOptionsDrawer').className).not.toContain(active);
   });
 
@@ -302,7 +302,7 @@ describe('TableSectionContainer with Pivot Options', () => {
         />
       </>
     );
-    fireEvent.click(getByTestId('pivotToggle'));
+    fireEvent.click(getByTestId('hide-pivot-options'));
   });
 
   it('relays an endpoint value when it receives it in the serverSidePagination prop', async () => {

src/components/download-wrapper/download-item-button/download-item-button.jsx

@@ -164,7 +164,7 @@ const DownloadItemButton = ({
   return (
     <div>
       {asyncAction ? (
-        <button className={dictionary} onClick={asyncAction} disabled={disabled}>
+        <button className={dictionary} onClick={asyncAction} disabled={disabled} data-testid="download-data-dictionary">
           <span className="labelText">{label} </span>
           {fileSize && <span className="fileSize"> ({fileSize})</span>}
         </button>

src/components/select-control/select-control.jsx

@@ -20,7 +20,7 @@ export const ariaLabeler = (selectedOptionLabel, ariaLabel, label) => {
   return `Change ${ariaLabelText} from ${selectedOptionLabel}`;
 };
 
-const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandler, showAll, optionLabelKey, className }) => {
+const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandler, showAll, optionLabelKey, className, ga4Selector }) => {
   const labelKey = optionLabelKey ? optionLabelKey : 'label';
 
   const [droppedDown, setDroppedDown] = useState(false);
@@ -54,7 +54,7 @@ const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandle
       <div className={`${selector_container} ${className ? className : ''}`} onBlur={onBlurHandler} onFocus={onFocusHandler} role="presentation">
         <button
           name="dropdownToggle"
-          data-testid="toggle-button"
+          data-testid={'toggle-button'}
           className={selector_button}
           aria-haspopup="true"
           aria-expanded={droppedDown}
@@ -73,7 +73,7 @@ const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandle
               return (
                 <React.Fragment key={`${colName}-${index}`}>
                   {(!option.hideable || showAll) && (
-                    <li className={selector_option}>
+                    <li className={selector_option} data-testid={ga4Selector}>
                       <button
                         data-testid="selector-option"
                         className={classNames([selector_optionButton, isSelectedOption ? selector_optionSelected : ''])}