Gherkin workflows for desktop (#788)

* Add gherkin tests for page navigation links

- test that every page will load when navigating from any other page
- update snapshots

* Add gherkin workflows 2 - 5

- add test for Federal program officer key information and CTA
- add test for Community members key information and CTA
- add test for Send feedback
- add test for Join the Open Source community
- update snapshots

* Add gherkin tests for footer links

- add footerlinks feature gherkin file
- adds a comment to the hyphenizeString()
- adds keyword functions for footer
- adds data-cy tags to footer component
- updates snapshots

* Adds workflow to learn more about EO

* Add gherkin test for dataset links

- add data-cy tags to dataset sections
- modify Cy command functions names
- update snapshots

* Add cypress test to deploy_staging.yml

* Add working directory env

* Remove keywords.js from cypress test

* Add a Then step to all About and Footer tests

* Refactor step definitions

- use globalStepDefinitions
- rename keywords to commonSteps
- remove keyword from exclusion list

.github/workflows/deploy_staging.yml

@@ -9,6 +9,7 @@ on:
       - "client/**/*"
 env: 
   PR_NUMBER: ${{github.event.pull_request.number}}
+  WORKING_DIRECTORY: ./client
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -48,6 +49,12 @@ jobs:
         run: npm test
       - name: Check for security vulnerabilities
         run: npm audit --production
+      - name: Cypress / Gherkin integration tests 🌃
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: ${{env.WORKING_DIRECTORY}}
+          start: npm start
+          wait-on: 'http://localhost:8000'
       - name: Upload Artifact
         uses: actions/upload-artifact@v2
         with:

client/cypress/integration/About.feature

@@ -1,17 +1,16 @@
-Feature: Does the About page open?
+Feature: The About page will open from all other pages
-  I want to open the about page
   
-  Scenario: About page FROM Explore Tool page
+  Scenario: About page open when navigating from Explore the Tool page
-    Given I am on the Explore Tool page
+    Given I am on the "Explore the tool" page
     When I click on the "About" page in the navigation
     Then I see "About" in the title
 
-  Scenario: About page FROM Methodology page
+  Scenario: About page open when navigating from Methodology page
-    Given I am on the Explore Tool page
+    Given I am on the "Methodology" page
-    When I click on the "Methodology" page in the navigation
+    When I click on the "About" page in the navigation
-    Then I see "Data and Methodology" in the title
+    Then I see "About" in the title
     
-  Scenario: About page FROM Contact page
+  Scenario: About page open when navigating from Contact page
-    Given I am on the Explore Tool page
+    Given I am on the "Contact" page
-    When I click on the "Contact" page in the navigation
+    When I click on the "About" page in the navigation
-    Then I see "Contact" in the title
+    Then I see "About" in the title

client/cypress/integration/About/about.js

@@ -1,32 +0,0 @@
-// / <reference types="Cypress" />
-import {Given, When} from 'cypress-cucumber-preprocessor/steps';
-import {ENDPOINTS} from '../LegacyTests/constants';
-
-// eslint-disable-next-line new-cap
-Given('I am on the About page', () => {
-  cy.viewport(1060, 800);
-  cy.visit(ENDPOINTS.ABOUT);
-});
-
-// eslint-disable-next-line new-cap
-Given('I am on the Explore Tool page', () => {
-  cy.viewport(1060, 800);
-  cy.visit(ENDPOINTS.EXPLORE_THE_TOOL);
-});
-
-// eslint-disable-next-line new-cap
-Given('I am on the Data & Methodology page', () => {
-  cy.viewport(1060, 800);
-  cy.visit(ENDPOINTS.METHODOLOGY);
-});
-
-// eslint-disable-next-line new-cap
-Given('I open the Contact page', () => {
-  cy.viewport(1060, 800);
-  cy.visit(ENDPOINTS.CONTACT);
-});
-
-// eslint-disable-next-line new-cap
-When(`I click on the {string} page in the navigation`, (page) => {
-  cy.get(`[data-cy="nav-link-${page.toLowerCase()}"]`).click();
-});

client/cypress/integration/AboutLinks.feature

@@ -0,0 +1,30 @@
+Feature: All links on About page are functional
+
+  Scenario: Visitors can learn more about the J40 EO
+    Given I am on the "About" page
+    When I look for the "The Justice40 Initiative" CTA
+    And I click on the "The Justice40 Initiative" "external" link
+    Then the link should respond successfully
+
+  Scenario: Federal program officer can find and click on their CTA
+    Given I am on the "About" page
+    When I look for the "Federal program managers" CTA
+    And I click on the "Federal program managers" "internal" link
+    Then I see "Methodology" in the title
+
+  Scenario: Community members can find and click on their CTA
+    Given I am on the "About" page
+    When I look for the "Community members" CTA
+    And I click on the "Community members" "internal" link
+    Then I see "Explore the tool" in the title
+
+  Scenario: People can find how to Send feedback
+    Given I am on the "About" page
+    When I look for the "Send feedback" CTA
+    Then the link should allow client to send an email to "screeningtool.feedback@usds.gov"
+
+  Scenario: Open source community can find and click on their CTA
+    Given I am on the "About" page
+    When I look for the "Join the open source community" CTA
+    And I click on the "Join the open source community" "external" link
+    Then the link should respond successfully

client/cypress/integration/Contact.feature

@@ -0,0 +1,16 @@
+Feature: The Contact page will open from all other pages
+  
+  Scenario: Contact page open when navigating from About page
+    Given I am on the "About" page
+    When I click on the "Contact" page in the navigation
+    Then I see "Contact" in the title
+
+  Scenario: Contact page open when navigating from Explore the tool page
+    Given I am on the "Explore the tool" page
+    When I click on the "Contact" page in the navigation
+    Then I see "Contact" in the title
+    
+  Scenario: Contact page open when navigating from Methodology page
+    Given I am on the "Methodology" page
+    When I click on the "Contact" page in the navigation
+    Then I see "Contact" in the title

client/cypress/integration/DatasetLinks.feature

@@ -0,0 +1,11 @@
+Feature: All links on the dataset cards should be functional
+
+  Scenario: If I click on any link in the indicators dataset, they should work
+    Given I am on the "Methodology" page
+    When I look for the "Datasets used in methodology" CTA
+    Then All links under "Datasets used in methodology" should work
+
+  Scenario: If I click on any link in the additional indicators dataset, they should work
+    Given I am on the "Methodology" page
+    When I look for the "Additional Indicators" CTA
+    Then All links under "Additional Indicators" should work

client/cypress/integration/Explore.feature

@@ -0,0 +1,16 @@
+Feature: The Explore the tool page will open from all other pages
+  
+  Scenario: Explore the tool page open when navigating from About page
+    Given I am on the "About" page
+    When I click on the "Explore the tool" page in the navigation
+    Then I see "Explore the tool" in the title
+
+  Scenario: Explore the tool page open when navigating from Methodology page
+    Given I am on the "Methodology" page
+    When I click on the "Explore the tool" page in the navigation
+    Then I see "Explore the tool" in the title
+    
+  Scenario: Explore the tool page open when navigating from Contact page
+    Given I am on the "Contact" page
+    When I click on the "Explore the tool" page in the navigation
+    Then I see "Explore the tool" in the title

client/cypress/integration/FooterLinks.feature

@@ -0,0 +1,25 @@
+Feature: All links in the Footer are functional
+
+  Scenario: I can find more information on the Whitehouse
+    Given I am on the "About" page
+    When I look for the "footer"
+    And I click on the "Whitehouse.gov" footer link
+    Then the link should respond successfully
+
+  Scenario: I can find more information on FOIA
+    Given I am on the "About" page
+    When I look for the "footer"
+    And I click on the "Freedom of Information Act (FOIA)" footer link
+    Then the link should respond successfully
+
+  Scenario: I can find more information on the Privacy Policy
+    Given I am on the "About" page
+    When I look for the "footer"
+    And I click on the "Privacy Policy" footer link
+    Then the link should respond successfully
+
+  Scenario: I can find find a contact at USA.gov
+    Given I am on the "About" page
+    When I look for the "footer"
+    And I click on the "Find a contact at USA.gov" footer link
+    Then the link should respond successfully

client/cypress/integration/LegacyTests/constants.js

@@ -1,5 +1,5 @@
 export const ENDPOINTS = {
-  ABOUT: 'en',
+  ABOUT: 'en/',
   EXPLORE_THE_TOOL: '/en/cejst',
   METHODOLOGY: '/en/methodology',
   CONTACT: 'en/contact',

client/cypress/integration/Methodology.feature

@@ -0,0 +1,16 @@
+Feature: The Methodology page will open from all other pages
+  
+  Scenario: Methodology page open when navigating from About page
+    Given I am on the "About" page
+    When I click on the "Methodology" page in the navigation
+    Then I see "Methodology" in the title
+
+  Scenario: Methodology page open when navigating from Explore the tool page
+    Given I am on the "Explore the tool" page
+    When I click on the "Methodology" page in the navigation
+    Then I see "Methodology" in the title
+    
+  Scenario: Methodology page open when navigating from Contact page
+    Given I am on the "Contact" page
+    When I click on the "Methodology" page in the navigation
+    Then I see "Methodology" in the title

client/cypress/integration/common/helpers.js

@@ -0,0 +1,16 @@
+// Helper functions that need to be shared between both the src codebase
+// and the cypress tests
+
+/**
+ * This function will take a string and hyphenize it.
+ * For example:
+ * Whitehouse.gov => whitehouse-gov
+ * Privacy Policy => privacy-policy
+ *
+ * @param {string} string
+ * @return {string}
+ */
+export const hyphenizeString = (string) => {
+  return string.split(/\.| /).join('-').toLowerCase();
+};
+

client/cypress/integration/common/i_see_string_in_the_title.js

@@ -1,4 +0,0 @@
-// eslint-disable-next-line new-cap
-Then(`I see {string} in the title`, (title) => {
-  cy.title().should('include', title);
-});

client/cypress/support/commands.js

@@ -1,4 +1,4 @@
-/* MAP */
+import {hyphenizeString} from '../integration/common/helpers';
 
 // For some interactions, we need access to the underlying map
 // Below adapted from https://github.com/codeforcologne/edelgard-map
@@ -26,3 +26,11 @@ Cypress.Commands.add('waitForMapIdle', (map) => {
     map.once('idle', resolve);
   });
 });
