From 16bb1fbcdb51e9c873ce498d715b72df4b76c64b Mon Sep 17 00:00:00 2001
From: j1nts01 <noah.simcoe@kc.frb.org>
Date: Wed, 5 Aug 2026 17:47:28 -0500
Subject: [PATCH 1/4] FDG-9226 making datatestid changes for ga events

---
 .../table-section-container/pivot-options/pivot-options.jsx | 3 ++-
 src/components/select-control/select-control.jsx            | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx b/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx
index c9fb21cdd2..953457890a 100644
--- a/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx
+++ b/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"
+                dataTestId="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
+                dataTestId="pivot-value-options"
                 options={pivotOptions}
                 optionLabelKey="prettyName"
                 ariaLabel="pivot value"
diff --git a/src/components/select-control/select-control.jsx b/src/components/select-control/select-control.jsx
index b02ff93e14..9b7d1c4843 100644
--- a/src/components/select-control/select-control.jsx
+++ b/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, dataTestId }) => {
   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={dataTestId}>
                       <button
                         data-testid="selector-option"
                         className={classNames([selector_optionButton, isSelectedOption ? selector_optionSelected : ''])}

From 4bcb3ce539ea4b468f46a920ff2ce144a2c4823b Mon Sep 17 00:00:00 2001
From: j1nts01 <noah.simcoe@kc.frb.org>
Date: Thu, 6 Aug 2026 12:48:38 -0500
Subject: [PATCH 2/4] FDG-9226 making datatestid changes for ga events

---
 .../chart-table-toggle/chart-table-toggle.jsx             | 1 +
 .../dataset-data/hide-legend-toggle/hideLegendToggle.jsx  | 4 ++--
 .../pivot-options/pivot-options.jsx                       | 4 ++--
 .../table-section-container/pivot-toggle/pivot-toggle.jsx | 8 +++++++-
 .../pivot-toggle/pivot-toggle.spec.js                     | 2 +-
 src/components/select-control/select-control.jsx          | 4 ++--
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/dataset-data/chart-table-toggle/chart-table-toggle.jsx b/src/components/dataset-data/chart-table-toggle/chart-table-toggle.jsx
index 7bc38ee8ef..d2b8cccfd5 100644
--- a/src/components/dataset-data/chart-table-toggle/chart-table-toggle.jsx
+++ b/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}
diff --git a/src/components/dataset-data/hide-legend-toggle/hideLegendToggle.jsx b/src/components/dataset-data/hide-legend-toggle/hideLegendToggle.jsx
index 4a7552d681..638337cdad 100644
--- a/src/components/dataset-data/hide-legend-toggle/hideLegendToggle.jsx
+++ b/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}
diff --git a/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx b/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx
index 953457890a..1de47be441 100644
--- a/src/components/dataset-data/table-section-container/pivot-options/pivot-options.jsx
+++ b/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
-                dataTestId="pivot-view-options"
+                ga4Selector="pivot-view-options"
                 options={table.dataDisplays}
                 optionLabelKey="title"
                 ariaLabel="pivot view"
@@ -97,7 +97,7 @@ const PivotOptions = ({ datasetName, table, pivotSelection, setSelectedPivot, pi
             </span>
             <span className={dropdownContainer}>
               <SelectControl
-                dataTestId="pivot-value-options"
+                ga4Selector="pivot-value-options"
                 options={pivotOptions}
                 optionLabelKey="prettyName"
                 ariaLabel="pivot value"
diff --git a/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.jsx b/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.jsx
index f3d7b4c868..104d63e2eb 100644
--- a/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.jsx
+++ b/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>
diff --git a/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.spec.js b/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.spec.js
index 25ec62c120..f71ab2da8a 100644
--- a/src/components/dataset-data/table-section-container/pivot-toggle/pivot-toggle.spec.js
+++ b/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');
   });
 });
diff --git a/src/components/select-control/select-control.jsx b/src/components/select-control/select-control.jsx
index 9b7d1c4843..b75b53ae97 100644
--- a/src/components/select-control/select-control.jsx
+++ b/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, dataTestId }) => {
+const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandler, showAll, optionLabelKey, className, ga4Selector }) => {
   const labelKey = optionLabelKey ? optionLabelKey : 'label';
 
   const [droppedDown, setDroppedDown] = useState(false);
@@ -73,7 +73,7 @@ const SelectControl = ({ label, options, selectedOption, ariaLabel, changeHandle
               return (
                 <React.Fragment key={`${colName}-${index}`}>
                   {(!option.hideable || showAll) && (
-                    <li className={selector_option} data-testid={dataTestId}>
+                    <li className={selector_option} data-testid={ga4Selector}>
                       <button
                         data-testid="selector-option"
                         className={classNames([selector_optionButton, isSelectedOption ? selector_optionSelected : ''])}

From 7281dfdbf941a5b97fad120b98a8ac6572310d1a Mon Sep 17 00:00:00 2001
From: Noah_Simcoe <noah.simcoe@kc.frb.org>
Date: Fri, 7 Aug 2026 09:17:04 -0500
Subject: [PATCH 3/4] FDG-9226 changes to tests for new id names

---
 .../table-section-container/table-section-container.spec.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dataset-data/table-section-container/table-section-container.spec.js b/src/components/dataset-data/table-section-container/table-section-container.spec.js
index feecbe1a84..23d40e38b4 100644
--- a/src/components/dataset-data/table-section-container/table-section-container.spec.js
+++ b/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 () => {

From 1f0850ece43f1bb06238b6e43611c41a3c5718da Mon Sep 17 00:00:00 2001
From: Noah_Simcoe <noah.simcoe@kc.frb.org>
Date: Tue, 11 Aug 2026 10:11:28 -0500
Subject: [PATCH 4/4] FDG-9226 adding testid for data dictionary dap event

---
 .../download-item-button/download-item-button.jsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/download-wrapper/download-item-button/download-item-button.jsx b/src/components/download-wrapper/download-item-button/download-item-button.jsx
index d886a87b9e..cfad4676de 100644
--- a/src/components/download-wrapper/download-item-button/download-item-button.jsx
+++ b/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>