Set up for standalone dev

Author: anselmbradford

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Set up Node
         uses: actions/[email protected]
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install Node dependencies
         run: |
@@ -30,6 +30,14 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Start local website server
+        run: |
+          yarn start &
+          sleep 5
+
+      - name: Run browser tests
+        run: yarn run cypress run
+
   backend:
     runs-on: ubuntu-latest
 
@@ -49,7 +57,7 @@ jobs:
       - name: Set up Node
         uses: actions/[email protected]
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install Node dependencies
         run: |

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Set up Node
         uses: actions/[email protected]
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install Node dependencies
         run: |

config/env.js

@@ -98,4 +98,9 @@ function getClientEnvironment(publicUrl) {
   return { raw, stringified };
 }
 
-module.exports = getClientEnvironment;
+module.exports = {
+  getClientEnvironment,
+  /* If testing from within consumerfinance.gov,
+     set `ccdbApiUrl` to '/data-research/consumer-complaints/search/api/v1/' */
+  ccdbApiUrl: 'http://localhost:8000/'
+};

config/webpack.config.dev.js

@@ -9,7 +9,9 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getClientEnvironment = require('./env');
+const env = require('./env');
+const getClientEnvironment = env.getClientEnvironment;
+const ccdbApiUrl = env.ccdbApiUrl;
 const paths = require('./paths');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
@@ -20,7 +22,7 @@ const publicPath = '/';
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 const publicUrl = '';
 // Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
+const envConfig = getClientEnvironment(publicUrl);
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
@@ -159,7 +161,7 @@ module.exports = {
                 loader: require.resolve('string-replace-loader'),
                 options: {
                   search: '@@API',
-                  replace: 'http://localhost:8000/data-research/consumer-complaints/search/api/v1/',
+                  replace: ccdbApiUrl,
                   flags: 'g'
                 }
               }
@@ -231,12 +233,12 @@ module.exports = {
       template: paths.appHtml,
     }),
     // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, envConfig.raw),
     // Add module names to factory functions so they appear in browser profiler.
     new webpack.NamedModulesPlugin(),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
+    new webpack.DefinePlugin(envConfig.stringified),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use

config/webpack.config.prod.js

@@ -16,7 +16,9 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const modules = require('./modules');
-const getClientEnvironment = require('./env');
+const env = require('./env');
+const getClientEnvironment = env.getClientEnvironment;
+const ccdbApiUrl = env.ccdbApiUrl;
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 
 const postcssNormalize = require('postcss-normalize');
@@ -53,7 +55,7 @@ const shouldUseRelativeAssetPaths = publicPath === './';
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 const publicUrl = paths.publicUrlOrPath;
 // Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
+const envConfig = getClientEnvironment(publicUrl);
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 
@@ -327,7 +329,7 @@ module.exports = {
                   loader: require.resolve('string-replace-loader'),
                   options: {
                     search: '@@API',
-                    replace: '/data-research/consumer-complaints/search/api/v1/',
+                    replace: ccdbApiUrl,
                     flags: 'g'
                   }
                 }
@@ -483,7 +485,7 @@ module.exports = {
       // In production, it will be an empty string unless you specify "homepage"
       // in `package.json`, in which case it will be the pathname of that URL.
       // In development, this will be an empty string.
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, envConfig.raw),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
       new ModuleNotFoundPlugin(paths.appPath),
@@ -492,7 +494,7 @@ module.exports = {
       // It is absolutely essential that NODE_ENV is set to production
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
+      new webpack.DefinePlugin(envConfig.stringified),
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
         // both options are optional

cypress.json

@@ -6,5 +6,8 @@
     "requestTimeout": 20000,
     "screenshotOnRunFailure": false,
     "video": false,
-    "baseUrl": "http://localhost:8000/data-research/consumer-complaints/search/"
+    "baseUrl": "http://localhost:3000/",
+    "env": {
+        "ccdbApiUrl": "http://localhost:8000/"
+    }
 }

cypress/integration/common/filters-spec.js

