Add custom ddg action names for go back links (#30461)

* Add custom ddg action names for go back links

* Add action-name to other go-back link in Header, add testid for
uniqueness

* Tweak action names for clarity

* Switch to datadogRum.addAction function call, per DDG support

* Add tests that spy on the datadog

* Hoist 'Go Back' link text to const, make reusable

src/applications/mhv-landing-page/components/HeaderLayout.jsx

@@ -4,9 +4,12 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useFeatureToggle } from '~/platform/utilities/feature-toggles';
 import { mhvUrl } from '~/platform/site-wide/mhv/utilities';
+import { datadogRum } from '@datadog/browser-rum';
 import { isAuthenticatedWithSSOe } from '../selectors';
 import WelcomeContainer from '../containers/WelcomeContainer';
 
+const goBackLinkText = 'Go back to the previous version of My HealtheVet';
+
 const HeaderLayout = ({ showWelcomeMessage = false }) => {
   const { useToggleValue, TOGGLE_NAMES } = useFeatureToggle();
   const showHealthToolsLinks = useToggleValue(
@@ -78,8 +81,16 @@ const HeaderLayout = ({ showWelcomeMessage = false }) => {
                 <p>
                   If you’re not ready to try the new My HealtheVet, you can use
                   the previous version anytime.{' '}
-                  <a href={goBackUrl} data-testid="mhv-go-back-1">
-                    Go back to the previous version of My HealtheVet
+                  <a
+                    onClick={() =>
+                      datadogRum.addAction(
+                        `Click on Landing Page: Intro - ${goBackLinkText}`,
+                      )
+                    }
+                    data-testid="mhv-go-back-1"
+                    href={goBackUrl}
+                  >
+                    {goBackLinkText}
                   </a>
                 </p>
                 <div>
@@ -113,8 +124,16 @@ const HeaderLayout = ({ showWelcomeMessage = false }) => {
                         We’re working to bring your medical records to VA.gov.
                         For now, you can download your records using the
                         previous version of My HealtheVet.{' '}
-                        <a href={goBackUrl} data-testid="mhv-go-back-2">
-                          Go back to the previous version of My HealtheVet
+                        <a
+                          onClick={() =>
+                            datadogRum.addAction(
+                              `Click on Landing Page: Learn More - ${goBackLinkText}`,
+                            )
+                          }
+                          data-testid="mhv-go-back-2"
+                          href={goBackUrl}
+                        >
+                          {goBackLinkText}
                         </a>
                       </p>
                     </div>

src/applications/mhv-landing-page/components/MedicalRecords.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { datadogRum } from '@datadog/browser-rum';
 
 import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 
@@ -101,7 +102,15 @@ const MedicalRecords = ({ blueButtonUrl, pageHeading }) => (
         VA health records (Blue Button®).
       </p>
       <p>
-        <a className="vads-c-action-link--green" href={blueButtonUrl}>
+        <a
+          className="vads-c-action-link--green"
+          onClick={() =>
+            datadogRum.addAction(
+              'Click on Medical Records: Coming Soon - Go back to the previous version of My HealtheVet',
+            )
+          }
+          href={blueButtonUrl}
+        >
           Go back to the previous version of My HealtheVet
         </a>
       </p>

src/applications/mhv-landing-page/components/MedicalRecordsCard.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
+import { datadogRum } from '@datadog/browser-rum';
+
 const MedicalRecordsCard = ({ href }) => {
   const slug = 'mhv-c-card-medical-records';
   return (
@@ -62,8 +64,12 @@ const MedicalRecordsCard = ({ href }) => {
       </p>
       <p>
         <a
+          onClick={() =>
+            datadogRum.addAction(
+              'Click on Medical Records Card - Go back to the previous version of My HealtheVet',
+            )
+          }
           className="mhv-c-link"
-          data-dd-action-name="Medical Records Card – Go back to the previous version of My HealtheVet"
           href={href}
         >
           Go back to the previous version of My HealtheVet

src/applications/mhv-landing-page/tests/components/HeaderLayout.unit.spec.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { datadogRum } from '@datadog/browser-rum';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
+import sinon from 'sinon';
 import { Provider } from 'react-redux';
 import HeaderLayout from '../../components/HeaderLayout';
 
@@ -94,6 +96,35 @@ describe('MHV Landing Page -- Header Layout', () => {
     });
   });
 
+  describe('Go back links', () => {
+    it('call datadogRum.addAction on click of go-back links', async () => {
+      const store = mockStore({
+        mhvLandingPageEnableVaGovHealthToolsLinks: true,
+      });
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <HeaderLayout />
+        </Provider>,
+      );
+
+      const spyDog = sinon.spy(datadogRum, 'addAction');
+
+      await waitFor(() => {
+        const goBack1 = getByTestId('mhv-go-back-1');
+        fireEvent.click(goBack1);
+
+        expect(spyDog.called).to.be.true;
+
+        const goBack2 = getByTestId('mhv-go-back-2');
+        fireEvent.click(goBack2);
+
+        expect(spyDog.calledTwice).to.be.true;
+
+        spyDog.restore();
+      });
+    });
+  });
+
   describe('Health Tools links -- feature toggle disabled', () => {
     it('shows the old content when mhvLandingPageEnableVaGovHealthToolsLinks is false', async () => {
       const store = mockStore({

src/applications/mhv-landing-page/tests/components/MedicalRecords.unit.spec.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { datadogRum } from '@datadog/browser-rum';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
+import sinon from 'sinon';
 
 import MedicalRecords, { recordTypes } from '../../components/MedicalRecords';
 
@@ -22,4 +24,25 @@ describe('MHV Landing Page -- temporary Medical Records page', () => {
     expect(link.getAttribute('href')).to.eq(props.blueButtonUrl);
     recordTypes.forEach(type => getByText(type));
   });
+
+  describe('Go back links', () => {
+    it('call datadogRum.addAction on click of go-back links', async () => {
+      const props = {
+        blueButtonUrl: 'va.gov/bluebutton',
+        pageHeading,
+      };
+      const { getByRole } = render(<MedicalRecords {...props} />);
+
+      const spyDog = sinon.spy(datadogRum, 'addAction');
+
+      await waitFor(() => {
+        const goBack1 = getByRole('link', { name: /Go back/ });
+        fireEvent.click(goBack1);
+
+        expect(spyDog.called).to.be.true;
+
+        spyDog.restore();
+      });
+    });
+  });
 });