Merge pull request #179 from aws-geospatial/feature_ALS-1776_cypress_…

…report_final

[Enhancements] Cypress reporting

.env.example

@@ -6,6 +6,13 @@ VITE_AWS_CF_TEMPLATE=https://us-east-1.console.aws.amazon.com/cloudformation/hom
 VITE_APPLE_APP_STORE_LINK=https://apps.apple.com/app/amazon-location-demo/id1670477797?trk=18347227-315a-4761-a6a7-07e2ffdf08b6&sc_channel=el
 VITE_GOOGLE_PLAY_STORE_LINK=https://play.google.com/store/apps/details?id=com.aws.amazonlocation&trk=7246fb27-1ed0-4c04-ba03-7af6c090739b&sc_channel=el
 VITE_APP_VERSION=2.1.0
+VITE_MIGRATE_FROM_GOOGLE_MAPS_PAGE=1
+VITE_MIGRATE_A_WEB_APP_PAGE=1
+VITE_MIGRATE_AN_ANDROID_APP_PAGE=1
+VITE_MIGRATE_AN_IOS_APP_PAGE=1
+VITE_MIGRATE_A_WEB_SERVICE_PAGE=1
+VITE_PRICING_PAGE=1
+
 # optional
 VITE_NL_BASE_URL=https://XXXXXXXXXX.execute-api.XX-XXXX-X.amazonaws.com/api
 VITE_NL_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

.gitignore

@@ -18,6 +18,7 @@ build
 coverage
 cypress/screenshots
 cypress/videos
+cypress/reports
 allure-report
 allure-results
 

README.md

@@ -2,15 +2,16 @@
 
 ## Requirements
 
