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/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/accessibility.test.js

@@ -0,0 +1,34 @@
+// / <reference types="Cypress" />
+
+// Define at the top of the spec file or just import it
+
+// eslint-disable-next-line require-jsdoc
+function terminalLog(violations) {
+  cy.task(
+      'log',
+      `${violations.length} accessibility violation${
+        violations.length === 1 ? '' : 's'
+      } ${violations.length === 1 ? 'was' : 'were'} detected`,
+  );
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+      ({id, impact, description, nodes}) => ({
+        id,
+        impact,
+        description,
+        nodes: nodes.length,
+      }),
+  );
+
+  cy.task('table', violationData);
+}
+
+
+describe('Accessibility tests', () => {
+  beforeEach(() => {
+    cy.visit('/').get('main').injectAxe();
+  });
+  it('Has no detectable accessibility violations on load', () => {
+    cy.checkA11y(null, {includedImpacts: ['critical']}, terminalLog);
+  });
+});

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

@@ -0,0 +1,22 @@
+// / <reference types="Cypress" />
+
+describe('Census Block Group packet download', () => {
+  const filename = `Screening_Tool_Data.zip`;
+  it('validate file download', () => {
+    cy.visit('localhost:8000/en/methodology');
+
+    cy.get('[data-cy="download-link"]').invoke('attr', 'target', '_blank');
+    cy.intercept(`https://d3jqyw10j8e7p9.cloudfront.net/data-pipeline/data/score/downloadable/${filename}`,
+        {
+          body: 'success',
+          headers: {
+            'Content-Type': 'text/html; charset=utf-8',
+            'Content-Disposition': 'attachment',
+          },
+        },
+    ).as('downloadRequest');
+    cy.get('button[class*="downloadPacket"]').click();
+    cy.wait('@downloadRequest');
+    cy.readFile(`cypress/downloads/${filename}`).should('exist');
+  });
+});

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

@@ -0,0 +1,13 @@
+// / <reference types="Cypress" />
+
+describe('tests links on Explore Tool Page', () => {
+  it('validate file download', () => {
+    cy.visit('localhost:8000/en/cejst');
+
+    // Checks to make sure all a tags have an href:
+    cy.get('a').each(($a) => {
+      const message = $a.text();
+      expect($a, message).to.have.attr('href').not.contain('undefined');
+    });
+  });
+});

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

@@ -0,0 +1,15 @@
+// / <reference types="Cypress" />
+
+describe('Translation Test', () => {
+  it('Sets default language to /en and redirects', () => {
+    cy.visit('http://localhost:8000');
+    cy.url().should('include', '/en/');
+    cy.get('[data-cy=about-screen-tool-heading]').contains('About the screening tool');
+  });
+
+  // Todo VS: Understand how to create es content
+  // it('Sets page content to spanish when visiting Spanish URL', () => {
+  //   cy.visit('http://localhost:8000/es');
+  //   cy.get('h1').contains('Acerca de Justice40');
+  // });
+});

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

