Merge pull request #266 from GNS-Science/deploy-test

- Fix/120 webpack warnings (#257) - Fix/255 cypress catchup (#258) - Merge pull request #260 from GNS-Science/feature/256_legend_sort - Feature/241 ga tracking (#263) - new GA4 code for GNS Science org; - Merge pull request #265 from GNS-Science/feature/ga4-code-config
GNS-Science · Oct 18, 2022 · 5380073 · 5380073
2 parents 49a1eda + dc7bf51
commit 5380073
Show file tree

Hide file tree

Showing 21 changed files with 1,309 additions and 93 deletions.
diff --git a/.env.example b/.env.example
@@ -47,4 +47,9 @@ REACT_APP_LOWER2=0.05
 //Only set this to test when running cypress locally, activates mock service worker. If you want API to run leave it unset.
 REACT_APP_MSW=test
 
+#package html-to-image has a bug with source map generation, disabling allows CI to run
+GENERATE_SOURCEMAP=false
+
+REACT_APP_GA_ID=G-XXXXXXXX
+REACT_APP_GA_DEBUG_MODE=false
 
diff --git a/.github/workflows/browser_tests.yml b/.github/workflows/browser_tests.yml
@@ -19,6 +19,7 @@ jobs:
           echo REACT_APP_DISCLAIMER_VERSION=versionOne >> .env
           echo REACT_APP_GRAPHQL_ENDPOINT=..../graphql >> .env
           echo REACT_APP_GRAPHQL_API_KEY=$##@! >> .env
+          echo GENERATE_SOURCEMAP=false >> .env
           cat .env
       - name: Node Setup
         uses: actions/setup-node@v3

diff --git a/.github/workflows/deploy_prod_to_s3.yml b/.github/workflows/deploy_prod_to_s3.yml
@@ -30,14 +30,14 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.TOSHI_NEST_PACKAGE_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CI: false
+          GENERATE_SOURCEMAP: false
         run: |
           yarn install --frozen-lockfile
           yarn test
 
       - name: Yarn build
         env:
-          CI: false
+          GENERATE_SOURCEMAP: false
         run: |
           echo "Configure build environment"
           touch .env
@@ -76,6 +76,8 @@ jobs:
           echo "REACT_APP_LOWER1=0.1" >> .env
           echo "REACT_APP_LOWER2=0.05" >> .env
           echo
+          echo "REACT_APP_GA_ID=G-JRRN2P89FB" >> .env
+          echo "REACT_APP_GA_DEBUG_MODE=false" >> .env
           cat .env
           echo "Now add the secrets.."
           echo "REACT_APP_DISCLAIMER_VERSION=${{secrets.REACT_APP_DISCLAIMER_VERSION}}" >> .env

diff --git a/.github/workflows/deploy_test_to_s3.yml b/.github/workflows/deploy_test_to_s3.yml
@@ -30,14 +30,14 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.TOSHI_NEST_PACKAGE_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CI: false
+          GENERATE_SOURCEMAP: false
         run: |
           yarn install --frozen-lockfile
           yarn test
 
       - name: Yarn build
         env:
-          CI: false
+          GENERATE_SOURCEMAP: false
         run: |
           echo "Configure build environment"
           touch .env
@@ -76,6 +76,8 @@ jobs:
           echo "REACT_APP_LOWER1=0.1" >> .env
           echo "REACT_APP_LOWER2=0.05" >> .env
           echo
+          echo "REACT_APP_GA_ID=G-JRRN2P89FB" >> .env
+          echo "REACT_APP_GA_DEBUG_MODE=true" >> .env
           cat .env
           echo "Now add the secrets.."
           echo "REACT_APP_DISCLAIMER_VERSION=${{secrets.REACT_APP_DISCLAIMER_VERSION}}" >> .env
@@ -84,6 +86,7 @@ jobs:
           echo "REACT_APP_RESOLUTION=${{secrets.REACT_APP_RESOLUTION}}" >> .env
           echo "REACT_APP_HAZARD_MODEL=${{secrets.REACT_APP_HAZARD_MODEL}}" >> .env
           echo "REACT_APP_GRID_ID=${{secrets.REACT_APP_GRID_ID}}" >> .env
+
           echo
           yarn build
 

diff --git a/cypress/e2e/HazardCurves.cy.ts b/cypress/e2e/HazardCurves.cy.ts
@@ -7,22 +7,8 @@ describe('Hazard Curves', () => {
     cy.get('button').contains('Accept').click();
   });
 
-  it('Displays no chart', () => {
-    cy.get('[role=curve]').should('not.exist');
-  });
-
-  it('Displays a chart after 400 vs30 is selected', () => {
-    cy.get('[id="mui-component-select-Vs30"]').click();
-    cy.get('li').contains('400').click();
-    cy.get('li').contains('250').click();
-    cy.get('body').click();
-    cy.get('[type="submit"]').click();
-    cy.get('[role=curve]').should('exist');
-  });
-
-  it('Displays chart with one curve group', () => {
-    cy.contains('Hazard Uncertainty');
-    cy.get('[role=curve]').should('have.length', 5);
+  it('Displays inital charts when first visiting page', () => {
+    cy.get('[role="curve"]').should('have.length', 9);
   });
 
   it('Displays out of range error when POE over 100 or below 0 is selected', () => {
@@ -40,13 +26,13 @@ describe('Hazard Curves', () => {
   it('Displays second chart after probability of exceedence selection, then can deselect and chart disappears', () => {
     cy.get('input[id="poe-input"]').clear().type('10');
     cy.get('[type="submit"]').click();
-    cy.contains('Spectral Acceleration Chart');
+    cy.contains('Uniform Hazard Spectra');
     cy.get('input[id="poe-input"]').clear().type('10.5');
     cy.get('[type="submit"]').click();
-    cy.contains('Spectral Acceleration Chart');
+    cy.contains('Uniform Hazard Spectra');
     cy.get('input[id="poe-input"]').clear();
     cy.get('[type="submit"]').click();
-    cy.get('Spectral Acceleration Chart').should('not.exist');
+    cy.get('Uniform Hazard Spectra').should('not.exist');
   });
 
   it('Displays multiple curves after user selects multiple spectral periods', () => {
@@ -55,7 +41,7 @@ describe('Hazard Curves', () => {
     cy.get('li[data-value="SA(0.2)"]').click();
     cy.get('li[data-value="SA(0.3)"]').click();
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should('have.length', 20);
+    cy.get('[role="curve"]').should('have.length', 16);
   });
 
   it('Displays tooltips for all selected spectral periods', () => {
@@ -66,43 +52,44 @@ describe('Hazard Curves', () => {
   });
 
   it('Displays one curve after user deselects spectral periods', () => {
-    cy.get('div').contains('Multiple selected').click();
+    cy.get('div').contains('Multiple selected').click({ force: true });
     cy.get('li[data-value="SA(0.1)"]').click();
     cy.get('li[data-value="SA(0.2)"]').click();
     cy.get('li[data-value="SA(0.3)"]').click();
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should('have.length', 5);
+    cy.get('[role="curve"]').should('have.length', 4);
+    cy.get('[role="listbox"]').focus().type('{esc}');
   });
 
   it('Displays multiple curves when user selects more than one location', () => {
-    cy.get('div[class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"]').click();
-    cy.get('li').contains('Christchurch').click();
+    cy.get('[data-testid="ArrowDropDownIcon"]').first().click({ force: true });
+    cy.get('li').contains('Christchurch').click({ force: true });
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should('have.length', 10);
-    cy.get('div[class="visx-legend-label"]').should('contain.text', 'WLG PGA 400m/s ');
-    cy.get('div[class="visx-legend-label"]').should('contain.text', 'CHC PGA 400m/s');
+    cy.get('[role="curve"]').should('have.length', 8);
+    cy.get('div[class="visx-legend-label"]').should('contain.text', '400m/s PGA Christchurch 400m/s PGA Wellington');
   });
 
   it('Displays curve when user inputs arbitrary latlon value', () => {
-    cy.get('div[class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"]').click();
-    cy.get('li').contains('Christchurch').click();
-    cy.get('div[class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"]').click();
-    cy.get('li').contains('Wellington').click();
+    cy.get('[data-testid="ArrowDropDownIcon"]').first().click({ force: true });
+    cy.get('li').contains('Christchurch').click({ force: true });
+    cy.get('li').contains('Wellington').click({ force: true });
     cy.get('[class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"]').first().type('-42, 173');
     cy.get('[type="submit"]').click({ force: true });
-    cy.get('[role="curve"]').should('have.length', 5);
-    cy.get('div[class="visx-legend-label"]').should('contain.text', '-42.0, 173.0 PGA 400m/s');
+    cy.get('[role="curve"]').should('have.length', 4);
+    cy.get('div[class="visx-legend-label"]').should('contain.text', '400m/s PGA -42.0, 173.0');
   });
 
   it.skip('Displays multiple curves when user selects more than one VS30', () => {
     cy.get('div').contains('400').click();
     cy.get('li').contains('350').click();
     cy.get('[type="submit"]').click({ force: true });
     cy.get('[role="curve"]').should('have.length', 4);
+    cy.get('[role="listbox"]').focus().type('{esc}');
   });
 
   it.skip('When the save data button is clicked, a CSV file is downloaded', () => {
-    cy.get('button').contains('Save Data').click();
-    cy.readFile('hazard-curves.csv');
+    cy.get('button[class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-9z10d6-MuiButtonBase-root-MuiIconButton-root"]').click();
+    cy.get('li').contains('get CSV').click();
+    cy.readFile('./hazard-curves.csv');
   });
 });
diff --git a/cypress/e2e/HomePage.cy.ts b/cypress/e2e/HomePage.cy.ts
@@ -20,61 +20,91 @@ describe('Home Page', () => {
   });
 
   it('Displays the nav bar', () => {
-    cy.get('header').contains('Hazard Curves');
-    cy.get('header').contains('Rupture Sets');
+    cy.get('header').contains('Site Hazard');
     cy.get('header').contains('Hazard Maps');
-    cy.get('header').contains('Info & Input Files');
+    cy.get('header').contains('Coming Features');
+    cy.get('header').contains('Resources');
+    cy.get('header').contains('Help');
   });
 
   it('Displays h1', () => {
     cy.get('h1').contains('National Seismic Hazard Model');
   });
 
-  it('displays intro text', () => {
-    cy.get('p').contains('Welcome to the New Zealand NSHM. This is the 2022 revision to the model. Here’s a link back to the explanation and background info on the model.');
+  it('displays hazard card', () => {
+    cy.get('div').contains('Site hazard and UHS plots.');
   });
 
-  it('displays hazard card', () => {
-    cy.get('div').contains('Hazard Curves to view');
+  it('displays hazard about card', () => {
+    cy.get('div').contains('Background Information.');
   });
 
-  it('displays hazard map card', () => {
-    cy.get('div').contains('Hazard Maps to view');
+  it('displays hazard maps card', () => {
+    cy.get('div').contains('Hazard levels across NZ.');
   });
 
-  it('displays rupture set card', () => {
-    cy.get('div').contains('Rupture Sets to view');
+  it('displays disaggregations card', () => {
+    cy.get('div').contains('Source breakdowns.');
   });
 
-  it('displays info card', () => {
-    cy.get('div').contains('Model Information, Reports, and Input Files');
+  it('displays science reports card', () => {
+    cy.get('div').contains('Model reports and datasets.');
   });
 
-  it('Hazard Curves Nav Link works', () => {
+  it('displays coming features card', () => {
+    cy.get('div').contains('Previews from our backlog');
+  });
+});
+
+describe('NavBarLinks', () => {
+  beforeEach(() => {
     cy.visit('/');
     cy.get('button').contains('Accept').click();
-    cy.get('header').contains('Hazard Curves').click();
+  });
+
+  it('Hazard Curves Nav Link works', () => {
+    cy.get('header').contains('Site Hazard').click();
+    cy.get('[role="menuitem"]').contains('Curves and Spectra').click({ force: true });
     cy.url().should('include', '/HazardCurves');
   });
 
+  it('Disaggregations Nav Link works', () => {
+    cy.get('header').contains('Site Hazard').click();
+    cy.get('[role="menuitem"]').contains('Disaggregations').click({ force: true });
+    cy.url().should('include', '/Disaggs');
+  });
+
   it('Hazard Map Nav Link works', () => {
-    cy.visit('/');
-    cy.get('button').contains('Accept').click();
     cy.get('header').contains('Hazard Maps').click();
     cy.url().should('include', '/HazardMaps');
   });
 
-  it('Rupture Set Nav Link works', () => {
-    cy.visit('/');
-    cy.get('button').contains('Accept').click();
-    cy.get('header').contains('Rupture Sets').click();
-    cy.url().should('include', '/RuptureSets');
+  it('Coming Features Nav Link works', () => {
+    cy.get('header').contains('Coming Features').click({ force: true });
+    cy.url().should('include', '/Previews');
   });
 
-  it('Hazard Map Nav Link works', () => {
-    cy.visit('/');
-    cy.get('button').contains('Accept').click();
-    cy.get('header').contains('Info & Input Files').click();
-    cy.url().should('include', '/info');
+  it('Science Reports Link works', () => {
+    cy.get('header').contains('Resources').click();
+    cy.get('[role="menuitem"]').contains('Science reports').click({ force: true });
+    cy.url().should('include', '/Resources/ScienceReports');
+  });
+
+  it('About Link works', () => {
+    cy.get('header').contains('Help').click();
+    cy.get('[role="menuitem"]').contains('About').click({ force: true });
+    cy.url().should('include', '/About');
+  });
+
+  it('Technical Info Link works', () => {
+    cy.get('header').contains('Help').click();
+    cy.get('[role="menuitem"]').contains('Technical Info').click({ force: true });
+    cy.url().should('include', '/TechInfo');
+  });
+
+  it('Contacts Link works', () => {
+    cy.get('header').contains('Help').click();
+    cy.get('[role="menuitem"]').contains('Contacts').click({ force: true });
+    cy.url().should('include', '/Contacts');
   });
 });
diff --git a/cypress/e2e/LeafletPage.cy.ts b/cypress/e2e/LeafletPage.cy.ts
@@ -1,17 +1,13 @@
-describe('LeafletPage', () => {
+describe('HazardMapsPage', () => {
   before(() => {
-    cy.visit('/RuptureSets');
-    cy.get('button').contains('Accept').click();
+    cy.visit('/HazardMaps');
   });
 
   it('Map renders', () => {
+    cy.get('button').contains('Accept').click({ force: true });
     cy.get('[id="leaflet-map-container"]').should('exist');
   });
 
-  it('Map displays geojson data', () => {
-    cy.get('[class="leaflet-interactive"]').should('have.length', 241);
-  });
-
   it('Map initially displays default map tile layer and changes map tile layer when user selects different option', () => {
     cy.get('img[src*="arcgisonline"]');
     cy.get('[class="leaflet-control-layers-toggle"]').focus();
@@ -21,22 +17,22 @@ describe('LeafletPage', () => {
 
   it('Renders drawer button and opens the drawer when clicked, drawer close button closes drawer', () => {
     cy.get('[data-testid="ChevronRightIcon"]').click();
-    cy.get('[class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-p1ulq7-MuiPaper-root-MuiDrawer-paper"]').should(
-      'be.visible',
-    );
-    cy.get('[data-testid="ChevronLeftIcon"]').click();
-    cy.get('[class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-p1ulq7-MuiPaper-root-MuiDrawer-paper"]').should(
-      'not.be.visible',
-    );
+    cy.get('h4').contains('Hazard Maps').should('exist');
+    cy.get('[data-testid="ChevronLeftIcon"]').click({ force: true });
+    cy.get('h4').contains('Hazard Maps').should('not.be.visible');
   });
 
   it('When fullscreen button is pressed, the map becomes full screen', () => {
-    cy.get('a[title="Full Screen"]').click()
-    cy.get('[id="leaflet-map-container"]').should('have.class', 'leaflet-pseudo-fullscreen')
-  })
+    cy.get('a[title="Full Screen"]').click();
+    cy.get('[id="leaflet-map-container"]').should('have.class', 'leaflet-pseudo-fullscreen');
+  });
 
   it('When fullscreen button is pressed and map is full screen, the map becomes smaller', () => {
-    cy.get('a[title="Exit Full Screen"]').click()
-    cy.get('[id="leaflet-map-container"]').should('not.have.class', 'leaflet-pseudo-fullscreen')
-  })
+    cy.get('a[title="Exit Full Screen"]').click({ force: true });
+    cy.get('[id="leaflet-map-container"]').should('not.have.class', 'leaflet-pseudo-fullscreen');
+  });
+
+  it('Map displays geojson data', () => {
+    cy.get('[class="leaflet-interactive"]').should('have.length', 3478);
+  });
 });
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -23,6 +23,9 @@ Cypress.on('uncaught:exception', (err, runnable) => {
   if (err.message.includes('Cannot read properties of undefined')) {
     return false;
   }
+  if (err.message.includes('> Unexpected token < in JSON at position 0')) {
+    return false;
+  }
 });
 
 // Alternatively you can use CommonJS syntax:

diff --git a/package.json b/package.json
@@ -8,13 +8,15 @@
     "@gns-science/toshi-nest": "^3.6.2",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
+    "adblock-detect-react": "^1.1.0",
     "colormap": "^2.3.2",
     "html-to-image": "^1.10.8",
     "markdown-to-jsx": "^7.1.7",
     "mathjs": "^10.5.3",
     "react": "^18.1.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18.1.0",
+    "react-ga4": "^1.4.1",
     "react-markdown": "^8.0.3",
     "react-relay": "^13.2.0",
     "react-router-dom": "^6.3.0",