-1. Run the [CF template](https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/create?stackName=amazon-location-default-unauth-resources&templateURL=https://amazon-location-demo-resources.s3.us-west-2.amazonaws.com/default-unauth-resources-template.yaml) or use the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `us-east-1` region using your own AWS account and get `IdentityPoolId`, `PinPointAppId`, `WebSocketUrl` from stack output's tab.
+1. Run the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `us-east-1` region using your own AWS account and get `IdentityPoolId`, `PinPointAppId`, `WebSocketUrl` from stack output's tab.
    - `IdentityPoolId` value will be added to `.env` file against `VITE_AWS_COGNITO_IDENTITY_POOL_IDS` and `VITE_PINPOINT_IDENTITY_POOL_ID`.
    - `PinPointAppId` value will be added to `.env` file against `VITE_PINPOINT_APPLICATION_ID`.
    - `WebSocketUrl` value will be added to `.env` file against `VITE_AWS_WEB_SOCKET_URLS`.
-2. Run the [CF template](https://ap-southeast-1.console.aws.amazon.com/cloudformation/home?region=ap-southeast-1#/stacks/create?stackName=amazon-location-default-unauth-resources&templateURL=https://amazon-location-demo-resources.s3.us-west-2.amazonaws.com/default-unauth-resources-template.yaml) or use the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `ap-southeast-1` region using your own AWS account and get `IdentityPoolId`, `WebSocketUrl` from stack output's tab **[Necessary if you want *GrabMaps* to be enabled]**.
+2. Run the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `ap-southeast-1` region using your own AWS account and get `IdentityPoolId`, `WebSocketUrl` from stack output's tab **[Necessary if you want *GrabMaps* to be enabled]**.
    - `IdentityPoolId` value will be added to `.env` file against `VITE_AWS_COGNITO_IDENTITY_POOL_IDS` **(comma separated for multiple values)**.
    - `WebSocketUrl` value will be added to `.env` file against `VITE_AWS_WEB_SOCKET_URLS` **(comma separated for multiple values)**.
 3. Value for `VITE_AWS_CF_TEMPLATE`, `VITE_APPLE_APP_STORE_LINK`, `VITE_GOOGLE_PLAY_STORE_LINK` can be added as it is to `.env` file from `.env.examples`.
 4. Value for `VITE_APP_VERSION` needs to be populated with the correct version at the time of deployment in the following format `2.1.0`.
+5. Values for `VITE_MIGRATE_FROM_GOOGLE_MAPS_PAGE`, `VITE_MIGRATE_A_WEB_APP_PAGE`, `VITE_MIGRATE_AN_ANDROID_APP_PAGE`, `VITE_MIGRATE_AN_IOS_APP_PAGE`, `VITE_MIGRATE_A_WEB_SERVICE_PAGE` and `VITE_PRICING_PAG` can either be `1` or `0` to either enable or disable the respective pages.
 
 #### Env keys required in `.env` file, see `.env.example` for reference
 
@@ -22,6 +23,12 @@
 > VITE_APPLE_APP_STORE_LINK<br />
 > VITE_GOOGLE_PLAY_STORE_LINK<br />
 > VITE_APP_VERSION<br />
+> VITE_MIGRATE_FROM_GOOGLE_MAPS_PAGE<br />
+> VITE_MIGRATE_A_WEB_APP_PAGE<br />
+> VITE_MIGRATE_AN_ANDROID_APP_PAGE<br />
+> VITE_MIGRATE_AN_IOS_APP_PAGE<br />
+> VITE_MIGRATE_A_WEB_SERVICE_PAGE<br />
+> VITE_PRICING_PAGE<br />
 
 #### Env keys optional in `.env` file, see `.env.example` for reference
 > VITE_NL_BASE_URL<br />
@@ -57,8 +64,36 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 > WEB_SOCKET_URL<br />
 > COGNITO_EMAIL<br />
 > COGNITO_PASSWORD<br />
-
-#### If you are configuring Github actions fo the e2e tests, make sure to add these keys to the secrets section of the repo with a `CYPRESS_` prefix.
+> PINPOINT_IDENTITY_POOL_ID<br />
+> PINPOINT_APPLICATION_ID<br />
+
+#### If you are configuring Github actions for the E2E tests, make sure to add the below env keys to the secrets section of the repo.
+
+1. The `/extra/cloudformation/main-cf-template.yaml` needs to be deployed on one of the production accounts in the `us-east-1` region.
+2. Download this `/extra/cloudformation/main-cf-template.yaml` on local machine.
+3. Login to AWS console.
+4. Go to CloudFormation service.
+5. Click on Create Stack → Upload a Template file → Select the template file downloaded above.
+6. Click Next → Enter your email → Next → Create the stack.
+7. Once, the stack is created → Go to outputs of the stack & Copy them all.
+8. Now, Browse to Github [amazon-location-features-demo-web](https://github.com/aws-geospatial/amazon-location-features-demo-web) repo.
+9. Under the repo settings → Go to Secrets & Variables → Click on Actions.
+10. Now, Add/Update the values in secrets as per the output values gathered from the cloudformation
+
+```
+WEB_DOMAIN: "https://location.aws.com" // Production URL
+WEB_DOMAIN_USERNAME: "XXXXX" // This is the username for the web domain (only required for dev and qa environments, not needed for prod environment)
+WEB_DOMAIN_PASSWORD: "XXXXX" // This is the password for the web domain (only required for dev and qa environments, not needed for prod environment)
+IDENTITY_POOL_ID: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab" // Stack output as IdentityPoolId
+USER_DOMAIN: "https://XXXXXXXXXXXX.XXXX.XX-XXXX-X.amazoncognito.com/" // Stack output as UserDomain
+USER_POOL_CLIENT_ID: "XXXXXXXXXXXX" // Stack output as UserPoolClientId
+USER_POOL_ID: "XX-XXXX-X_XXXXXXXXXX" // Stack output as UserPoolId
+WEB_SOCKET_URL: "XXXXXXXXXXX-ats.iot.us-east-1.amazonaws.com" // Stack output as WebSocketUrl
+COGNITO_EMAIL: "[email protected]" // Stack output as UserEmail
+COGNITO_PASSWORD: "XXXXXX" // This is the password for the cognito user (received on registered email)
+VITE_PINPOINT_IDENTITY_POOL_ID: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab" // Same as VITE_PINPOINT_IDENTITY_POOL_ID
+VITE_PINPOINT_APPLICATION_ID: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" // Same as VITE_PINPOINT_APPLICATION_ID
+```
 
 #### `npm run cypress`
 
@@ -76,13 +111,25 @@ Runs Cypress tests to completion in a browser which can be specified in the `opt
 
 #### Env keys required in `security-tests/.env` file, see `security-tests/.env.example` for reference.
 
-> VITE_AWS_COGNITO_IDENTITY_POOL_ID_TEST</br>
-> VITE_AWS_USER_POOL_ID_TEST</br>
-> VITE_AWS_USER_POOL_WEB_CLIENT_ID_TEST</br>
-> VITE_AWS_COGNITO_USERNAME_TEST</br>
-> VITE_AWS_COGNITO_PASSWORD_TEST</br>
-> VITE_AWS_IAM_AUTH_ROLE_NAME_TEST</br>
-> VITE_AWS_IAM_UNAUTH_ROLE_NAME_TEST</br>
+> IDENTITY_POOL_ID</br>
+> USER_POOL_ID</br>
+> USER_POOL_CLIENT_ID</br>
+> COGNITO_EMAIL</br>
+> COGNITO_PASSWORD</br>
+> IAM_AUTH_ROLE_NAME</br>
+> IAM_UNAUTH_ROLE_NAME</br>
+
+#### If you are configuring Github actions for the Security tests, make sure to add the below env keys to the secrets section of the repo. You will need to use the values from the stack that was created when setting up the E2E tests.
+
+```
+IDENTITY_POOL_ID: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab" // Stack output as IdentityPoolId
+USER_POOL_ID: "XX-XXXX-X_XXXXXXXXXX" // Stack output as UserPoolId
+USER_POOL_CLIENT_ID: "XXXXXXXXXXXX" // Stack output as UserPoolClientId
+COGNITO_EMAIL: "[email protected]" // Stack output as UserEmail
+COGNITO_PASSWORD: "XXXXXX" // This is the password for the cognito user (received on registered email)
+IAM_AUTH_ROLE_NAME: "amazon-location-resources-AmazonLocationDemoCognit-XXXXXXXX" // Stack output as IAMAuthRoleName
+IAM_UNAUTH_ROLE_NAME: "amazon-location-resources-AmazonLocationDemoCognit-XXXXXXXX" // Stack output as IAMUnAuthRoleName
+```
 
 #### `npm run security-tests`
 
@@ -95,6 +142,13 @@ Runs Security tests insuring policies match the expected values.
 > VITE_PINPOINT_IDENTITY_POOL_ID<br />
 > VITE_PINPOINT_APPLICATION_ID<br />
 
+#### If you are configuring Github actions for the Unit tests, make sure to add the below env keys to the secrets section of the repo. You will need to use the values from the stack that was created when setting up the app env in the very first step (These should already exist if you have setup secrets for E2E tests).
+
+```
+VITE_PINPOINT_IDENTITY_POOL_ID: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab" // Same as VITE_PINPOINT_IDENTITY_POOL_ID
+VITE_PINPOINT_APPLICATION_ID: "XXXXXXXX" // Same as VITE_PINPOINT_APPLICATION_ID
+```
+
 #### `npm run test`
 
 Run all the test cases for all the components within the repo.
@@ -103,50 +157,6 @@ Run all the test cases for all the components within the repo.
 
 Run all the test cases for all the components within the repo and provides a coverage report.
 
-## Resources
-
-### Amazon Location Service
-
-> Maps (Name - Style)
-
-- location.aws.com.demo.maps.Esri.DarkGrayCanvas - VectorEsriDarkGrayCanvas
-- location.aws.com.demo.maps.Esri.Imagery - RasterEsriImagery
-- location.aws.com.demo.maps.Esri.Light - VectorEsriTopographic
-- location.aws.com.demo.maps.Esri.LightGrayCanvas - VectorEsriLightGrayCanvas
-- location.aws.com.demo.maps.Esri.Navigation - VectorEsriNavigation
-- location.aws.com.demo.maps.Esri.Streets - VectorEsriStreets
-- location.aws.com.demo.maps.HERE.Explore - VectorHereExplore
-- location.aws.com.demo.maps.HERE.Contrast - VectorHereContrast
-- location.aws.com.demo.maps.HERE.ExploreTruck - VectorHereExploreTruck
-- location.aws.com.demo.maps.HERE.Hybrid - HybridHereExploreSatellite
-- location.aws.com.demo.maps.HERE.Imagery - RasterHereExploreSatellite
-- location.aws.com.demo.maps.Grab.StandardLight - VectorGrabStandardLight
-- location.aws.com.demo.maps.Grab.StandardDark - VectorGrabStandardDark
-- location.aws.com.demo.maps.OpenData.StandardLight - VectorOpenDataStandardLight
-- location.aws.com.demo.maps.OpenData.StandardDark - VectorOpenDataStandardDark
-- location.aws.com.demo.maps.OpenData.VisualizationLight - VectorOpenDataVisualizationLight
-- location.aws.com.demo.maps.OpenData.VisualizationDark - VectorOpenDataVisualizationDark
-
-> Place indexes (Name)
-
-- location.aws.com.demo.places.Esri.PlaceIndex
-- location.aws.com.demo.places.HERE.PlaceIndex
-- location.aws.com.demo.places.Grab.PlaceIndex
-
-> Route calculators (Name)
-
-- location.aws.com.demo.routes.Esri.RouteCalculator
-- location.aws.com.demo.routes.HERE.RouteCalculator
-- location.aws.com.demo.routes.Grab.RouteCalculator
-
-> Geofence collections (Name)
-
-- location.aws.com.demo.geofences.GeofenceCollection
-
-> Trackers (Name)
-
-- location.aws.com.demo.trackers.Tracker
-
 ## Licensing
 
 - This project is licensed under the MIT-0 License. See [LICENSE](https://github.com/aws-samples/amazon-location-samples/blob/main/LICENSE).

cypress.config.ts

@@ -1,9 +1,12 @@
 import { defineConfig } from "cypress";
 import { cypressBrowserPermissionsPlugin } from "cypress-browser-permissions";
+import { afterRunHook, beforeRunHook } from "cypress-mochawesome-reporter/lib";
 
 export default defineConfig({
 	viewportWidth: 1024,
 	viewportHeight: 733,
+	retries: 2,
+	video: false,
 	env: {
 		browserPermissions: {
 			notifications: "allow",
@@ -22,12 +25,30 @@ export default defineConfig({
 				}
 			});
 
+			on("before:run", async details => {
+				console.log("override before:run");
+				await beforeRunHook(details);
+			});
+
+			on("after:run", async () => {
+				console.log("override after:run");
+				await afterRunHook();
+			});
+
 			// eslint-disable-next-line no-param-reassign
 			config = cypressBrowserPermissionsPlugin(on, config);
 			return config;
 		},
 		specPattern: "./cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
 		supportFile: "cypress/support/index.js",
+		reporter: "cypress-mochawesome-reporter",
+		reporterOptions: {
+			reportDir: "cypress/reports",
+			charts: true,
+			reportPageTitle: "ALS E2E Report",
+			embeddedScreenshots: true,
+			inlineAssets: true
+		},
 		chromeWebSecurity: false,
 		env: {
 			browserPermissions: {

cypress.env.json.example

@@ -8,6 +8,8 @@
 	"USER_POOL_ID": "XX-XXXX-X_XXXXXXXXXX",
 	"WEB_SOCKET_URL": "XXXXXXXXXX-ats.iot.XX-XXXX-X.amazonaws.com",
 	"COGNITO_EMAIL": "[email protected]",
-	"COGNITO_PASSWORD": "XXXXX"
+	"COGNITO_PASSWORD": "XXXXX",
+	"PINPOINT_IDENTITY_POOL_ID": "XX-XXXX-X:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
+	"PINPOINT_APPLICATION_ID": "XXXXXXXXXXXXXXXXXXX"
 }
 

cypress/e2e/userIsAbleToConnectAndDisconnectAwsAccount.cy.js

@@ -5,7 +5,7 @@ describe("Connecting and Disconnecting AWS account", () => {
 	beforeEach(() => {
 		cy.visitDomain(`${Cypress.env("WEB_DOMAIN")}/demo`);
 		cy.get('[data-testid="hamburger-menu"]').click();
-		cy.get('[data-testid="connect-aws-account-button"]').click();
+		cy.get('[data-testid="connect-aws-account-button"]').first().click();
 		cy.wait(5000);
 		cy.get('[placeholder="Enter IdentityPoolId"]').type(`${Cypress.env("IDENTITY_POOL_ID")}`);
 		cy.get('[placeholder="Enter UserDomain"]').type(`${Cypress.env("USER_DOMAIN")}`);

cypress/e2e/userIsAbleToUseGeofence.cy.js

@@ -9,7 +9,7 @@ describe("Geofence", () => {
 	beforeEach(() => {
 		cy.visitDomain(`${Cypress.env("WEB_DOMAIN")}/demo`);
 		cy.get('[data-testid="hamburger-menu"]').click();
-		cy.get('[data-testid="connect-aws-account-button"]').click();
+		cy.get('[data-testid="connect-aws-account-button"]').first().click();
 		cy.wait(5000);
 		cy.get('[placeholder="Enter IdentityPoolId"]').type(`${Cypress.env("IDENTITY_POOL_ID")}`);
 		cy.get('[placeholder="Enter UserDomain"]').type(`${Cypress.env("USER_DOMAIN")}`);
@@ -59,7 +59,7 @@ describe("Geofence", () => {
 		cy.get('[class="amplify-flex geofence-button"]').click();
 		cy.get('[placeholder="Enter address or coordinates"]').type("Rio Tinto Perth Western Australia");
 		cy.wait(4000);
-		cy.contains("Rio Tinto Operations Centre").click();
+		cy.contains("Rio Tinto").click();
 		cy.wait(5000);
 		cy.get('[placeholder="Type unique Geofence Name"]').type(`${geofenceName}`);
 		cy.wait(5000);

cypress/e2e/userIsAbleToUseTracker.cy.js

@@ -8,7 +8,7 @@ describe("Tracker", () => {
 	beforeEach(() => {
 		cy.visitDomain(`${Cypress.env("WEB_DOMAIN")}/demo`);
 		cy.get('[data-testid="hamburger-menu"]').click();
-		cy.get('[data-testid="connect-aws-account-button"]').click();
+		cy.get('[data-testid="connect-aws-account-button"]').first().click();
 		cy.wait(5000);
 		cy.get('[placeholder="Enter IdentityPoolId"]').type(`${Cypress.env("IDENTITY_POOL_ID")}`);
 		cy.get('[placeholder="Enter UserDomain"]').type(`${Cypress.env("USER_DOMAIN")}`);