/angular-weather-app

Sample application to show demonstration of auth0-js, cypress and scu components with Angular

Primary LanguageJavaScript

AngularWeatherApp

This is a test project created to demonstrate using Angular, auth0-js from Auth0, Schwarz CoreUI and Cypress testing.

Installation

## install the node_modules
npm install

Set up NPM-Registry

CoreUI is available either via the On-Premise Artifactory REPO_SCHWARZ or via the Cloud Artifactory. The Cloud Artifactory is synchronized daily.

The first step is to set the CoreUI NPM registry. You can find an step-by-step guide here: Setting up the Artifactory As an example I will provide my .npmrc file where you need to put your own credentials.

//.npmrc
@scu:registry=https://schwarzit.jfrog.io/artifactory/api/npm/npm/
//schwarzit.jfrog.io/artifactory/api/npm/npm/:_password=YOUR_PASSWORD
//schwarzit.jfrog.io/artifactory/api/npm/npm/:username=YOUR_USERNAME
//schwarzit.jfrog.io/artifactory/api/npm/npm/:email=YOUR_EMAIL
//schwarzit.jfrog.io/artifactory/api/npm/npm/:always-auth=true

Create a Free Auth0 Account

Go to Auth0 and sign in, then create a new application by clicking on CREATE APPLICATION. After this you should follow the first step of the Quickstart to Configure Auth0 Then you are ready to create auth_variables.ts and paste there your own credentials.

//auth_config.ts
export const AUTH_CONFIG = {
  clientId: "YOUR_CLIENT_ID",
  domain: "YOUR_DOMAIN",
  redirect: "REDIRECT_URL",
  scope: "openid profile email"
};

Create a Test User in Auth0 for testing purposes

Go to Auth0 dashboard and click on User Management, then go to Users, then create a new user by clicking on CREATE USER. On the dialog shown by Auth0, fill the form as follows:

  1. Email: Enter a random email address (e.g., e2e-testing@mydomain.com)
  2. Password: Enter a random password (e.g., s#m3R4nd0m-pass)
  3. Repeat Password: Enter the same password.
  4. Connection: Use the Username-Password-Authentication

After that, click on Save to finish the process.

Lastly, you will have to go to your tenant's settings and set Username-Password-Authentication as the value of the Default Directory property. As mentioned in this page, this field defines the "name of the connection to be used for Password Grant exchanges". In this case, the Username-Password-Authentication value comes from the default the default Database Connections that Auth0 adds to all new tenants. Then you are ready to create cypress_env.json and paste there your own credentials.

//cypress_env.json
{
  "auth_url": "https://your-domain/oauth/token",
  "auth_client_id": "YOUR_CLIENT_ID",
  "auth_client_secret": "YOUR_CLIENT_SECRET",
  "auth_username": "YOUR_USERNAME",
  "auth_password": "YOUR_PASSWORD"
}

Development server

Before starting the frontend server you need to get the backend microservices running. This will be needed for fetching and adding data related to our country and city lists. Go and clone temperature_ms. Then open it locally and in the both directories city-api and country-api run the command go run .

Now you are ready to start the project and benefit from its resources. Run ng serve for a dev server. Navigate to http://localhost:4200/.

Running end-to-end tests with Cypress

Run ng e2e to execute the end-to-end tests via Cypress

Of course, there are different ways for executing the tests.

You can try also in these ways:

Please be sure the server is running when you will use one of the following commands. Run npm run cy:chrome, npm run cy:openor npm run cy:run-record,` to execute the tests via Cypress.

Code coverage from tests

If you want to get combined code coverage from unit + e2e tests just use: npm run cy:run (will execute all tests using default browser Electron 85) npm run cy:chrome (will execute all tests with Chrome browser explicitly) npm run cy:run-record(after executing all tests will record the result on project`s own Cypress Dashboard)

Cypress Tests Result

angular-weather-app

Dockerization

For Dockerizing the app just need to run into root directory the command docker-compose -f docker-compose.yml up --build

Contributing

If you have something to add or idea for improvements feel free to make pull requests. I'm always happy to hear your feedback!

License

apache-2.0