+
+Cypress.Commands.add('testExternalLinks', (string) => {
+  return cy.get(`[data-cy="${hyphenizeString(string)}-block"] a`).each((link) => {
+    cy.request(link.prop('href'))
+        .its('status')
+        .should('eq', 200);
+  });
+});

client/cypress/support/step_definitions/commonSteps.js

@@ -0,0 +1,64 @@
+/* eslint-disable new-cap */
+
+// Common step definitions for Gherkin
+
+import {ENDPOINTS} from '../../integration/LegacyTests/constants';
+import {hyphenizeString} from '../../integration/common/helpers';
+
+// Common Givens:
+Given('I am on the {string} page', (page) => {
+  const pageArray = page.split(' ');
+  cy.viewport(1060, 800);
+  cy.visit(ENDPOINTS[pageArray.join('_').toUpperCase()]);
+});
+
+// Common Whens:
+When(`I click on the {string} page in the navigation`, (page) => {
+  const pageHyphenCase = hyphenizeString(page);
+  cy.get(`[data-cy="nav-link-${pageHyphenCase}"]`).click();
+});
+
+When(`I look for the {string} CTA`, (ctaString) => {
+  cy.get(`[data-cy="${hyphenizeString(ctaString)}-block"]`).as('CTA_block');
+  cy.get('@CTA_block').scrollIntoView().should('be.visible');
+});
+
+When(`I look for the {string}`, (footer) => {
+  cy.get(`[data-cy="${hyphenizeString(footer)}-primary-block"]`).scrollIntoView().should('be.visible');
+});
+
+// Common Thens:
+Then(`I see {string} in the title`, (title) => {
+  cy.title().should('include', title);
+});
+
+Then(`All links under {string} should work`, (title) => {
+  cy.testExternalLinks(title);
+});
+
+Then(`the link should allow client to send an email to {string}`, (email) => {
+  cy.get(`@CTA_block`).find('a').invoke('attr', 'href').should('eq', `mailto:${email}`);
+});
+
+Then(`the link should respond successfully`, () => {
+  cy.get(`@externalLink`).then((link) => {
+    cy.request(link.prop('href'))
+        .its('status')
+        .should('eq', 200);
+  });
+});
+
+// Common Ands:
+And(`I click on the {string} {string} link`, (ctaString, type) => {
+  const CTALinkSelector = `[data-cy="${hyphenizeString(ctaString)}-block"] a`;
+
+  if (type === 'internal') {
+    cy.get(CTALinkSelector).click();
+  } else {
+    cy.get(CTALinkSelector).as('externalLink');
+  };
+});
+
+And(`I click on the {string} footer link`, (string) => {
+  cy.get(`[data-cy="${hyphenizeString(string)}"]`).as('externalLink');
+});

