diff --git a/.circleci/config.yml b/.circleci/config.yml index 35236b7121..b26b3ce9c8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -86,7 +86,7 @@ workflows: filters: branches: ignore: - - main + - gh-pages tags: ignore: ignore-e2e requires: @@ -94,6 +94,18 @@ workflows: - backend lint - frontend dependency vulnerability scan - backend dependency vulnerability scan + # - chromatic deployment: + # filters: + # branches: + # ignore: + # - gh-pages + # tags: + # ignore: ignore-e2e + # requires: + # - frontend lint + # - backend lint + # - frontend dependency vulnerability scan + # - backend dependency vulnerability scan # backend jobs - backend api endpoint test: @@ -224,6 +236,7 @@ workflows: - frontend test - yaml test - e2e test + # - chromatic deployment - frontend deploy: name: frontend deploy production @@ -240,6 +253,7 @@ workflows: - frontend test - yaml test - e2e test + # - chromatic deployment # joint jobs - preview deploy: @@ -247,6 +261,7 @@ workflows: branches: ignore: - main + - gh-pages tags: ignore: /^noinfra.*/ requires: @@ -551,6 +566,27 @@ jobs: if [[ $CIRCLE_NODE_INDEX == "4" ]]; then export CYPRESS_RECORD_KEY="$CYPRESS_RECORD_KEY"; fi if [[ $CIRCLE_NODE_INDEX == "4" ]]; then yarn run cy:run:ci -- --record --key $CYPRESS_RECORD_KEY --ci-build-id "$CIRCLE_BUILD_NUM-$CIRCLE_BRANCH" --group "e2e tests admin" --spec "cypress/integration/03-admin/*.spec.js"; fi + # chromatic deployment: + # yaml test: + # docker: + # - image: cimg/node:16.15.0 + # auth: + # username: $DOCKER_EAPD_UN + # password: $DOCKER_EAPD_PW + # steps: + # - checkout + # - attach_workspace: + # at: ~/project/web + # - run: + # name: Install Web Dependencies + # working_directory: ~/project/web + # command: yarn install --frozen-lockfile + # - run: + # name: Deploy to Chromatic + # working_directory: ~/project/web + # no_output_timeout: 60m + # command: yarn deploy-chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} -b build:storybook --ci --exit-once-uploaded --exit-zero-on-changes + # ===== Backend jobs ===== # These all depend on "install dependencies" running first. @@ -674,7 +710,7 @@ jobs: - run: name: build the web app working_directory: ~/project/web - command: API_URL="${<< parameters.env >>_WEB_API_URL}" OKTA_DOMAIN="${<< parameters.env >>_OKTA_DOMAIN}" OKTA_SERVER_ID="${<< parameters.env >>_OKTA_SERVER_ID}" OKTA_CLIENT_ID="${<< parameters.env >>_OKTA_CLIENT_ID}" JWT_SECRET="${<< parameters.env >>_JWT_SECRET}" MONGO_INITDB_DATABASE="${<< parameters.env >>_MONGO_INITDB_DATABASE}" MONGO_URL="${<< parameters.env >>_MONGO_URL}" yarn build + command: ENV="${<< parameters.env >>}" API_URL="${<< parameters.env >>_WEB_API_URL}" TEALIUM_TAG="${<< parameters.env >>_TEALIUM_TAG}" OKTA_DOMAIN="${<< parameters.env >>_OKTA_DOMAIN}" OKTA_SERVER_ID="${<< parameters.env >>_OKTA_SERVER_ID}" OKTA_CLIENT_ID="${<< parameters.env >>_OKTA_CLIENT_ID}" JWT_SECRET="${<< parameters.env >>_JWT_SECRET}" MONGO_INITDB_DATABASE="${<< parameters.env >>_MONGO_INITDB_DATABASE}" MONGO_URL="${<< parameters.env >>_MONGO_URL}" yarn build - persist_to_workspace: root: ~/project paths: diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml deleted file mode 100644 index f5a69ed85e..0000000000 --- a/.github/workflows/chromatic.yml +++ /dev/null @@ -1,25 +0,0 @@ -# Workflow name -name: 'Chromatic Deployment' - -# Event for the workflow -on: - pull_request: - branches: - - main - -# List of jobs -jobs: - test: - # Operating System - runs-on: ubuntu-18.04 - # Job steps - steps: - - uses: actions/checkout@v1 - - run: yarn - #👇 Adds Chromatic as a step in the workflow - - uses: chromaui/action@v1 - # Options required for Chromatic's GitHub Action - with: - #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - token: ${{ secrets.GH_TOKEN }} diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 545319783e..d3db1f3065 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -1,8 +1,8 @@ name: Deploy Storybook on: pull_request: - branches: - - main + types: + - closed paths: [ 'web/.storybook/**', @@ -12,6 +12,7 @@ on: 'web/src/components/**', 'web/src/containers/**' ] + jobs: storybook-deploy: runs-on: ubuntu-18.04 @@ -22,15 +23,25 @@ jobs: uses: actions/checkout@v2.3.1 with: persist-credentials: false + fetch-depth: 0 - name: Node Version uses: actions/setup-node@v2 with: node-version: '16.15.0' - - name: Install and Build + - name: Install Dependencies and Build Storybook + working-directory: ./web run: | - cd web - yarn install + yarn install --frozen-lockfile yarn build:storybook + - name: Publish to Chromatic + uses: chromaui/action@v1 + # Chromatic GitHub Action options + with: + # 👇 Chromatic projectToken, refer to the manage page to obtain it. + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GH_TOKEN }} + storybookBuildDir: docs-build + allowConsoleErrors: true - name: Deploy 🚀 uses: JamesIves/github-pages-deploy-action@4.1.8 with: diff --git a/api/.eslintrc.json b/api/.eslintrc.json index f8945071ba..1497891527 100644 --- a/api/.eslintrc.json +++ b/api/.eslintrc.json @@ -11,6 +11,10 @@ "node": true, "es6": true }, + "globals": { + "window": true, + "utag": true + }, "overrides": [ { "files": ["**/*.test.js", "**/*.endpoint.js", "endpoint-tests/utils.js"], diff --git a/bin/preview-deploy/aws.user-data.sh b/bin/preview-deploy/aws.user-data.sh index 1f6a69dc3f..73a332f0d3 100644 --- a/bin/preview-deploy/aws.user-data.sh +++ b/bin/preview-deploy/aws.user-data.sh @@ -103,7 +103,7 @@ git clone --single-branch -b __GIT_BRANCH__ https://github.com/CMSgov/eAPD.git cd eAPD/web yarn add webpack@5.70.0 webpack-cli@4.9.2 yarn install --frozen-lockfile -API_URL=/api OKTA_DOMAIN="__OKTA_DOMAIN__" OKTA_SERVER_ID="__OKTA_SERVER_ID__" OKTA_CLIENT_ID="__OKTA_CLIENT_ID__" yarn build +API_URL=/api TEALIUM_TAG="__TEALIUM_TAG__" OKTA_DOMAIN="__OKTA_DOMAIN__" OKTA_SERVER_ID="__OKTA_SERVER_ID__" OKTA_CLIENT_ID="__OKTA_CLIENT_ID__" yarn build mv dist/* /app/web cd ~ # Move the API code into place, then go set it up diff --git a/docker-compose.yml b/docker-compose.yml index 40c4114780..d6f2ceda21 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -37,6 +37,7 @@ services: image: cms-eapd/web environment: - API_URL=http://localhost:8081 + - TEALIUM_TAG=${TEALIUM_TAG} - OKTA_DOMAIN=${OKTA_DOMAIN} - OKTA_SERVER_ID=${OKTA_SERVER_ID} - OKTA_CLIENT_ID=${OKTA_CLIENT_ID} diff --git a/integrationTests/.eslintrc.json b/integrationTests/.eslintrc.json index 6a19b397d2..63669abf3b 100644 --- a/integrationTests/.eslintrc.json +++ b/integrationTests/.eslintrc.json @@ -48,13 +48,6 @@ "env": { "jest": true }, - "settings": { - "import/resolver": { - "jest": { - "jestConfigFile": "./jest.config.js" - } - } - }, "rules": { "import/named": "off", "import/order": "off" diff --git a/integrationTests/cypress-setup.sh b/integrationTests/cypress-setup.sh index 644ecdb9ff..4995a94899 100755 --- a/integrationTests/cypress-setup.sh +++ b/integrationTests/cypress-setup.sh @@ -7,4 +7,4 @@ docker-compose exec api yarn run seed cp ../api/seeds/test/tokens.json ./tokens.json -TZ=utc npx cypress $1 $2 $3 +TZ=utc npx cypress $1 $2 $3 --browser chrome diff --git a/integrationTests/package.json b/integrationTests/package.json index 9f3d441082..cf40351e9d 100644 --- a/integrationTests/package.json +++ b/integrationTests/package.json @@ -16,7 +16,7 @@ "url": "git+https://github.com/CMSgov/eAPD.git" }, "author": "", - "license": "ISC", + "license": "CC0-1.0", "engines": { "node": "16.15.0" }, @@ -47,5 +47,14 @@ "knex": "1.0.2", "mocha": "9.2.2", "pg": "8.7.3" + }, + "jest": { + "setupFiles": [ + "./polyfills.test.js" + ], + "globals": { + "window": true, + "utag": true + } } } diff --git a/integrationTests/polyfills.test.js b/integrationTests/polyfills.test.js new file mode 100644 index 0000000000..ae864c91cc --- /dev/null +++ b/integrationTests/polyfills.test.js @@ -0,0 +1,3 @@ +global.utag = { + view: () => {} +}; diff --git a/web/.eslintrc.json b/web/.eslintrc.json index f18152b598..66d55401ff 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -58,6 +58,10 @@ "node": true, "commonjs": true }, + "globals": { + "window": true, + "utag": true + }, "overrides": [ { "files": ["**/*.test.js", "**/*.story.js"], diff --git a/web/package.json b/web/package.json index 31c38410c3..1c118b8f8d 100644 --- a/web/package.json +++ b/web/package.json @@ -19,6 +19,7 @@ "build:storybook": "build-storybook -o ../docs-build", "deploy-storybook": "storybook-to-ghpages --out=../docs-build", "storybook": "start-storybook -p 6006", + "deploy-chromatic": "chromatic", "npm-check": "npx npm-check-updates", "stryker": "TZ=utc stryker run", "prepare": "yarn run snyk-protect", @@ -122,7 +123,7 @@ "react": "17.0.2", "react-countdown": "2.3.2", "react-dom": "17.0.2", - "react-gtm-module": "2.0.11", + "react-gtm-module": "^2.0.11", "react-hook-form": "^7.27.1", "react-redux": "7.2.6", "react-router": "5.2.0", @@ -168,6 +169,7 @@ "@wojtekmaj/enzyme-adapter-react-17": "0.6.6", "axe-core": "4.4.1", "axios-mock-adapter": "1.20.0", + "chromatic": "6.5.4", "crypto-browserify": "3.12.0", "enzyme": "3.11.0", "enzyme-to-json": "3.6.2", diff --git a/web/polyfills.test.js b/web/polyfills.test.js index a21a2f130a..d67f32a03c 100644 --- a/web/polyfills.test.js +++ b/web/polyfills.test.js @@ -10,3 +10,7 @@ global.requestAnimationFrame = callback => { global.cancelAnimationFrame = callback => { setTimeout(callback, 0); }; + +global.utag = { + view: () => {} +}; diff --git a/web/src/components/DateField.js b/web/src/components/DateField.js index 8a4310fd84..c26ce6bb0c 100644 --- a/web/src/components/DateField.js +++ b/web/src/components/DateField.js @@ -128,7 +128,7 @@ const DateField = ({ return ''; } return errorMessage; - }, [errorMessage, state.invalidObject]); + }, [errorMessage, state]); return ( {amt}; +const Template = args => ; + +export const Basic = Template.bind({}); diff --git a/web/src/components/PrivateRoute.js b/web/src/components/PrivateRoute.js index 2eb9e589a1..6689df3ba1 100644 --- a/web/src/components/PrivateRoute.js +++ b/web/src/components/PrivateRoute.js @@ -1,14 +1,14 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import React, { Fragment } from 'react'; import { Route, Redirect } from 'react-router-dom'; import { connect } from 'react-redux'; -const PrivateRoute = ({ authenticated, component: Component, ...rest }) => ( +const PrivateRoute = ({ authenticated, children, ...rest }) => ( authenticated ? ( - + {children} ) : ( ( PrivateRoute.propTypes = { authenticated: PropTypes.bool.isRequired, - component: PropTypes.elementType.isRequired, + children: PropTypes.elementType.isRequired, location: PropTypes.object.isRequired }; diff --git a/web/src/components/Wrapper.js b/web/src/components/Wrapper.js index fb0c130df9..d456c81361 100644 --- a/web/src/components/Wrapper.js +++ b/web/src/components/Wrapper.js @@ -3,7 +3,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import Header from '../layout/header/Header'; import Footer from '../layout/footer/Footer'; -import routes from '../pages/routes'; +import routes from '../pages/mainRoutesList'; import SessionEndingAlert from './SessionEndingAlert'; const cardRoutes = routes.filter(r => r.isCard).map(r => r.path); diff --git a/web/src/components/__snapshots__/PrivateRoute.test.js.snap b/web/src/components/__snapshots__/PrivateRoute.test.js.snap index 513ab7cb44..2226e8a659 100644 --- a/web/src/components/__snapshots__/PrivateRoute.test.js.snap +++ b/web/src/components/__snapshots__/PrivateRoute.test.js.snap @@ -2,6 +2,7 @@ exports[`private route component renders correctly if logged in 1`] = ` `; -exports[`private route component renders correctly if logged in 2`] = ` - -`; +exports[`private route component renders correctly if logged in 2`] = ``; exports[`private route component renders correctly if logged out 1`] = ` { - window.dataLayer.push({ - event: 'pageview' - }); - // Create listener for location changing to track activity history.listen(() => { store.dispatch(setLatestActivity()); diff --git a/web/src/containers/__snapshots__/App.test.js.snap b/web/src/containers/__snapshots__/App.test.js.snap index 0b0bb58a57..39c773b22b 100644 --- a/web/src/containers/__snapshots__/App.test.js.snap +++ b/web/src/containers/__snapshots__/App.test.js.snap @@ -5,6 +5,6 @@ exports[`App component renders correctly 1`] = ` - + `; diff --git a/web/src/index.html b/web/src/index.html index c67644e00e..bfb63d7809 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -3,6 +3,13 @@ + + + +