Gherkin cypress spike (#673)

* integrate gherkin/cucumber w/ cypress

- change cypress.json config from e2e back to standard integration
- add cypress-cucumber-preprocessor
- add integration test of about page

* add a title to each page

* add intl to the 404 page

* Refactor explore tool page

- add intl to static strings
- replace component css with <Grid> layout

* Add title to contact page

* add intl to title of page

* Add gherkin tests for nav to about page

- navigate from any page to the about page
- ensure each link has the title correct on that page

client/cypress.json

@@ -1,6 +1,6 @@
 {
   "baseUrl": "http://localhost:8000/",
-  "integrationFolder": "cypress/e2e",
+  "integrationFolder": "cypress/integration",
   "chromeWebSecurity": false,
   "trashAssetsBeforeRuns": true
 }

client/cypress/e2e/constants.js

@@ -1,3 +0,0 @@
-export const ENDPOINTS = {
-  EXPLORE_THE_TOOL: '/en/cejst',
-};

client/cypress/integration/About.feature

@@ -0,0 +1,17 @@
+Feature: Does the About page open?
+  I want to open the about page
+  
+  Scenario: About page from Explore Tool page
+    Given I am on the Explore 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 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

client/cypress/integration/About/about.js

@@ -0,0 +1,32 @@
+// / <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/LegacyTests/constants.js

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

client/cypress/integration/LegacyTests/downloadPacket.spec.js

@@ -1,12 +1,12 @@
 // / <reference types="Cypress" />
 
-describe('Census Block Group download', () => {
+describe('Census Block Group packet download', () => {
+  const filename = `Screening_Tool_Data.zip`;
   it('validate file download', () => {
-    const filename = `Screening+Tool+Data.zip`;
     cy.visit('localhost:8000/en/methodology');
 
     cy.get('[data-cy="download-link"]').invoke('attr', 'target', '_blank');
-    cy.intercept(`https://justice40-data.s3.amazonaws.com/data-pipeline/data/score/downloadable/${filename}`,
+    cy.intercept(`https://d3jqyw10j8e7p9.cloudfront.net/data-pipeline/data/score/downloadable/${filename}`,
         {
           body: 'success',
           headers: {

client/cypress/integration/common/i_see_string_in_the_title.js

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

client/cypress/plugins/index.js

@@ -12,6 +12,8 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+const cucumber = require('cypress-cucumber-preprocessor').default;
+
 /**
  * @type {Cypress.PluginConfig}
  */
@@ -31,4 +33,5 @@ module.exports = (on, config) => {
       return null;
     },
   });
+  on('file:preprocessor', cucumber());
 };

client/package.json

@@ -48,6 +48,7 @@
     "babel-preset-gatsby": "^1.6.0",
     "cypress": "^7.4.0",
     "cypress-axe": "^0.12.2",
+    "cypress-cucumber-preprocessor": "^4.2.0",
     "eslint": "^7.27.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-cypress": "^2.11.3",
@@ -85,5 +86,8 @@
     "react-intl": "^5.20.4",
     "react-map-gl": "^6.1.16",
     "uswds": "^2.10.3"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
   }
 }

client/src/components/J40Header.tsx

@@ -60,25 +60,45 @@ const J40Header = () => {
           to={'/'}
           key={'about'}
           activeClassName="usa-current"
-          className={'j40-header'}>{intl.formatMessage(messages.about)}</Link>],
+          className={'j40-header'}
+          data-cy={'nav-link-about'}
+        >
+          {intl.formatMessage(messages.about)}
+        </Link>,
+      ],
       ['cejst',
         <Link
           to={'/cejst'}
           key={'cejst'}
           activeClassName="usa-current"
-          className={'j40-header'}>{intl.formatMessage(messages.explore)}</Link>],
+          className={'j40-header'}
+          data-cy={'nav-link-explore'}
+        >
+          {intl.formatMessage(messages.explore)}
+        </Link>,
+      ],
       ['methodology',
         <Link
           to={'/methodology'}
           key={'methodology'}
           activeClassName="usa-current"
-          className={'j40-header'}>{intl.formatMessage(messages.methodology)}</Link>],
+          className={'j40-header'}
+          data-cy={'nav-link-methodology'}
+        >
+          {intl.formatMessage(messages.methodology)}
+        </Link>,
+      ],
       ['contact',
         <Link
           to={'/contact'}
           key={'contact'}
           activeClassName="usa-current"
-          className={'j40-header'}>{intl.formatMessage(messages.contact)}</Link>],
+          className={'j40-header'}
+          data-cy={'nav-link-contact'}
+        >
+          {intl.formatMessage(messages.contact)}
+        </Link>,
+      ],
     ]);
 
     const menu =['about', 'cejst', 'methodology', 'contact'];

client/src/components/layout.tsx

@@ -2,22 +2,27 @@ import React, {ReactNode} from 'react';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
 import {URLFlagProvider} from '../contexts/FlagContext';
