From 1135329541f2096a3d7358b314fd50f935e2fe80 Mon Sep 17 00:00:00 2001 From: Cacie Prins Date: Wed, 19 Jul 2023 11:44:56 -0400 Subject: [PATCH] Revert "chore: Vite upgrade (#1381)" (#1383) This reverts commit 7b78b6eb6cb87ad22b4227f642ed4775f51c518b. --- .circleci/config.yml | 61 +- .env | 20 +- .github/workflows/main.yml | 28 +- .node-version | 2 +- .nvmrc | 2 +- README.md | 46 +- backend/app.ts | 12 +- backend/helpers.ts | 14 +- buildspec.yml | 2 +- cypress.config.ts => cypress.config.js | 16 +- .../support/auth-provider-commands/cognito.ts | 2 +- cypress/tests/api/api-bankaccounts.spec.ts | 5 - cypress/tests/api/api-banktransfers.spec.ts | 5 - cypress/tests/api/api-comments.spec.ts | 5 - cypress/tests/api/api-contacts.spec.ts | 5 - cypress/tests/api/api-likes.spec.ts | 5 - cypress/tests/api/api-notifications.spec.ts | 5 - cypress/tests/api/api-testdata.spec.ts | 5 - cypress/tests/api/api-transactions.spec.ts | 5 - cypress/tests/api/api-users.spec.ts | 5 - package.json | 75 +- patches/@material-ui+core+4.12.4.patch | 103 - patches/react-virtualized+9.22.5.patch | 12 - index.html => public/index.html | 19 +- src/__tests__/bankaccounts.test.ts | 3 +- src/__tests__/comments.test.ts | 1 - src/__tests__/contacts.test.ts | 1 - src/__tests__/generateSeedData.test.ts | 1 - src/__tests__/likes.test.ts | 1 - src/__tests__/notifications.test.ts | 1 - src/__tests__/transactions.test.ts | 1 - src/__tests__/users.test.ts | 1 - src/containers/AppCognito.tsx | 35 +- src/containers/AppGoogle.tsx | 4 +- src/containers/AppOkta.tsx | 4 +- src/index.auth0.tsx | 45 - src/index.cognito.tsx | 30 - src/index.google.tsx | 30 - src/index.okta.tsx | 40 - src/index.tsx | 87 +- src/machines/authMachine.ts | 10 +- src/setup-tests.js | 11 - src/utils/__tests__/transactionUtils.test.ts | 1 - src/utils/asyncUtils.ts | 13 +- src/utils/portUtils.ts | 5 +- tsconfig.json | 9 +- vite.config.ts | 45 - yarn.lock | 12079 ++++++++++------ 48 files changed, 7860 insertions(+), 5057 deletions(-) rename cypress.config.ts => cypress.config.js (88%) delete mode 100644 patches/@material-ui+core+4.12.4.patch delete mode 100644 patches/react-virtualized+9.22.5.patch rename index.html => public/index.html (74%) delete mode 100644 src/index.auth0.tsx delete mode 100644 src/index.cognito.tsx delete mode 100644 src/index.google.tsx delete mode 100644 src/index.okta.tsx delete mode 100644 src/setup-tests.js delete mode 100644 vite.config.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index f0fbab1e7..98322494a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,7 +7,7 @@ orbs: executors: with-chrome-and-firefox: docker: - - image: "cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1" + - image: "cypress/browsers:node16.16.0-chrome105-ff104-edge" resource_class: large environment: PERCY_TOKEN: @@ -28,32 +28,28 @@ commands: steps: - persist_to_workspace: paths: - # for linux builds - - .cache/Cypress - # for windows builds - - AppData/Local/Cypress/Cache - - project + # for linux builds + - .cache/Cypress + # for windows builds + - AppData/Local/Cypress/Cache + - project root: ~/ attach_ws: steps: - attach_workspace: at: ~/ - setup_linux: - steps: - - run: - name: Install curl - command: apt-get update && apt-get install -y curl + # Setup Windows - # 1. Add nvm and install node 18.16.0 + # 1. Add nvm and install node 16.16.0 # 2. Install yarn setup_node_and_yarn_windows: steps: - run: - name: Install node 18 - command: nvm install 18.16.0 + name: Install node 16 + command: nvm install 16.16.0 - run: - name: Use node 18 - command: nvm use 18.16.0 + name: Use node 16 + command: nvm use 16.16.0 - run: name: Install yarn command: npm i --location=global yarn @@ -91,7 +87,7 @@ commands: default: chrome specPattern: type: string - default: "" + default: '' ciBuildId: type: string group: @@ -107,14 +103,14 @@ commands: - when: condition: and: - - equal: [true, << parameters.isComponent >>] + - equal: [ true, << parameters.isComponent >>] steps: - cypress/run-tests: cypress-command: yarn cypress run --ci-build-id=<> --group="<>" --record --parallel --component - when: condition: and: - - equal: [true, << parameters.isMobile >>] + - equal: [ true, << parameters.isMobile >>] steps: - cypress/run-tests: start-command: yarn start:ci @@ -122,8 +118,8 @@ commands: - when: condition: and: - - equal: [false, << parameters.isMobile >>] - - equal: [false, << parameters.isComponent >>] + - equal: [ false, << parameters.isMobile >>] + - equal: [ false, << parameters.isComponent >>] steps: - cypress/run-tests: start-command: yarn start:ci @@ -134,7 +130,7 @@ commands: jobs: setup_project_and_cypress_linux: executor: with-chrome-and-firefox - steps: + steps: - setup_project_and_cypress setup_project_and_cypress_windows: executor: @@ -158,7 +154,7 @@ jobs: default: chrome specPattern: type: string - default: "" + default: '' ciBuildId: type: string group: @@ -169,15 +165,14 @@ jobs: isComponent: type: boolean default: false - steps: - - setup_linux + steps: - cypress_tests: browser: <> - specPattern: <> - ciBuildId: <> - group: <> + specPattern: <> + ciBuildId: <> + group: <> isMobile: <> - isComponent: <> + isComponent: <> cypress_tests_windows: executor: # executor comes from the "windows" orb @@ -190,7 +185,7 @@ jobs: default: chrome specPattern: type: string - default: "" + default: '' ciBuildId: type: string group: @@ -205,9 +200,9 @@ jobs: - setup_node_and_yarn_windows - cypress_tests: browser: <> - specPattern: <> - ciBuildId: <> - group: <> + specPattern: <> + ciBuildId: <> + group: <> isMobile: <> isComponent: <> diff --git a/.env b/.env index c9096fc43..a246195f6 100644 --- a/.env +++ b/.env @@ -12,24 +12,24 @@ PAGINATION_PAGE_SIZE=10 # Ports used by React (frontend) and Express (backend) PORT=3000 -VITE_BACKEND_PORT=3001 +REACT_APP_BACKEND_PORT=3001 # Uncomment when testing with any of the Auth providers below -#VITE_AUTH_TOKEN_NAME="authAccessToken" +#REACT_APP_AUTH_TOKEN_NAME="authAccessToken" # Auth0 Configuration to be added to .env when running "yarn dev:auth0" #AUTH0_USERNAME="username@domain.com" #AUTH0_PASSWORD="s3cret1234$" -#VITE_AUTH0_DOMAIN="your-auth0-domain.auth0.com" -#VITE_AUTH0_CLIENTID="1234567890" -#VITE_AUTH0_AUDIENCE="https://your-auth0-domain.auth0.com/api/v2/" -#VITE_AUTH0_SCOPE="openid email profile" +#REACT_APP_AUTH0_DOMAIN="your-auth0-domain.auth0.com" +#REACT_APP_AUTH0_CLIENTID="1234567890" +#REACT_APP_AUTH0_AUDIENCE="https://your-auth0-domain.auth0.com/api/v2/" +#REACT_APP_AUTH0_SCOPE="openid email profile" # Okta Configuration to be added to .env when running "yarn dev:okta" #OKTA_USERNAME="username@domain.com" #OKTA_PASSWORD="s3cret1234$" -#VITE_OKTA_DOMAIN="dev-your-domain-id.okta.com" -#VITE_OKTA_CLIENTID="your-client-id" +#REACT_APP_OKTA_DOMAIN="dev-your-domain-id.okta.com" +#REACT_APP_OKTA_CLIENTID="your-client-id" # AWS Cognito #Okta Configuration to be added to .env when running "yarn dev:cognito" # Additional config taken from aws-exports.js @@ -39,6 +39,6 @@ VITE_BACKEND_PORT=3001 # Google Auth Configuration to be added to .env when running "yarn dev:google" # client ID should look something like .apps.googleusercontent.com -# VITE_GOOGLE_CLIENTID="your-client-id" -# VITE_GOOGLE_CLIENT_SECRET="your-client-secret" +# REACT_APP_GOOGLE_CLIENTID="your-client-id" +# REACT_APP_GOOGLE_CLIENT_SECRET="your-client-secret" # GOOGLE_REFRESH_TOKEN="your-refresh-token" diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index d46ed58f9..21cc7706c 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -9,7 +9,7 @@ jobs: install: runs-on: ubuntu-latest container: - image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + image: cypress/browsers:node16.16.0-chrome105-ff104-edge options: --user 1001 steps: - name: Checkout @@ -42,7 +42,11 @@ jobs: uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: "18.16.0" + # The default install for the job is node 18+ + # which has some compatibility issues with openSSL inside this windows job. + # Node 18 updated with OpenSSL provider which causes this compatibility issue + # downgrading node to v16 to use the openssl-legacy-provider by default to prevent this issue + node-version: '16.16.0' - name: Cypress install uses: cypress-io/github-action@v5 @@ -67,7 +71,7 @@ jobs: timeout-minutes: 15 runs-on: ubuntu-latest container: - image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + image: cypress/browsers:node16.16.0-chrome105-ff104-edge options: --user 1001 needs: install strategy: @@ -109,7 +113,7 @@ jobs: parallel: true group: "UI - Chrome" spec: cypress/tests/ui/* - config-file: cypress.config.ts + config-file: cypress.config.js env: CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} @@ -122,7 +126,7 @@ jobs: timeout-minutes: 15 runs-on: ubuntu-latest container: - image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + image: cypress/browsers:node16.16.0-chrome105-ff104-edge options: --user 1001 needs: install strategy: @@ -156,7 +160,7 @@ jobs: parallel: true group: "UI - Chrome - Mobile" spec: cypress/tests/ui/* - config-file: cypress.config.ts + config-file: cypress.config.js env: CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} @@ -168,7 +172,7 @@ jobs: timeout-minutes: 15 runs-on: ubuntu-latest container: - image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + image: cypress/browsers:node16.16.0-chrome105-ff104-edge options: --user 1001 needs: install strategy: @@ -201,7 +205,7 @@ jobs: parallel: true group: "UI - Firefox" spec: cypress/tests/ui/* - config-file: cypress.config.ts + config-file: cypress.config.js env: CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} @@ -213,7 +217,7 @@ jobs: timeout-minutes: 15 runs-on: ubuntu-latest container: - image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + image: cypress/browsers:node16.16.0-chrome105-ff104-edge options: --user 1001 needs: install strategy: @@ -247,7 +251,7 @@ jobs: parallel: true group: "UI - Firefox - Mobile" spec: cypress/tests/ui/* - config-file: cypress.config.ts + config-file: cypress.config.js env: CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} @@ -273,7 +277,7 @@ jobs: uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: "18.16.0" + node-version: '16.16.0' - name: Download the build folders uses: actions/download-artifact@v3 @@ -291,7 +295,7 @@ jobs: parallel: true group: "UI - Electron - Windows" spec: cypress/tests/ui/* - config-file: cypress.config.ts + config-file: cypress.config.js env: CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} diff --git a/.node-version b/.node-version index 8d2a45160..0ff38047b 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18.16.1 \ No newline at end of file +16.16.0 \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 3876fd498..431076a94 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.16.1 +16.16.0 diff --git a/README.md b/README.md index a56727486..d2612817f 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ yarn dev > 🚩 **Note** > > The app will run on port `3000` (frontend) and `3001` (API backend) by default. Please make sure there are no other applications or services running on both ports. -> If you want to change the default ports, you can do so by modifying `PORT` and `VITE_BACKEND_PORT` variables in `.env` file. +> If you want to change the default ports, you can do so by modifying `PORT` and `REACT_APP_BACKEND_PORT` variables in `.env` file. > However, make sure the modified port numbers in `.env` are not committed into Git since the CI environments still expect the application to run on the default ports. ### Start Cypress @@ -114,10 +114,10 @@ yarn cypress:open > 🚩 **Note** > -> If you have changed the default ports, then you need to update Cypress configuration file (`cypress.config.ts`) locally. -> There are three properties that you need to update in `cypress.config.ts`: `e2e.baseUrl`, `env.apiUrl`, and `env.url`. -> The port number in `e2e.baseUrl` corresponds to `PORT` variable in `.env` file. Similarly, the port number in `env.apiUrl` and `env.url` correspond to `VITE_BACKEND_PORT`. -> For example, if you have changed `PORT` to `13000` and `VITE_BACKEND_PORT` to `13001` in `.env` file, then your `cypress.config.ts` should look similar to the following snippet: +> If you have changed the default ports, then you need to update Cypress configuration file (`cypress.config.js`) locally. +> There are three properties that you need to update in `cypress.config.js`: `e2e.baseUrl`, `env.apiUrl`, and `env.url`. +> The port number in `e2e.baseUrl` corresponds to `PORT` variable in `.env` file. Similarly, the port number in `env.apiUrl` and `env.url` correspond to `REACT_APP_BACKEND_PORT`. +> For example, if you have changed `PORT` to `13000` and `REACT_APP_BACKEND_PORT` to `13001` in `.env` file, then your `cypress.config.js` should look similar to the following snippet: > > ```js > { @@ -133,16 +133,15 @@ yarn cypress:open > } > ``` > -> Avoid committing the modified `cypress.config.ts` into Git since the CI environments still expect the application to be run on default ports. +> Avoid committing the modified `cypress.config.js` into Git since the CI environments still expect the application to be run on default ports. ## Tests -| Type | Location | -| --------- | ---------------------------------------- | -| api | [cypress/tests/api](./cypress/tests/api) | -| ui | [cypress/tests/ui](./cypress/tests/ui) | -| component | [src/(next to component)](./src) | -| unit | [`src/__tests__`](./src/__tests__) | +| Type | Location | +| ---- | ---------------------------------------- | +| api | [cypress/tests/api](./cypress/tests/api) | +| ui | [cypress/tests/ui](./cypress/tests/ui) | +| unit | [`src/__tests__`](./src/__tests__) | ## Database @@ -161,7 +160,6 @@ yarn cypress:open | Script | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dev | Starts backend in watch mode and frontend | -| dev:coverage | Starts backend in watch mode and frontend with instrumented code coverage enabled | | dev:auth0 | Starts backend in watch mode and frontend; [Uses Auth0 for Authentication](#auth0) > [Read Guide](http://on.cypress.io/auth0) | | dev:okta | Starts backend in watch mode and frontend; [Uses Okta for Authentication](#okta) > [Read Guide](http://on.cypress.io/okta) | | dev:cognito | Starts backend in watch mode and frontend; [Uses Cognito for Authentication](#amazon-cognito) > [Read Guide](http://on.cypress.io/amazon-cognito) | @@ -181,20 +179,12 @@ The Cypress Real-World App uses the [@cypress/code-coverage](https://github.com/ To generate a code coverage report: -1. Start the development server with coverage enabled by running `yarn dev:coverage`. -2. Run `yarn cypress:run --env coverage=true` and wait for the test run to complete. -3. Once the test run is complete, you can view the report at `coverage/index.html`. +1. Run `yarn cypress:run --env coverage=true` and wait for the test run to complete. +2. Once the test run is complete, you can view the report at `coverage/index.html`. ## 3rd Party Authentication Providers -Support for 3rd party authentication is available in the application to demonstrate the concepts on logging in with a 3rd party provider. - -The app contains different entry points for each provider. There is a separate **index** file for each provider, and to use one, you must replace the current **index.tsx** file with the desired one. The following providers are supported: - -- [Auth0](#auth0) (index.auth0.tsx) -- [Okta](#okta) (index.okta.tsx) -- [Amazon Cognito](#amazon-cognito) (index.cognito.tsx) -- [Google](#google) (index.google.tsx) +Support for 3rd party authentication is available in the application to demonstrate the concept and commands needed for programmatic login. ### Auth0 @@ -202,7 +192,7 @@ The [Auth0](https://auth0.com/) tests have been rewritten to take advantage of o Prerequisites include an Auth0 account and a Tenant configured for use with a SPA. Environment variables from Auth0 are to be placed in the [.env](./.env). For more details see [Auth0 Application Setup](http://on.cypress.io/auth0#Auth0-Application-Setup) and [Setting Auth0 app credentials in Cypress](http://on.cypress.io/auth0#Setting-Auth0-app-credentials-in-Cypress). -To start the application with Auth0, replace the current **src/index.tsx** file with the **src/index.auth0.tsx** file and start the application with `yarn dev:auth0` and run Cypress with `yarn cypress:open`. +Start the application with `yarn dev:auth0` and run Cypress with `yarn cypress:open`. The only passing spec on this branch will be the [auth0 spec](./cypress/tests/ui-auth-providers/auth0.spec.ts); all others will fail. Please note that your test user will need to authorize your Auth0 app before the tests will pass. @@ -212,7 +202,7 @@ A [guide has been written with detail around adapting the RWA](http://on.cypress Prerequisites include an [Okta][okta] account and [application configured for use with a SPA][oktacreateapp]. Environment variables from [Okta][okta] are to be placed in the [.env](./.env). -To start the application with Okta, replace the current **src/index.tsx** file with the **src/index.okta.tsx** file and start the application with `yarn dev:okta` and run Cypress with `yarn cypress:open`. +Start the application with `yarn dev:okta` and run Cypress with `yarn cypress:open`. The **only passing spec on this branch** will be the [okta spec](./cypress/tests/ui-auth-providers/okta.spec.ts); all others will fail. @@ -222,7 +212,7 @@ A [guide has been written with detail around adapting the RWA](http://on.cypress Prerequisites include an [Amazon Cognito][cognito] account. Environment variables from [Amazon Cognito][cognito] are provided by the [AWS Amplify CLI][awsamplify]. -To start the application with Cognito, replace the current **src/index.tsx** file with the **src/index.cognito.tsx** file and start the application with `yarn dev:cognito` and run Cypress with `yarn cypress:open`. +Start the application with `yarn dev:cognito` and run Cypress with `yarn cypress:open`. The **only passing spec on this branch** will be the [cognito spec](./cypress/tests/ui-auth-providers/cognito.spec.ts); all others will fail. @@ -232,7 +222,7 @@ A [guide has been written with detail around adapting the RWA](https://docs.cypr Prerequisites include an [Google][google] account. Environment variables from [Google][google] are to be placed in the [.env](./.env). -To start the application with Google, replace the current **src/index.tsx** file with the **src/index.google.tsx** file and start the application with `yarn dev:google` and run Cypress with `yarn cypress:open`. +Start the application with `yarn dev:google` and run Cypress with `yarn cypress:open`. The **only passing spec** when run with `yarn dev:google` will be the [google spec](./cypress/tests/ui-auth-providers/google.spec.ts); all others will fail. diff --git a/backend/app.ts b/backend/app.ts index af7464851..f4bfadaa0 100644 --- a/backend/app.ts +++ b/backend/app.ts @@ -75,22 +75,22 @@ if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") { app.use(auth); /* istanbul ignore if */ -if (process.env.VITE_AUTH0) { +if (process.env.REACT_APP_AUTH0) { app.use(checkAuth0Jwt); } /* istanbul ignore if */ -if (process.env.VITE_OKTA) { +if (process.env.REACT_APP_OKTA) { app.use(verifyOktaToken); } /* istanbul ignore if */ -if (process.env.VITE_AWS_COGNITO) { +if (process.env.REACT_APP_AWS_COGNITO) { app.use(checkCognitoJwt); } /* istanbul ignore if */ -if (process.env.VITE_GOOGLE) { +if (process.env.REACT_APP_GOOGLE) { app.use(checkGoogleJwt); } @@ -113,6 +113,4 @@ app.use("/bankTransfers", bankTransferRoutes); app.use(express.static(join(__dirname, "../public"))); -getBackendPort().then((port) => { - app.listen(port); -}); +getBackendPort().then((port) => app.listen(port)); diff --git a/backend/helpers.ts b/backend/helpers.ts index 71a5a47be..7f388cca0 100644 --- a/backend/helpers.ts +++ b/backend/helpers.ts @@ -17,22 +17,22 @@ const auth0JwtConfig = { cache: true, rateLimit: true, jwksRequestsPerMinute: 5, - jwksUri: `https://${process.env.VITE_AUTH0_DOMAIN}/.well-known/jwks.json`, + jwksUri: `https://${process.env.REACT_APP_AUTH0_DOMAIN}/.well-known/jwks.json`, }), // Validate the audience and the issuer. - audience: process.env.VITE_AUTH0_AUDIENCE, - issuer: `https://${process.env.VITE_AUTH0_DOMAIN}/`, + audience: process.env.REACT_APP_AUTH0_AUDIENCE, + issuer: `https://${process.env.REACT_APP_AUTH0_DOMAIN}/`, algorithms: ["RS256"], }; // Okta Validate the JWT Signature const oktaJwtVerifier = new OktaJwtVerifier({ - issuer: `https://${process.env.VITE_OKTA_DOMAIN}/oauth2/default`, - clientId: process.env.VITE_OKTA_CLIENTID, + issuer: `https://${process.env.REACT_APP_OKTA_DOMAIN}/oauth2/default`, + clientId: process.env.REACT_APP_OKTA_CLIENTID, assertClaims: { aud: "api://default", - cid: process.env.VITE_OKTA_CLIENTID, + cid: process.env.REACT_APP_OKTA_CLIENTID, }, }); const googleJwtConfig = { @@ -44,7 +44,7 @@ const googleJwtConfig = { }), // Validate the audience and the issuer. - audience: process.env.VITE_GOOGLE_CLIENTID, + audience: process.env.REACT_APP_GOOGLE_CLIENTID, issuer: "accounts.google.com", algorithms: ["RS256"], }; diff --git a/buildspec.yml b/buildspec.yml index 6724d88bf..764f64f3b 100644 --- a/buildspec.yml +++ b/buildspec.yml @@ -14,7 +14,7 @@ batch: compute-type: - BUILD_GENERAL1_MEDIUM image: - - public.ecr.aws/cypress-io/cypress/browsers:cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1 + - public.ecr.aws/cypress-io/cypress/browsers:node16.14.2-slim-chrome100-ff99-edge variables: CY_GROUP_SPEC: - "UI - Chrome|chrome|cypress/tests/ui/*" diff --git a/cypress.config.ts b/cypress.config.js similarity index 88% rename from cypress.config.ts rename to cypress.config.js index a2c41e55b..aa4cda907 100644 --- a/cypress.config.ts +++ b/cypress.config.js @@ -6,6 +6,7 @@ import Promise from "bluebird"; import { percyHealthCheck } from "@percy/cypress/task"; import codeCoverageTask from "@cypress/code-coverage/task"; import { defineConfig } from "cypress"; +import "@cypress/instrument-cra"; dotenv.config({ path: ".env.local" }); dotenv.config(); @@ -31,13 +32,13 @@ module.exports = defineConfig({ // Auth0 auth0_username: process.env.AUTH0_USERNAME, auth0_password: process.env.AUTH0_PASSWORD, - auth0_domain: process.env.VITE_AUTH0_DOMAIN, + auth0_domain: process.env.REACT_APP_AUTH0_DOMAIN, // Okta okta_username: process.env.OKTA_USERNAME, okta_password: process.env.OKTA_PASSWORD, - okta_domain: process.env.VITE_OKTA_DOMAIN, - okta_client_id: process.env.VITE_OKTA_CLIENTID, + okta_domain: process.env.REACT_APP_OKTA_DOMAIN, + okta_client_id: process.env.REACT_APP_OKTA_CLIENTID, okta_programmatic_login: process.env.OKTA_PROGRAMMATIC_LOGIN || false, // Amazon Cognito @@ -49,13 +50,13 @@ module.exports = defineConfig({ // Google googleRefreshToken: process.env.GOOGLE_REFRESH_TOKEN, - googleClientId: process.env.VITE_GOOGLE_CLIENTID, - googleClientSecret: process.env.VITE_GOOGLE_CLIENT_SECRET, + googleClientId: process.env.REACT_APP_GOOGLE_CLIENTID, + googleClientSecret: process.env.REACT_APP_GOOGLE_CLIENT_SECRET, }, component: { devServer: { - framework: "react", - bundler: "vite", + framework: "create-react-app", + bundler: "webpack", }, specPattern: "src/**/*.cy.{js,jsx,ts,tsx}", supportFile: "cypress/support/component.ts", @@ -70,7 +71,6 @@ module.exports = defineConfig({ supportFile: "cypress/support/e2e.ts", viewportHeight: 1000, viewportWidth: 1280, - experimentalRunAllSpecs: true, setupNodeEvents(on, config) { const testDataApiEndpoint = `${config.env.apiUrl}/testData`; diff --git a/cypress/support/auth-provider-commands/cognito.ts b/cypress/support/auth-provider-commands/cognito.ts index 4dc390af6..082aa8546 100644 --- a/cypress/support/auth-provider-commands/cognito.ts +++ b/cypress/support/auth-provider-commands/cognito.ts @@ -1,4 +1,4 @@ -import { Amplify, Auth } from "aws-amplify"; +import Amplify, { Auth } from "aws-amplify"; Amplify.configure(Cypress.env("awsConfig")); diff --git a/cypress/tests/api/api-bankaccounts.spec.ts b/cypress/tests/api/api-bankaccounts.spec.ts index 032d5e71f..0dd7cc062 100644 --- a/cypress/tests/api/api-bankaccounts.spec.ts +++ b/cypress/tests/api/api-bankaccounts.spec.ts @@ -16,11 +16,6 @@ type TestBankAccountsCtx = { describe("Bank Accounts API", function () { let ctx: TestBankAccountsCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-banktransfers.spec.ts b/cypress/tests/api/api-banktransfers.spec.ts index 258939d6b..fbe0db6a8 100644 --- a/cypress/tests/api/api-banktransfers.spec.ts +++ b/cypress/tests/api/api-banktransfers.spec.ts @@ -9,11 +9,6 @@ type TestBankTransferCtx = { describe("Bank Transfer API", function () { let ctx: TestBankTransferCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-comments.spec.ts b/cypress/tests/api/api-comments.spec.ts index c40daccdb..c63b9deaa 100644 --- a/cypress/tests/api/api-comments.spec.ts +++ b/cypress/tests/api/api-comments.spec.ts @@ -13,11 +13,6 @@ type TestCommentsCtx = { describe("Comments API", function () { let ctx: TestCommentsCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-contacts.spec.ts b/cypress/tests/api/api-contacts.spec.ts index 2969b3949..ae8e46461 100644 --- a/cypress/tests/api/api-contacts.spec.ts +++ b/cypress/tests/api/api-contacts.spec.ts @@ -10,11 +10,6 @@ type TestContactsCtx = { describe("Contacts API", function () { let ctx: TestContactsCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-likes.spec.ts b/cypress/tests/api/api-likes.spec.ts index 423dfd660..b0d3db49d 100644 --- a/cypress/tests/api/api-likes.spec.ts +++ b/cypress/tests/api/api-likes.spec.ts @@ -13,11 +13,6 @@ type TestLikesCtx = { describe("Likes API", function () { let ctx: TestLikesCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-notifications.spec.ts b/cypress/tests/api/api-notifications.spec.ts index 97650de64..363e9990b 100644 --- a/cypress/tests/api/api-notifications.spec.ts +++ b/cypress/tests/api/api-notifications.spec.ts @@ -13,11 +13,6 @@ type TestNotificationsCtx = { describe("Notifications API", function () { let ctx: TestNotificationsCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-testdata.spec.ts b/cypress/tests/api/api-testdata.spec.ts index 76fe4d032..cdac2f04e 100644 --- a/cypress/tests/api/api-testdata.spec.ts +++ b/cypress/tests/api/api-testdata.spec.ts @@ -12,11 +12,6 @@ type TestDataCtx = { describe("Test Data API", function () { let ctx: TestDataCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/cypress/tests/api/api-transactions.spec.ts b/cypress/tests/api/api-transactions.spec.ts index 937c29622..a1fead069 100644 --- a/cypress/tests/api/api-transactions.spec.ts +++ b/cypress/tests/api/api-transactions.spec.ts @@ -16,11 +16,6 @@ const apiTransactions = `${Cypress.env("apiUrl")}/transactions`; describe("Transactions API", function () { let ctx: TestTransactionsCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - const isSenderOrReceiver = ({ senderId, receiverId }: Transaction) => isEqual(senderId, ctx.authenticatedUser!.id) || isEqual(receiverId, ctx.authenticatedUser!.id); diff --git a/cypress/tests/api/api-users.spec.ts b/cypress/tests/api/api-users.spec.ts index fbb7338d2..c3c7d1944 100644 --- a/cypress/tests/api/api-users.spec.ts +++ b/cypress/tests/api/api-users.spec.ts @@ -11,11 +11,6 @@ type TestUserCtx = { describe("Users API", function () { let ctx: TestUserCtx = {}; - before(() => { - // Hacky workaround to have the e2e tests pass when cy.visit('http://localhost:3000') is called - cy.request("GET", "/"); - }); - beforeEach(function () { cy.task("db:seed"); diff --git a/package.json b/package.json index 587668950..45e80d03e 100644 --- a/package.json +++ b/package.json @@ -11,28 +11,30 @@ "bugs": { "url": "https://github.com/cypress-io/cypress-realworld-app/issues" }, + "engines": { + "node": "^16.16.0" + }, "dependencies": { "@auth0/auth0-react": "2.1.1", - "@aws-amplify/ui-react": "^5.0.4", + "@aws-amplify/ui-react": "1.2.26", "@graphql-tools/graphql-file-loader": "7.3.10", "@graphql-tools/load": "7.5.9", "@material-ui/core": "4.12.4", "@material-ui/icons": "4.11.3", "@material-ui/lab": "4.0.0-alpha.61", - "@okta/jwt-verifier": "^3.0.1", - "@okta/okta-auth-js": "^7.3.0", - "@okta/okta-react": "^6.7.0", + "@okta/jwt-verifier": "2.3.0", + "@okta/okta-auth-js": "4.9.2", + "@okta/okta-react": "4.1.0", "@types/detect-port": "^1.3.2", "@xstate/react": "2.0.1", - "aws-amplify": "^5.3.3", + "aws-amplify": "4.3.46", "axios": "0.26.1", "clsx": "1.1.1", "date-fns": "2.28.0", - "detect-port": "^1.5.1", + "detect-port": "1.3.0", "dinero.js": "1.9.1", "formik": "2.2.9", "history": "4.10.1", - "postinstall-postinstall": "^2.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-google-login": "5.2.2", @@ -53,8 +55,6 @@ "@cypress/webpack-dev-server": "^1.6.0", "@faker-js/faker": "6.1.2", "@percy/cypress": "2.3.4", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^14.0.0", "@types/bcryptjs": "2.4.2", "@types/bluebird": "3.5.36", "@types/connect-flash": "0.0.37", @@ -67,6 +67,7 @@ "@types/express-session": "1.17.4", "@types/faker": "5.5.9", "@types/http-proxy-middleware": "0.19.3", + "@types/jest": "27.4.1", "@types/json-server": "0.14.4", "@types/jsonwebtoken": "8.5.8", "@types/jwt-decode": "2.2.1", @@ -75,8 +76,8 @@ "@types/morgan": "1.9.3", "@types/node": "14.18.13", "@types/passport": "1.0.7", - "@types/react": "^18.2.14", - "@types/react-dom": "^18.2.6", + "@types/react": "17.0.44", + "@types/react-dom": "17.0.15", "@types/react-infinite-calendar": "2.3.6", "@types/react-router": "5.1.18", "@types/react-router-dom": "5.3.3", @@ -86,20 +87,16 @@ "@types/validator": "13.7.2", "@types/webpack-env": "1.16.4", "@types/yup": "0.29.13", - "@vitejs/plugin-react": "^4.0.2", "aws-sdk": "2.1325.0", "bcryptjs": "2.4.3", "concurrently": "7.1.0", - "connect-history-api-fallback": "1.6.0", "cors": "2.8.5", "cross-env": "7.0.3", "cypress": "^12.13.0", "dotenv": "16.0.0", - "eslint": "^8.44.0", "eslint-config-prettier": "8.5.0", - "eslint-config-react-app": "^7.0.1", "eslint-plugin-cypress": "2.12.1", - "eslint-plugin-prettier": "^5.0.0", + "eslint-plugin-prettier": "4.0.0", "express": "4.17.3", "express-graphql": "0.12.0", "express-jwt": "6.1.1", @@ -109,29 +106,22 @@ "fuse.js": "6.5.3", "graphql": "16.4.0", "graphql-tools": "8.2.7", - "http-proxy-middleware": "0.19.1", "husky": "7.0.4", "istanbul-lib-coverage": "3.2.0", - "jsdom": "^22.1.0", "json": "11.0.0", "jwks-rsa": "2.0.5", "lowdb": "1.0.0", "morgan": "1.10.0", "ncp": "2.0.0", "nodemon": "2.0.15", - "npm": "^9.8.0", "nyc": "15.1.0", "passport": "0.6.0", "passport-local": "1.0.0", - "patch-package": "^7.0.0", - "prettier": "^3.0.0", + "prettier": "2.6.2", + "react-scripts": "4.0.3", "start-server-and-test": "1.14.0", "ts-node": "10.7.0", - "typescript": "4.6.3", - "vite": "^4.4.2", - "vite-plugin-eslint": "^1.8.1", - "vite-plugin-istanbul": "^4.1.0", - "vitest": "^0.33.0" + "typescript": "4.6.3" }, "resolutions": { "@types/express": "4.17.2", @@ -139,11 +129,10 @@ }, "scripts": { "dev": "cross-env NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", - "dev:coverage": "cross-env NODE_ENV=development CYPRESS_COVERAGE=true concurrently yarn:start:react yarn:start:api:watch", - "dev:auth0": "cross-env VITE_AUTH0=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", - "dev:okta": "cross-env VITE_OKTA=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", - "dev:cognito": "cross-env VITE_AWS_COGNITO=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", - "dev:google": "cross-env VITE_GOOGLE=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", + "dev:auth0": "cross-env REACT_APP_AUTH0=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", + "dev:okta": "cross-env REACT_APP_OKTA=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", + "dev:cognito": "cross-env REACT_APP_AWS_COGNITO=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", + "dev:google": "cross-env REACT_APP_GOOGLE=true NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch", "predev:cognito": "yarn build:aws-exports-es5", "predev:cognito:ci": "yarn copy:mock:awsexports && yarn copy:mock:awsexportses5", "copy:mock:awsexports": "ncp scripts/mock-aws-exports.js src/aws-exports.js", @@ -152,7 +141,7 @@ "start": "cross-env NODE_ENV=development concurrently yarn:start:react yarn:start:api", "start:ci": "cross-env NODE_ENV=test concurrently yarn:start:react:proxy-server yarn:start:api", "prestart:ci": "yarn predev:cognito:ci", - "start:react": "vite", + "start:react": "react-scripts -r @cypress/instrument-cra start", "start:empty": "cross-env NODE_ENV=development EMPTY_SEED=true concurrently yarn:start:react yarn:start:api:watch", "lint": "eslint && prettier --check \"**/**.{ts,js,tsx}\" \"*.{json,md,yml}\"", "list:dev:users": "cat data/database.json | json -a users | json -a id username", @@ -166,8 +155,8 @@ "test": "yarn cypress:open", "test:headless": "yarn cypress:run", "test:api": "yarn cypress:run --spec 'cypress/tests/api/*'", - "test:unit": "vitest", - "test:unit:ci": "vitest --run", + "test:unit": "react-scripts test --runInBand", + "test:unit:ci": "react-scripts test --watchAll false --ci --runInBand", "test:component:ci": "yarn cypress:run:component", "start:api": "yarn tsnode --files backend/app.ts", "start:api:watch": "nodemon --exec yarn tsnode --watch 'backend' backend/app.ts", @@ -185,14 +174,12 @@ "prestart:empty": "yarn db:seed:empty", "prebuild": "yarn types", "prebuild:ci": "yarn predev:cognito:ci", - "build:ci": "cross-env CYPRESS_COVERAGE=true vite build", - "build": "vite build", + "build:ci": "react-scripts build", + "build": "react-scripts build", + "eject": "react-scripts eject", "codesandbox:start:api": "yarn tsnode:not-instrumented --files backend/app.ts", - "codesandbox:start": "NODE_ENV=development TSC_COMPILE_ON_ERROR=true concurrently \"vite\" yarn:start:api:codesandbox", - "postinstall": "husky install && patch-package" - }, - "engines": { - "node": "^16.16.0 || ^18.0.0 || >=20.0.0" + "codesandbox:start": "NODE_ENV=development TSC_COMPILE_ON_ERROR=true concurrently \"react-scripts start\" yarn:start:api:codesandbox", + "postinstall": "husky install" }, "eslintConfig": { "env": { @@ -211,6 +198,12 @@ "no-unused-expressions": 0 } }, + "jest": { + "watchPathIgnorePatterns": [ + "/data/database.json", + "/data/database-seed.json" + ] + }, "husky": { "hooks": { "pre-push": "yarn types" diff --git a/patches/@material-ui+core+4.12.4.patch b/patches/@material-ui+core+4.12.4.patch deleted file mode 100644 index 696ff8764..000000000 --- a/patches/@material-ui+core+4.12.4.patch +++ /dev/null @@ -1,103 +0,0 @@ -diff --git a/node_modules/@material-ui/core/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -index 4972129..6516a00 100644 ---- a/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -@@ -158,11 +158,23 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - } - }; - }, []); -+ -+ var _React$useState2 = React.useState(false), -+ mountedState = _React$useState2[0], -+ setMountedState = _React$useState2[1]; -+ -+ React.useEffect(function () { -+ setMountedState(true); -+ }, []); -+ var enableTouchRipple = mountedState && !disableRipple && !disabled; -+ - React.useEffect(function () { -- if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (focusVisible && focusRipple && !disableRipple && mountedState) { -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } -- }, [disableRipple, focusRipple, focusVisible]); -+ }, [disableRipple, focusRipple, focusVisible, mountedState]); - - function useRippleHandler(rippleAction, eventCallback) { - var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple; -@@ -269,7 +281,9 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - keydownRef.current = false; - event.persist(); - rippleRef.current.stop(event, function () { -- rippleRef.current.pulsate(event); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(event); -+ } - }); - } - -@@ -305,15 +319,6 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - var handleOwnRef = (0, _useForkRef.default)(focusVisibleRef, buttonRef); - var handleRef = (0, _useForkRef.default)(handleUserRef, handleOwnRef); - -- var _React$useState2 = React.useState(false), -- mountedState = _React$useState2[0], -- setMountedState = _React$useState2[1]; -- -- React.useEffect(function () { -- setMountedState(true); -- }, []); -- var enableTouchRipple = mountedState && !disableRipple && !disabled; -- - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(function () { -diff --git a/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -index b4be26f..06b0d63 100644 ---- a/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -@@ -125,7 +125,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) - }), []); - React.useEffect(() => { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - -diff --git a/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -index 58cfc64..de2db57 100644 ---- a/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -@@ -136,7 +136,9 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - }, []); - React.useEffect(function () { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - -diff --git a/node_modules/@material-ui/core/umd/material-ui.development.js b/node_modules/@material-ui/core/umd/material-ui.development.js -index ad23fd3..fb4cb53 100644 ---- a/node_modules/@material-ui/core/umd/material-ui.development.js -+++ b/node_modules/@material-ui/core/umd/material-ui.development.js -@@ -11208,7 +11208,9 @@ - }, []); - React.useEffect(function () { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - diff --git a/patches/react-virtualized+9.22.5.patch b/patches/react-virtualized+9.22.5.patch deleted file mode 100644 index df91e7ccf..000000000 --- a/patches/react-virtualized+9.22.5.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js -index d00f0f1..8bf5a05 100644 ---- a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js -+++ b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js -@@ -71,4 +71,4 @@ export function unregisterScrollListener(component, element) { - } - } - } --import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js"; -\ No newline at end of file -+// import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js"; -\ No newline at end of file diff --git a/index.html b/public/index.html similarity index 74% rename from index.html rename to public/index.html index 8baf4963e..26cc914ce 100644 --- a/index.html +++ b/public/index.html @@ -1,8 +1,8 @@ - + - + @@ -11,13 +11,13 @@ manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - + @@ -25,15 +25,6 @@
- - -