@@ -0,0 +1,33 @@
+// / <reference types="Cypress" />
+
+describe('LatLng Test', () => {
+  it('URL starts at zoom level 3', () => {
+    cy.visit('http://localhost:8000/en/cejst');
+    cy.url().should('include', '#3');
+  });
+  it('URL changes to level 4 when you hit the zoom button', () => {
+    cy.get('.mapboxgl-ctrl-zoom-in > .mapboxgl-ctrl-icon').click();
+    cy.url().should('include', '#4');
+  });
+  it('URL includes correct lat/lng coordinates', () => {
+    cy.getMap().then((map) => {
+      cy.panTo(map, [-77.9, 35.04]);
+      cy.url().should('include', '#4/35.04/-77.9');
+    });
+  });
+  it('allows user to specify alternative starting URL', () => {
+    const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978];
+    const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`;
+    cy.visit(expectedURL);
+    cy.getMap().then((map) => {
+      cy.waitForMapIdle(map);
+      cy.url().should('equal', expectedURL);
+      const actualZoom = map.getZoom();
+      const actualCenter = map.getCenter();
+      expect(actualCenter.lat).to.eq(expectedLat);
+      expect(actualCenter.lng).to.eq(expectedLng);
+      expect(actualZoom).to.eq(expectedZoom);
+    });
+  });
+});
+

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

@@ -0,0 +1,29 @@
+// / <reference types="Cypress" />
+
+describe('Tests for the Explore the Map page', () => {
+  beforeEach(() => {
+    cy.viewport('macbook-13');
+    cy.visit('http://localhost:8000/en/cejst');
+  });
+
+  // The below values all assume a 13-inch MB as set in viewport above.
+  // Values will be different for different screens
+  const tests = {
+    'Lower 48': '3.19/38.07/-95.87',
+    'Puerto Rico': '7.65/18.2/-66.583',
+
+    // Todo: Understand what causes these two to hang intermittently ticket #579
+    // 'Alaska': '3/63.28/-162.39',
+    // 'Hawaii': '5.35/20.574/-161.438',
+  };
+
+  for (const [territory, zxy] of Object.entries(tests)) {
+    it(`Can focus on ${territory} `, () => {
+      cy.getMap().then((map) => {
+        cy.get(`[aria-label="Focus on ${territory}"]`).click();
+        cy.waitForMapIdle(map);
+        cy.url().should('include', zxy);
+      });
+    });
+  };
+});

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

@@ -0,0 +1,67 @@
+// / <reference types="Cypress" />
+
+/*
+A risk with this test is that if the feature/area that is currently being selected become non-prioritized, then this
+test will fail. However it would be a major win for that area!
+*/
+import {ENDPOINTS} from './constants';
+
+const devices = [
+  [1024, 720],
+  ['iphone-6', 'portrait'],
+  ['samsung-s10', 'portrait'],
+];
+
+describe('tests that the map side panel renders MapIntroduction component', () => {
+  devices.forEach((device) => {
+    it(`should render MapIntroduction component on ${device[0]} x ${device[1]}`, () => {
+      cy.visit(ENDPOINTS.EXPLORE_THE_TOOL);
+      cy.viewport(device[0], device[1]);
+      cy.get('aside').should('be.visible');
+    });
+  });
+});
+
+/**
+ * Todo: Ticket #423:
+ *
+ * After fixing the PR deployed URL in regards to the mobile view (parent height
+ * not setting to 44vh) by creating a state variable to force a re-render, this
+ * cypress test regressed and is now failing. Need to investigate why.
+ *
+ * See this ticket for more info:
+ * https://app.zenhub.com/workspaces/justice40-60993f6e05473d0010ec44e3/issues/usds/justice40-tool/423
+ *
+ * Tried
+ * 1. reloading the page
+ * 2. forcing the 44vh value via a selector (data-cy and class)
+ */
+// describe('tests that the map side panel renders AreaDetail component', () => {
+//   devices.forEach((device) => {
+//     it(`should render AreaDetail component on ${device[0]} x ${device[1]}`, () => {
+//       // Only set the viewport for mobile devices:
+//       cy.visit(ENDPOINTS.EXPLORE_THE_TOOL);
+//       if (!Number.isInteger(device[0])) cy.viewport(device[0], device[1]);
+//       cy.reload(true);
+//       cy.get('div[class*="mapContainer"]').invoke('attr', 'height', '44vh');
+//       cy.getMap().then((map) => {
+//         // Loop over the click event simulating zooming by a certain amount
+//         // The map will end at the end zoom level
+//         const endZoomLevel = device[0].isInteger ? 11 : 10;
+//         for (let zoom = 3; zoom <= endZoomLevel; zoom++) {
+//           cy.get('.mapboxgl-ctrl-zoom-in > .mapboxgl-ctrl-icon').click();
+//           cy.waitForMapIdle(map);
+//         }
+//         cy.get('.overlays').click('bottomRight');
+//         cy.get('aside').should('be.visible');
+//         cy.get('[data-cy="score"]').should('be.visible');
+//         cy.get('[data-cy="indicatorBox"]').should('be.visible');
+//         cy.get('[data-cy="indicatorBox"]')
+//             .each((indicator) => cy.wrap(indicator)
+//                 // currently the padding-top on desktop = 1.5rem => 24px
+//                 // currently the padding-top on mobile = .8 rem => 8px
+//                 .should('have.css', 'padding-top', `${Number.isInteger(device[0]) ? '24px' : '8px'}`));
+//       });
+//     });
+//   });
+// });

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);
+});