+import {Helmet} from 'react-helmet';
 
 interface ILayoutProps {
   children: ReactNode,
-  location: Location
+  location: Location,
+  title: string,
 }
 
-const Layout = ({children, location}: ILayoutProps) => {
+const Layout = ({children, location, title}: ILayoutProps) => {
   // @ts-ignore
   return (
-    <URLFlagProvider location={location}>
-      <J40Header />
-      <main id={'main-content'}>
-        {children}
-      </main>
-      <J40Footer/>
-    </URLFlagProvider>
+    <>
+      <Helmet title={title} defer={false} />
+      <URLFlagProvider location={location}>
+        <J40Header />
+        <main id={'main-content'}>
+          {children}
+        </main>
+        <J40Footer/>
+      </URLFlagProvider>
+    </>
   );
 };
 

client/src/pages/404.tsx

@@ -1,19 +1,11 @@
 import * as React from 'react';
-import Layout from '../components/layout';
-import J40MainGridContainer from '../components/J40MainGridContainer';
+import {defineMessages} from 'react-intl';
 import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
 import {Grid} from '@trussworks/react-uswds';
 
-// styles
-const headingStyles = {
-  marginTop: 32,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
+import J40MainGridContainer from '../components/J40MainGridContainer';
+import Layout from '../components/layout';
 
 const codeStyles = {
   color: '#8A6534',
@@ -29,33 +21,76 @@ interface I404PageProps {
 
 // markup
 const NotFoundPage =({location}: I404PageProps) => {
-  return (<Layout location={location}>
-    <J40MainGridContainer>
-      <Grid row><Grid col>
-        <h1 style={headingStyles}>Page not found</h1>
-      </Grid></Grid>
-      <Grid row><Grid col>
-        <p style={paragraphStyles}>
-            Sorry{' '}
-          <span role="img" aria-label="Pensive emoji">
+  const intl = useIntl();
+  const messages = defineMessages({
+    pageNotFoundTitle: {
+      id: 'pageNotFound.title.text',
+      defaultMessage: 'Page not found',
+      description: 'page not found title text',
+    },
+    pageNotFoundHeading: {
+      id: 'pageNotFound.heading.text',
+      defaultMessage: 'Page not found',
+      description: 'page not found heading text',
+    },
+    pageNotFoundApology: {
+      id: 'pageNotFound.apology.text',
+      defaultMessage: 'Sorry',
+      description: 'page not found apology text',
+    },
+    pageNotFoundApologyDescription: {
+      id: 'pageNotFound.apology.description.text',
+      defaultMessage: 'we couldn’t find what you were looking for.',
+      description: 'page not found apology description text',
+    },
+    pageNotFoundGuidance: {
+      id: 'pageNotFound.Guidance.text',
+      defaultMessage: 'Try creating a page in',
+      description: 'page not found guidance text',
+    },
+    pageNotFoundLinkToGoHome: {
+      id: 'pageNotFound.link.to.go.home.text',
+      defaultMessage: 'Go home',
+      description: 'page not found link to go home text',
+    },
+  });
+
+  return (
+    <Layout location={location} title={intl.formatMessage(messages.pageNotFoundTitle)}>
+      <J40MainGridContainer>
+
+        <Grid row>
+          <h1>{intl.formatMessage(messages.pageNotFoundHeading)}</h1>
+        </Grid>
+
+        <Grid row>
+          <p>
+            {intl.formatMessage(messages.pageNotFoundApology)}
+            {' '}
+            <span role="img" aria-label="Pensive emoji">
             😔
-          </span>{' '}
-            we couldn’t find what you were looking for.
-          <br/>
+            </span>{' '}
+            {intl.formatMessage(messages.pageNotFoundApologyDescription)}
+          </p>
+        </Grid>
+
+        <Grid row>
           {process.env.NODE_ENV === 'development' ? (
-              <>
-                <br/>
-                Try creating a page
-                in <code style={codeStyles}>src/pages/</code>.
-                <br/>
-              </>
+              <p>
+                {intl.formatMessage(messages.pageNotFoundGuidance)}
+                <code style={codeStyles}>src/pages/</code>.
+              </p>
             ) : null}
-          <br/>
-          <Link to="/">Go home</Link>.
-        </p>
-      </Grid></Grid>
-    </J40MainGridContainer>
-  </Layout>
+        </Grid>
+
+        <Grid>
+          <p>
+            <Link to="/">{intl.formatMessage(messages.pageNotFoundLinkToGoHome)}</Link>.
+          </p>
+        </Grid>
+
+      </J40MainGridContainer>
+    </Layout>
   );
 };
 

client/src/pages/cejst.module.scss

@@ -1,13 +0,0 @@
-@import "../components/utils.scss";
-
-.explorePageSubHeader {
-  display: flex;
-  flex-wrap: wrap;
-  line-height: 25px;
-  color: $headingFontColor;
-
-  .explorePageHeaderText {
-    max-width: 34rem;
-    font-size: large;
-  }
-}

client/src/pages/cejst.module.scss.d.ts

@@ -1,13 +0,0 @@
-declare namespace CejstModuleScssNamespace {
-  export interface ICejstModuleScss {
-    explorePageHeader;
-    explorePageHeaderText: string;
-  }
-}
-
-declare const CejstModuleScssModule: CejstModuleScssNamespace.ICejstModuleScss & {
-  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: CejstModuleScssNamespace.ICejstModuleScss;
-};
-
-export = CejstModuleScssModule;

client/src/pages/cejst.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import {defineMessages} from 'react-intl';
 import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 import AlertWrapper from '../components/AlertWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
@@ -8,10 +11,6 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/MapWrapper';
 import MapLegend from '../components/MapLegend';
 
-import * as styles from './cejst.module.scss';
-import {Grid} from '@trussworks/react-uswds';
-
-
 interface IMapPageProps {
   location: Location;
 }
@@ -19,33 +18,52 @@ interface IMapPageProps {
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
-  return (<Layout location={location}>
+
+  const intl = useIntl();
+  const messages = defineMessages({
+    exploreToolTitleText: {
+      id: 'exploreTool.title.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool title text',
+    },
+    exploreToolHeadingText: {
+      id: 'exploreTool.heading.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool heading text',
+    },
+    exploreToolPageText: {
+      id: 'exploreTool.page.text',
+      defaultMessage: 'Zoom into the map to see which communities the tool has currently'+
+      'identified as prioritized (the top 25% of communities) or on the'+
+      'threshold. Learn more about the formula and datasets that were'+
+      'used to prioritize these communities on the',
+      description: 'explore the tool page text',
+    },
+
+  });
+
+  return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
     <J40MainGridContainer>
       <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
     </J40MainGridContainer>
 
     <J40MainGridContainer>
+      <h1>{intl.formatMessage(messages.exploreToolTitleText)}</h1>
       <Grid row className={'j40-mb-5'}>
-        <Grid col>
+        <Grid col={12} tablet={{col: 6}}>
           <section>
-            <h1 className={styles.explorePageHeader}>Explore the tool</h1>
-            <div className={styles.explorePageSubHeader}>
-              <div className={styles.explorePageHeaderText}>
-                <p>
-              Zoom into the map to see which communities the tool has currently
-              identified as prioritized (the top 25% of communities) or on the
-              threshold. Learn more about the formula and datasets that were
-              used to prioritize these communities on the
-                  {` `}
-                  <Link to={'/methodology'}>Data & methodology</Link>
-                  {` `}
-              page.
-                </p>
-              </div>
-              <MapLegend />
-            </div>
+            <p>
+              {intl.formatMessage(messages.exploreToolPageText)}
+              {` `}
+              <Link to={'/methodology'}>Data & methodology</Link>
+              {` `}
+                  page.
+            </p>
           </section>
         </Grid>
+        <Grid col={12} tablet={{col: 6}}>
+          <MapLegend />
+        </Grid>
       </Grid>
 
       <Grid row>

client/src/pages/contact.tsx

@@ -14,7 +14,7 @@ const ContactPage = ({location}: ContactPageProps) => {
   const generalEmail = 'screeningtool.feedback@usds.gov';
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={'Contact'}>
 
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>

client/src/pages/index.tsx

@@ -74,7 +74,7 @@ const IndexPage = ({location}: IndexPageProps) => {
   });
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={'About'}>
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>

client/src/pages/methodology.tsx

@@ -18,6 +18,11 @@ interface MethodPageProps {
 const IndexPage = ({location}: MethodPageProps) => {
   const intl = useIntl();
   const messages = defineMessages({
+    methodologyPageTitle: {
+      id: 'methodology.page.title.text',
+      defaultMessage: 'Data and Methodology',
+      description: 'methodology page title text',
+    },
     methodologyPageHeader: {
       id: 'methodology.page.header.text',
       defaultMessage: 'Methodology',
@@ -32,7 +37,7 @@ const IndexPage = ({location}: MethodPageProps) => {
   });
 
   return (
-    <Layout location={location}>
+    <Layout location={location} title={intl.formatMessage(messages.methodologyPageTitle)}>
 
       <J40MainGridContainer>
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>

client/src/pages/timeline.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 
-
 // THIS COMPONENT IS NOT BEING USED
 
 // @ts-ignore
@@ -12,7 +11,7 @@ interface TimelinePageProps {
 }
 
 const TimelinePage = ({location}: TimelinePageProps) => {
-  return (<Layout location={location}>
+  return (<Layout location={location} title={'Timeline'}>
     <section>
       {/* <h1>Timelin</h1>
       <h2>Throughout the Process</h2>