https://github.com/upex-galaxy/upex-monorepo-challenge-wallet
Project Managed by UPEX for Sprint Galaxy using Cypress
https://github.com/upex-galaxy/upex-monorepo-challenge-wallet
Last synced: 7 months ago
JSON representation
Project Managed by UPEX for Sprint Galaxy using Cypress
- Host: GitHub
- URL: https://github.com/upex-galaxy/upex-monorepo-challenge-wallet
- Owner: upex-galaxy
- License: mit
- Created: 2023-05-14T20:08:58.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-02-22T20:37:17.000Z (over 1 year ago)
- Last Synced: 2025-01-04T13:48:19.741Z (9 months ago)
- Language: TypeScript
- Size: 499 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![vscode-logo]][vscode-site] [![typescript-logo]][typescript-site]
A payment application to demonstrate real-world usage of Manual or Automation testing methods, patterns, and workflows.
> 💬 **Note from maintainers**
>
> This application is purely for demonstration and educational purposes. Its setup and configuration resemble typical real-world applications, but it's not a full-fledged production system. Use this app to learn, experiment, tinker, and practice application testing with Cypress.
>
> Happy Testing!
---
## Features
🛠 Built with [React][reactjs], [XState][xstate], [Express][express], [lowdb][lowdb], [Material-UI][material-ui] and [TypeScript][typescript]
⚡️ Zero database dependencies
🚀 Full-stack [Express][express]/[React][reactjs] application with real-world features and tests
👮♂️ Local Authentication
🔥 Database Seeding with End-to-end Tests
💻 CI/CD + [Cypress Cloud][cypresscloud]
___
# Getting Started (versión UPEX)
PASO A PASO by Ely:
1. PRIMERO debemos tener la versión de NODE: 16.14.2
**Cómo instalar y usar esa versión?**
2. Necesitamos: **NVM** (paquete de node para instalar)
3. Commandos para correr en orden:
4. ABRIR EL CMD COMO ADMIN, y correr:
- ESTE PROYECTO NECESITO UNA VERSIÓN ESPECÍFICA DE NODE (16.14.2) PARA CORRER LA APP.
- `nvm list` (para ver qué versiones de NODE tenemos y estamos corriendo ahora)
Vamos a instalar la versión que pide el proyecto con:
`nvm install 16.14.2` (luego con nvm list chequeamos)
- COMANDO para USAR la versión del proyecto:
`nvm use 16.14.2`
- Debería verse algo como: "Now using node v16.14.2 (64-bit)"
5. Luego de Clonar el MONO-REPO localmente, se procede a Instalar TODAS las Dependencias FIJAS con YARN.
- Correr en la terminal del proyecto,
simplemente: `yarn`
(Esto tardará MUCHO tiempo, puede tomar hasta 1 hora inclusive, pero solo se hace una vez)
6. Ahora, una vez finalizado la instalación, ejemplo de mensaje de éxito:
```
[5/5] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 1771.83s.
````
7. Ahora sí! procedemos a intentar levantar la App corriendo:
``yarn dev``
Preferiblemente cambiar los Puertos de localhost antes de ello (es Opcional).
**Deberíamos esperar un tiempo significativo sin hacer nada en la terminal para que termine de compilar y levantar la App exitosamente y que aparezca este mensaje:**
```
[start:react] Compiled successfully!
[start:react]
[start:react] You can now view cypress-realworld-app in the browser.
[start:react]
[start:react] Local: http://localhost:5000
[start:react] On Your Network: http://192.168.0.112:5000
[start:react]
[start:react] Note that the development build is not optimized.
[start:react] To create a production build, use yarn build.
```
8. **✅LISTO
🚀YA ES HORA DE COMENZAR LAS PRUEBAS!🤖🧪✅**
___
# Getting Started (official version)
The Cypress Real-World App (RWA) is a full-stack Express/React application backed by a local JSON database ([lowdb]).
The app is bundled with [example data](./data/database.json) (`data/database.json`) that contains everything you need to start using the app and run tests out-of-the-box.
> 🚩 **Note**
>
> You can login to the app with any of the [example app users](./data/database.json#L2). The default password for all users is `s3cret`.
> Example users can be seen by running `yarn list:dev:users`.
### Prerequisites
The only requirement for this project is to have [Node.js](https://nodejs.org/en/) installed on your machine. Refer to the [.node-version](./.node-version) file for the exact version.
TypeScript will be added as a local dependency to the project, so no need to install it.
### Installation
```shell
yarn
```
#### Mac M1 chip users will need to prepend `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true`.
```shell
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn install
```
### Run the app
```shell
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 `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
```shell
yarn cypress:open
```
> 🚩 **Note**
>
> 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
> {
> env: {
> apiUrl: "http://localhost:13001",
> codeCoverage: {
> url: "http://localhost:13001/__coverage__"
> },
> },
> e2e: {
> baseUrl: "http://localhost:13000"
> }
> }
> ```
>
> 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) |
| unit | [`src/__tests__`](./src/__tests__) |
## Database
- The local JSON database is located in [data/database.json](./data/database.json) and is managed with [lowdb].
- The database is [reseeded](./data/database-seed.json) each time the application is started (via `yarn dev`). Database seeding is done in between each [Cypress End-to-End test](./cypress/tests).
- Updates via the React frontend are sent to the [Express][express] server and handled by a set of [database utilities](backend/database.ts)
- Generate a new database using `yarn db:seed`.
- An [empty database seed](./data/empty-seed.json) is provided along with a script (`yarn start:empty`) to view the application without data.
## Additional NPM Scripts
| Script | Description |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dev | Starts backend in watch mode and frontend |
| 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) |
| dev:google | Starts backend in watch mode and frontend; [Uses Google for Authentication](#google) > [Read Guide](https://docs.cypress.io/guides/testing-strategies/google-authentication.html) |
| start | Starts backend and frontend |
| types | Validates types |
| db:seed | Generates fresh database seeds for json files in /data |
| start:empty | Starts backend, frontend and Cypress with empty database seed |
| tsnode | Customized ts-node command to get around react-scripts restrictions |
| list:dev:users | Provides id and username for users in the dev database |
For a complete list of scripts see [package.json](./package.json)
## Code Coverage Report
The Cypress Real-World App uses the [@cypress/code-coverage](https://github.com/cypress-io/code-coverage) plugin to generate code coverage reports for the app frontend and backend.
To generate a code coverage report:
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 concept and commands needed for programmatic login.
### Auth0
The [Auth0](https://auth0.com/) tests have been rewritten to take advantage of our (currently experimental) [`cy.session`](https://docs.cypress.io/api/commands/session) and [`cy.origin`](https://docs.cypress.io/api/commands/origin) commands.
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).
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.
### Okta
A [guide has been written with detail around adapting the RWA](http://on.cypress.io/okta) to use [Okta][okta] and to explain the programmatic command used for Cypress tests.
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).
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.
### Amazon Cognito
A [guide has been written with detail around adapting the RWA](http://on.cypress.io/amazon-cognito) to use [Amazon Cognito][cognito] as the authentication solution and to explain the programmatic command used for Cypress tests.
Prerequisites include an [Amazon Cognito][cognito] account. Environment variables from [Amazon Cognito][cognito] are provided by the [AWS Amplify CLI][awsamplify].
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.
### Google
A [guide has been written with detail around adapting the RWA](https://docs.cypress.io/guides/testing-strategies/google-authentication.html) to use [Google][google] as the authentication solution and to explain the programmatic command used for Cypress tests.
Prerequisites include an [Google][google] account. Environment variables from [Google][google] are to be placed in the [.env](./.env).
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.
## License
[](https://github.com/cypress-io/cypress/blob/master/LICENSE)
This project is licensed under the terms of the [MIT license](/LICENSE).
[reactjs]: https://reactjs.org
[xstate]: https://xstate.js.org
[express]: https://expressjs.com
[lowdb]: https://github.com/typicode/lowdb
[typescript]: https://typescriptlang.org
[cypresscloud]: https://cloud.cypress.io/projects/7s5okt/runs
[material-ui]: https://material-ui.com
[okta]: https://okta.com
[auth0]: https://auth0.com
[oktacreateapp]: https://developer.okta.com/docs/guides/sign-into-spa/react/create-okta-application/
[cognito]: https://aws.amazon.com/cognito
[awsamplify]: https://amplify.aws
[google]: https://google.com
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Kevin Old
Amir Rustamzadeh
Brian Mann
Gleb Bahmutov
Ben Hong
David Khourshid
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!!
[vscode-logo]: https://img.shields.io/badge/VSCode-black?logo=visualstudiocode&style=for-the-badge
[vscode-site]: https://code.visualstudio.com/
[playwright-logo]: https://img.shields.io/badge/Playwright-black?logo=playwright&style=for-the-badge
[playwright-site]: https://playwright.dev/docs/writing-tests
[typescript-logo]: https://img.shields.io/badge/TypeScript-black?logo=typescript&style=for-the-badge
[typescript-site]: https://www.typescriptlang.org