client/package.json

@@ -93,6 +93,6 @@
     "uswds": "^2.10.3"
   },
   "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true
+    "nonGlobalStepDefinitions": false
   }
 }

client/src/components/AboutCard/AboutCard.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {Grid} from '@trussworks/react-uswds';
+
 import LinkTypeWrapper from '../LinkTypeWrapper';
+import {hyphenizeString} from '../../../cypress/integration/common/helpers';
 
 // the "body" section is the child object to allow for html versus just text
 interface AboutCardProps {
@@ -29,7 +31,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
               src={props.imgSrc}/>
           </Grid>
 
-          <Grid tablet={{col: 9}}>
+          <Grid tablet={{col: 9}} data-cy={`${hyphenizeString(props.header)}-block`}>
             <Grid row>
               <h2>{props.header}</h2>
               {props.children}
@@ -52,7 +54,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
               src={props.imgSrc}/>
           </Grid>
 
-          <Grid tablet={{col: 9}}>
+          <Grid tablet={{col: 9}} data-cy={`${hyphenizeString(props.header)}-block`}>
             <Grid row>
               <h3>{props.header}</h3>
               {props.children}

client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
       </div>
       <div
         class="tablet:grid-col-9"
+        data-cy="test-header-block"
         data-testid="grid"
       >
         <div

client/src/components/DatasetContainer/index.tsx

@@ -5,6 +5,7 @@ import {Grid} from '@trussworks/react-uswds';
 import AlertWrapper from '../AlertWrapper';
 import DatasetCard from '../DatasetCard';
 import J40MainGridContainer from '../J40MainGridContainer';
+import {hyphenizeString} from '../../../cypress/integration/common/helpers';
 
 import * as styles from './dsContainer.module.scss';
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
@@ -16,7 +17,8 @@ const DatasetContainer = () => {
   return (
     <>
       <J40MainGridContainer fullWidth={true} blueBackground={true}>
-        <J40MainGridContainer>
+        <J40MainGridContainer
+          dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.HEADING.defaultMessage)}-block`}>
 
           <Grid row>
             <Grid col={12}>
@@ -42,8 +44,9 @@ const DatasetContainer = () => {
         </J40MainGridContainer>
       </J40MainGridContainer>
 
-      <J40MainGridContainer fullWidth={true} blueBackground={false}>
+      <J40MainGridContainer fullWidth={true} blueBackground={false} >
-        <J40MainGridContainer>
+        <J40MainGridContainer
+          dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.ADDITIONAL_HEADING.defaultMessage)}-block`}>
 
           <Grid row>
             <Grid col={12}>

