[Tech Debt] Update tests to be able to run against live staging/production environments

Author: levinmr

README.md

@@ -130,6 +130,7 @@ npm run lint
 ```
 
 #### Run integration tests
+
 Start up the test site at http://localhost:8080/:
 
 ```bash
@@ -142,4 +143,6 @@ Then run the tests against the test site:
 npm run cucumber
 ```
 
+See more details in the [testing docs](features/README.md).
+
 **All members of the digital-analytics-program GitHub organization are required to have two-factor authentication enabled.**

features/README.md

@@ -0,0 +1,53 @@
+# DAP automated testing docs
+
+The automated tests for the DAP code are implemented using [cucumber-js](https://github.com/cucumber/cucumber-js)
+and [puppeteer](https://pptr.dev/).
+
+By default the tests use the local version of the DAP javascript files. Loading
+the code into a test HTML page, performing various user actions, and testing
+the behavior of the code in response to the user actions.
+
+Use the `DAP_ENV` environment variable to insert live versions of the code into
+the test HTML page instead of the local version as described below.
+
+## Running the tests
+
+Start up the test site at http://localhost:8080/:
+
+```bash
+npm run test-site
+```
+
+Then run the tests against the test site:
+
+```bash
+npm run cucumber
+```
+
+## Running the tests with a debugger attached
+
+```bash
+npm run cucumber:debug
+```
+
+## Configuring with environment variables
+
+### Verbose mode
+
+Print debugging information to stdout while running the tests:
+
+```bash
+VERBOSE=true npm run cucumber
+```
+
+### Run tests against the live staging environment
+
+```bash
+DAP_ENV=staging npm run cucumber
+```
+
+### Run tests against the live production environment
+
+```bash
+DAP_ENV=production npm run cucumber
+```

features/support/step_definitions/browser_steps.js

@@ -12,6 +12,18 @@ function delay(milliseconds) {
 Given("I load an empty browser", async function () {
   this.browser = await puppeteer.launch();
   this.page = await this.browser.newPage();
+
+  if (process.env.VERBOSE == 'true') {
+    // Log page events to the node console
+    this.page
+      .on('console', message =>
+        console.log(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`))
+      .on('pageerror', ({ message }) => console.log(message))
+      .on('response', response =>
+        console.log(`${response.status()} ${response.url()}`))
+      .on('requestfailed', request =>
+        console.log(`${request.failure().errorText} ${request.url()}`))
+  }
 });
 
 Given("I set the browser to intercept outbound requests", async function () {
@@ -33,7 +45,7 @@ When("I wait {int} seconds", async function (delaySeconds) {
   await delay(delaySeconds * 1000);
 });
 
-Then("there is a GA4 request", function() {
+Then("there is a GA4 request", function () {
   const ga4Request = this.requests.find(request => {
     try {
       const url = new URL(request.url);
@@ -46,8 +58,19 @@ Then("there is a GA4 request", function() {
 });
 
 Then("there are no unexpected requests", function () {
-  const requestUrls = this.requests.map((request) => {
+  const requestURLs = this.requests.map((request) => {
     return (new URL(request.url)).host;
   });
-  expect(["localhost:8080", "www.googletagmanager.com", "www.google-analytics.com"]).to.include.members(requestUrls);
-})
+
+  const allowedURLs = ["localhost:8080", "www.googletagmanager.com", "www.google-analytics.com"];
+
+  if (process.env.DAP_ENV == 'production') {
+    allowedURLs.push("dap.digitalgov.gov")
+  } else if (process.env.DAP_ENV == 'staging') {
+    allowedURLs.push("d3vtlq0ztv2u27.cloudfront.net")
+  }
+
+  requestURLs.forEach((requestURL) => {
+    expect(allowedURLs).to.include(requestURL);
+  })
+})

features/support/step_definitions/loading_steps.js

@@ -27,5 +27,5 @@ Given("DAP is configured with autotracking disabled", function () {
 });
 
 When("I load the test site", async function () {
-  await this.page.goto(`http://localhost:8080?${this.dapConfig.toQueryParams()}`);
-});
+  await this.page.goto(`http://localhost:8080?${this.dapConfig.toQueryParams()}${process.env.DAP_ENV ? ('&testEnv=' + process.env.DAP_ENV) : ''}`);
+});

package.json

@@ -8,7 +8,7 @@
     "clean": "rm ./Universal-Federated-Analytics-Min.js",
     "lint": "eslint Universal-Federated-Analytics.js",
     "cucumber": "cucumber-js",
-    "cucumber:debug": "node --inspect-brk cucumber-js",
+    "cucumber:debug": "VERBOSE=true node --inspect-brk node_modules/@cucumber/cucumber/bin/cucumber-js",
     "test-site": "docker build -t dap-test-site . && docker run --rm -p 8080:80 --name dap-test-site dap-test-site"
   },
   "repository": {

test_site/index.html

@@ -6,15 +6,26 @@
 
 <title>DAP test site</title>
 <script>
-	(function() {
+  (function() {
 		const queryParams = new URLSearchParams(window.location.search);
-		const dapScriptTag = document.createElement("script");
-		dapScriptTag.id = "_fed_an_ua_tag";
-		dapScriptTag.async = true;
-		dapScriptTag.src = `Universal-Federated-Analytics-Min.js?dapdev=true&${queryParams.toString()}`;
-		document.head.appendChild(dapScriptTag);
-	})();
+    const dapScriptTag = document.createElement("script");
+		let dapCodeLocation;
+    dapScriptTag.id = "_fed_an_ua_tag";
+    dapScriptTag.async = true;
+
+    if (queryParams.get('testEnv') == 'production') {
+      queryParams.delete('testEnv');
+      dapCodeLocation = 'https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js';
+    } else if (queryParams.get('testEnv') == 'staging') {
+      queryParams.delete('testEnv');
+      dapCodeLocation = 'https://d3vtlq0ztv2u27.cloudfront.net/Universal-Federated-Analytics-Min.js';
+    } else {
+      dapCodeLocation = 'Universal-Federated-Analytics-Min.js';
+    }
 
+		dapScriptTag.src = `${dapCodeLocation}?dapdev=true&${queryParams.toString()}`
+    document.head.appendChild(dapScriptTag);
+  })();
 </script>
 </head>
 
@@ -269,8 +280,8 @@ <h4>Incorrect Event Name</h4>
 			<a href="https://ca.linkedin.com/" class="fa fa-linkedin"  onclick="gas4('social',{'link_text':'<link_text>','link_domain':'<link_domain>','link_url':'<link_url>','link_id':'<link_id>','link_classes':'<link_classes>','social_network':'<social_network>','content_type':'<content_type>','section':'<section>'});"></a>
 		</div>
 	  </div>
-	
-	
+
+
 
 </section>
 
@@ -300,8 +311,8 @@ <h4>Incorrect Event Name</h4>
 			<a href="https://ca.linkedin.com/" class="fa fa-linkedin"  onclick="gas4('social',{'link_text':'<link_text>','link_domain':'<link_domain>','link_url':'<link_url>','link_id':'<link_id>','link_classes':'<link_classes>','social_network':'<social_network>','content_type':'<content_type>','section':'<section>'});"></a>
 		</div>
 	  </div>
-	
-	
+
+
 
 </section>
 
@@ -458,7 +469,7 @@ <h2>gas4() - Call to Action Click	</h2>
 }
 
 .active, .accordion:hover {
-  background-color: #ccc; 
+  background-color: #ccc;
 }
 
 .panel {