@@ -5,11 +5,11 @@ import moment from 'moment';
 describe( 'Filter Panel', () => {
   beforeEach( () => {
 
-    cy.intercept( 'GET', '**/api/v1/?**&size=0' )
+    cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&size=0' )
       .as( 'getAggs' );
-    cy.intercept( 'GET', '**/api/v1/?**&sort=created_date_desc' )
+    cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&sort=created_date_desc' )
       .as( 'getComplaints' );
-    cy.visit( Cypress.env( 'HOST' ) + '?tab=List' );
+    cy.visit( '?tab=List' );
     cy.wait( '@getAggs' );
     cy.wait( '@getComplaints' );
   } );
@@ -59,7 +59,7 @@ describe( 'Filter Panel', () => {
     } );
 
     it( 'can trigger a pre-selected date range', () => {
-      cy.intercept( 'GET', '**/api/v1/geo/states/?**' )
+      cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + 'geo/states/?**' )
         .as( 'getGeo' );
       cy.get( 'button.map' )
         .click();

cypress/integration/document/document-spec.js

@@ -3,7 +3,7 @@
 describe( 'Document View', () => {
   describe( 'error handling', () => {
     it( 'handles bogus id', () => {
-      cy.visit( Cypress.env( 'HOST' ) + '/detail/ThisIsNotAValidId' )
+      cy.visit( '/detail/ThisIsNotAValidId' )
       cy.get( 'h1' )
         .contains( 'There was a problem retrieving ThisIsNotAValidId' )
         .should( 'be.visible' )
@@ -12,12 +12,12 @@ describe( 'Document View', () => {
 
   describe( 'document detail view', () => {
     beforeEach( () => {
-      cy.intercept( 'GET', '**/api/v1/?**&size=0' )
+      cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&size=0' )
           .as( 'getAggs' );
-      cy.intercept( 'GET', '**/api/v1/?**&sort=created_date_desc' )
+      cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&sort=created_date_desc' )
           .as( 'getComplaints' );
 
-      cy.visit( Cypress.env( 'HOST' ) + '?tab=List' )
+      cy.visit( '?tab=List' )
 
       cy.wait( '@getAggs' );
       cy.wait( '@getComplaints' );
@@ -42,11 +42,12 @@ describe( 'Document View', () => {
 
   describe( 'preserve page state', () => {
     it( 'restores filters after visiting document detail', () => {
-      cy.intercept( 'GET', '**/api/v1/?**&field=all&has_narrative=true&search_term=pizza&size=10&sort=relevance_desc' )
+      cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&field=all&has_narrative=true&search_term=pizza&size=10&sort=relevance_desc' )
         .as( 'getResults' )
 
-      cy.visit( Cypress.env( 'HOST' ) +
-        '?searchText=pizza&has_narrative=true&size=10&sort=relevance_desc&tab=List' )
+      cy.visit(
+        '?searchText=pizza&has_narrative=true&size=10&sort=relevance_desc&tab=List'
+      )
 
       cy.wait( '@getResults' )
 

cypress/integration/list/list-spec.js

@@ -4,17 +4,18 @@ describe( 'List View', () => {
   const nextButton = '.m-pagination .m-pagination_btn-next'
   const prevButton = '.m-pagination .m-pagination_btn-prev'
   beforeEach( () => {
-    cy.intercept( '**/api/v1/**&field=all**sort=created_date_desc' )
+    cy.intercept( Cypress.env( 'ccdbApiUrl' ) + '?**&field=all**sort=created_date_desc' )
         .as( 'getComplaints' )
-    cy.intercept( 'GET', '**/api/v1/?**&size=0' )
+    cy.intercept( 'GET', Cypress.env( 'ccdbApiUrl' ) + '?**&size=0' )
       .as( 'getAggs' );
-    cy.visit( Cypress.env( 'HOST' ) + '?size=10&searchText=debt%20recovery&tab=List' )
+    cy.visit( '?size=10&searchText=debt%20recovery&tab=List' )
     cy.wait( '@getComplaints' );
     cy.wait( '@getAggs' );
   } )
 
   describe( 'initial rendering', () => {
     it( 'contains a list view', () => {
+
       cy.get( '.cards-panel' )
           .should( 'be.visible' )
       cy.get( cardContainers )
@@ -27,7 +28,8 @@ describe( 'List View', () => {
       cy.get( cardContainers ).should( 'have.length', 10 )
       cy.url().should( 'contain', 'size=10' )
 
-      cy.intercept( '**/api/v1/**search_after**' ).as( 'getNextComplaints' )
+      cy.intercept( Cypress.env( 'ccdbApiUrl' ) + '?**search_after**' )
+        .as( 'getNextComplaints' )
 
       cy.get( nextButton ).click()
 
@@ -37,7 +39,7 @@ describe( 'List View', () => {
 
       cy.log( 'reset the pager after sort' )
 
-      cy.intercept( '**/api/v1/**size=10&sort=created_date_desc' )
+      cy.intercept( Cypress.env( 'ccdbApiUrl' ) + '?**size=10&sort=created_date_desc' )
         .as( 'get10Complaints' )
 
       cy.get( '#choose-size' ).select( '10 results' )
@@ -53,10 +55,10 @@ describe( 'List View', () => {
     it( 'changes the sort order', () => {
       cy.url().should( 'contain', 'sort=created_date_desc' )
 
-      cy.intercept( '**/api/v1/**&field=all**&size=10&sort=relevance_desc' )
+      cy.intercept( Cypress.env( 'ccdbApiUrl' ) + '?**&field=all**&size=10&sort=relevance_desc' )
         .as( 'getRelevanceComplaints' )
 
-      cy.intercept( '**/api/v1/**search_after**' )
+      cy.intercept( Cypress.env( 'ccdbApiUrl' ) + '?**search_after**' )
         .as( 'getNextComplaints' )
 
       cy.get( nextButton ).click()

package.json

@@ -60,7 +60,7 @@
     "eslint-plugin-react-hooks": "^1.6.1",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
-    "highcharts": "^9.2.2",
+    "highcharts": "9.2.2",
     "history": "^4.10.1",
     "html-webpack-plugin": "4.0.0-beta.5",
     "http-proxy-middleware": "^0.20.0",

public/index.html

@@ -6,12 +6,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Development Harness</title>
-    <link rel="stylesheet" href="https://cfpb.github.io/capital-framework/dist/static/css/main.min.css">
-
-    <script src="https://cfpb.github.io/capital-framework/dist/static/js/main.min.js"></script>
     <script src="https://files.consumerfinance.gov/ccdb/metadata.js" type="text/javascript"></script>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="ccdb-ui-root"></div>
   </body>
 </html>

src/components/Dialogs/RootModal.jsx

@@ -22,7 +22,7 @@ export const RootModal = ( { modalType, modalProps, onClose } ) => {
     const SpecificModal = MODAL_COMPONENTS[modalType]
 
     return (
-      <ReactModal appElement={ document.querySelector( '#root' ) }
+      <ReactModal appElement={ document.querySelector( '#ccdb-ui-root' ) }
                   isOpen={true}
                   contentLabel="CFPB Modal Dialog"
                   className="modal-body"
@@ -33,7 +33,7 @@ export const RootModal = ( { modalType, modalProps, onClose } ) => {
     )
   }
 
-  return <ReactModal appElement={ document.querySelector( '#root' ) }
+  return <ReactModal appElement={ document.querySelector( '#ccdb-ui-root' ) }
                      isOpen={ false }>
   </ReactModal>
 }

src/index.js

@@ -43,7 +43,7 @@ function main( err ) {
     var ReactDOM = require( 'react-dom' )
     var React = require( 'react' )
 
-    ReactDOM.render( <App />, document.getElementById( 'root' ) )
+    ReactDOM.render( <App />, document.getElementById( 'ccdb-ui-root' ) )
   }
 }