client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
   >
     <div
       class="grid-container-desktop-lg"
+      data-cy="datasets-used-in-methodology-block"
       data-testid="gridContainer"
     >
       <div
@@ -174,6 +175,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
   >
     <div
       class="grid-container-desktop-lg"
+      data-cy="additional-indicators-block"
       data-testid="gridContainer"
     >
       <div

client/src/components/J40Footer.tsx

@@ -7,6 +7,7 @@ import {NavList} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 
 import J40MainGridContainer from './J40MainGridContainer';
+import {hyphenizeString} from '../../cypress/integration/common/helpers';
 
 // @ts-ignore
 import whitehouseIcon from '../images/eop-seal.svg';
@@ -37,19 +38,24 @@ const J40Footer = () => {
         key={'whitehouselink2'}
         href={'https://www.whitehouse.gov/'}
         target={'_blank'}
-        rel={'noreferrer'}>Whitehouse.gov</a>,
+        rel={'noreferrer'}
+        data-cy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}>
+        {intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE)}
+      </a>,
       <a
         key="foialink"
         target={'_blank'}
         rel={'noreferrer'}
-        href={'https://www.whitehouse.gov/ceq/foia'}>
+        href={'https://www.whitehouse.gov/ceq/foia'}
+        data-cy={hyphenizeString(COMMON_COPY.FOOTER.FOIA.defaultMessage)}>
         {intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
       </a>,
       <a
         key={'privacylink'}
         target={'_blank'}
         rel={'noreferrer'}
-        href={'https://www.whitehouse.gov/privacy/'}>
+        href={'https://www.whitehouse.gov/privacy/'}
+        data-cy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}>
         {intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
       </a>,
     ],
