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/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'];