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

client/cypress/integration/About.feature

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