@@ -58,7 +64,8 @@ const J40Footer = () => {
       <a
         className={'footer-link-first-child'}
         key={'contactlink'}
-        href={'https://www.usa.gov/'}>
+        href={'https://www.usa.gov/'}
+        data-cy={hyphenizeString(COMMON_COPY.FOOTER.CONTACT_LINK.defaultMessage)}>
         {intl.formatMessage(COMMON_COPY.FOOTER.CONTACT_LINK)}
       </a>,
     ],
@@ -71,11 +78,12 @@ const J40Footer = () => {
     // `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
     // `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
     <footer className={'j40-footer'}>
-      <div className="usa-footer__primary-section pb2">
+      <div className="usa-footer__primary-section pb2" data-cy={`footer-primary-block`}>
         <J40MainGridContainer>
           <div className={'grid-row tablet-lg:grid-col4'}>
             {NAVLINKS.map((links, i) => (
-              <div key={`linkSection-${i}`}
+              <div
+                key={`linkSection-${i}`}
                 className="mobile-lg:grid-col-12 desktop:grid-col-4">
                 <NavSection links={links} />
               </div>

client/src/components/J40Header.tsx

@@ -42,7 +42,7 @@ const J40Header = () => {
           key={'cejst'}
           activeClassName="usa-current"
           className={'j40-header'}
-          data-cy={'nav-link-explore'}>
+          data-cy={'nav-link-explore-the-tool'}>
           {intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
         </Link>,
       ],

client/src/components/J40MainGridContainer.tsx

@@ -6,18 +6,20 @@ import {GridContainer} from '@trussworks/react-uswds';
 interface IJ40MainGridContainer {
   children: ReactNode,
   fullWidth?: boolean,
-   blueBackground?: boolean,
+  blueBackground?: boolean,
-  className?: string
+  className?: string,
+  dataCy?: string,
 }
 
 const J40MainGridContainer = ({
   children,
   fullWidth = false,
   blueBackground = false,
-  className = ''}: IJ40MainGridContainer) => {
+  className = '',
+  dataCy,
+}: IJ40MainGridContainer) => {
   // is it a blue background strip?
   className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
-
   return fullWidth ? (
     <div
       className={className}>
@@ -26,7 +28,8 @@ const J40MainGridContainer = ({
   ) : (
     <GridContainer
       containerSize={'desktop-lg'}
-      className={className}>
+      className={className}
+      data-cy={dataCy}>
       {children}
     </GridContainer>
   );

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -7,6 +7,7 @@ exports[`J40Footer renders correctly 1`] = `
   >
     <div
       class="usa-footer__primary-section pb2"
+      data-cy="footer-primary-block"
     >
       <div
         class="grid-container-desktop-lg"
@@ -79,6 +80,7 @@ exports[`J40Footer renders correctly 1`] = `
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
                     target="_blank"
@@ -90,6 +92,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
                     target="_blank"
@@ -101,6 +104,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
                     target="_blank"
@@ -128,6 +132,7 @@ exports[`J40Footer renders correctly 1`] = `
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                   >
                     Find a contact at USA.gov

client/src/data/copy/common.tsx

@@ -79,6 +79,11 @@ export const FOOTER = defineMessages({
     defaultMessage: 'More information',
     description: 'Footer column header',
   },
+  WHITEHOUSE: {
+    id: 'footer.whitehouselink',
+    defaultMessage: 'Whitehouse.gov',
+    description: 'Footer Whitehouse.gov link text',
+  },
   FOIA: {
     id: 'footer.foialink',
     defaultMessage: 'Freedom of Information Act (FOIA)',

client/src/pages/__snapshots__/contact.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           >
             <a
               class="j40-header"
-              data-cy="nav-link-explore"
+              data-cy="nav-link-explore-the-tool"
               href="/en/cejst"
             >
               Explore the tool
@@ -317,6 +317,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
   >
     <div
       class="usa-footer__primary-section pb2"
+      data-cy="footer-primary-block"
     >
       <div
         class="grid-container-desktop-lg"
@@ -389,6 +390,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
                     target="_blank"
@@ -400,6 +402,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
                     target="_blank"
@@ -411,6 +414,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
                     target="_blank"
@@ -438,6 +442,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                   >
                     Find a contact at USA.gov

client/src/pages/__snapshots__/index.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           >
             <a
               class="j40-header"
-              data-cy="nav-link-explore"
+              data-cy="nav-link-explore-the-tool"
               href="/en/cejst"
             >
               Explore the tool
@@ -313,6 +313,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             </div>
             <div
               class="tablet:grid-col-9"
+              data-cy="the-screening-tool-block"
               data-testid="grid"
             >
               <div
@@ -357,6 +358,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             </div>
             <div
               class="tablet:grid-col-9"
+              data-cy="the-justice40-initiative-block"
               data-testid="grid"
             >
               <div
@@ -419,6 +421,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               </div>
               <div
                 class="tablet:grid-col-9"
+                data-cy="federal-program-managers-block"
                 data-testid="grid"
               >
                 <div
@@ -470,6 +473,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               </div>
               <div
                 class="tablet:grid-col-9"
+                data-cy="community-members-block"
                 data-testid="grid"
               >
                 <div
@@ -535,6 +539,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             </div>
             <div
               class="tablet:grid-col-9"
+              data-cy="send-feedback-block"
               data-testid="grid"
             >
               <div
@@ -589,6 +594,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             </div>
             <div
               class="tablet:grid-col-9"
+              data-cy="join-the-open-source-community-block"
               data-testid="grid"
             >
               <div
@@ -631,6 +637,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
   >
     <div
       class="usa-footer__primary-section pb2"
+      data-cy="footer-primary-block"
     >
       <div
         class="grid-container-desktop-lg"
@@ -703,6 +710,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
                     target="_blank"
@@ -714,6 +722,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
                     target="_blank"
@@ -725,6 +734,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
                     target="_blank"
@@ -752,6 +762,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                   >
                     Find a contact at USA.gov

client/src/pages/__snapshots__/methodology.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           >
             <a
               class="j40-header"
-              data-cy="nav-link-explore"
+              data-cy="nav-link-explore-the-tool"
               href="/en/cejst"
             >
               Explore the tool
@@ -356,6 +356,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
     >
       <div
         class="grid-container-desktop-lg"
+        data-cy="datasets-used-in-methodology-block"
         data-testid="gridContainer"
       >
         <div
@@ -523,6 +524,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
     >
       <div
         class="grid-container-desktop-lg"
+        data-cy="additional-indicators-block"
         data-testid="gridContainer"
       >
         <div
@@ -1122,6 +1124,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
   >
     <div
       class="usa-footer__primary-section pb2"
+      data-cy="footer-primary-block"
     >
       <div
         class="grid-container-desktop-lg"
@@ -1194,6 +1197,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
                     target="_blank"
@@ -1205,6 +1209,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
                     target="_blank"
@@ -1216,6 +1221,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
                     target="_blank"
@@ -1243,6 +1249,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 >
                   <a
                     class="footer-link-first-child"
+                    data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                   >
                     Find a contact at USA.gov