Merge pull request #124 from sanason/integration-tests

Add more integration tests.

Author: smarina04

Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx
+COPY test_site Universal-Federated-Analytics-Min.js Federated.js.map /usr/share/nginx/html/

README.md

@@ -110,9 +110,10 @@ Only Digital Analytics Program staff have been granted write access to this repo
 
 ### Local development
 
-#### Prerequistites
+#### Prerequisites
 
 * NodeJS > v20.x
+* Docker
 
 #### Install dependencies
 
@@ -129,6 +130,13 @@ npm run lint
 ```
 
 #### Run integration 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

features/autotracker_download.feature

@@ -0,0 +1,23 @@
+Feature: Downloads are reported to DAP when autotracking is enabled
+
+  Background:
+    Given I load an empty browser
+    And DAP is configured for agency "GSA"
+
+  Scenario: User clicks to download file with autotracker on
+    Given DAP is configured with autotracking enabled
+    When I load the test site
+    And I click on a file to download it
+    Then the file download is reported to DAP with interaction type "mouse click"
+
+  Scenario: User presses Enter to download file with autotracker on
+    Given DAP is configured with autotracking enabled
+    When I load the test site
+    And I highlight and press Enter on a file to download it
+    Then the file download is reported to DAP with interaction type "enter key keystroke"
+
+  Scenario: User clicks to download file with autotracker off
+    Given DAP is configured with autotracking disabled
+    When I load the test site
+    And I click on a file to download it
+    Then the file download is not reported to DAP

features/basic_page_load.feature

@@ -1,14 +1,19 @@
-Feature: Test a basic page with DAP code loaded
+Feature: Test the outgoing requests sent by a basic page with DAP code loaded
 
   Background:
     Given I load an empty browser
     And I set the browser to intercept outbound requests
+    And DAP is configured for agency "GSA"
 
   Scenario: Loading the page with the DAP code without further action
-    When I set the page content with "static_page_with_dap.html" HTML file
-    Then there are no unexpected requests
+    When I load the test site
+    And I wait 5 seconds
+    Then there is a GA4 request
+    But there are no unexpected requests
 
   Scenario: Loading the page with the DAP code and clicking a button
-    When I set the page content with "static_page_with_dap.html" HTML file
-    And I click on element with selector "#test-button"
-    Then there are no unexpected requests
+    When I load the test site
+    And I click on element with selector "#banner-button"
+    And I wait 5 seconds
+    Then there is a GA4 request
+    But there are no unexpected requests

features/configuration.feature

@@ -0,0 +1,22 @@
+Feature: A site can load the DAP code with varying levels of customization
+
+  Background:
+    Given I load an empty browser
+
+  Scenario: Load a DAP-enabled page with agency and subagency
+    Given DAP is configured for agency "HHS"
+    And DAP is configured for subagency "CDC"
+    When I load the test site
+    Then DAP will set custom dimensions
+      | agency | HHS |
+      | subagency | CDC |
+
+  Scenario: Load a DAP-enabled page with agency and site topic and site platform
+    Given DAP is configured for agency "GSA"
+    And DAP is configured with site topic "Analytics"
+    And DAP is configured with site platform "Cloud.gov"
+    When I load the test site
+    Then DAP will set custom dimensions
+    | agency | GSA |
+    | site_topic | analytics |
+    | site_platform | cloud.gov |

features/support/dapconfig.js

@@ -0,0 +1,19 @@
+class DAPConfig {
+  agency;
+  subagency;
+  sitetopic;
+  siteplatform;
+  autotracker;
+  cto;
+
+  constructor(agency) {
+    this.agency = agency;
+  }
+
+  toQueryParams() {
+    const configuredFields = Object.entries(this).filter(entry => entry[1] !== undefined);
+    return new URLSearchParams(configuredFields).toString();
+  }
+}
+
+export default DAPConfig;

features/support/static_page_with_dap.html

@@ -1,15 +1,8 @@
 import { Given, When, Then } from "@cucumber/cucumber";
 import puppeteer from 'puppeteer';
-import path from 'path';
 import * as chai from 'chai'
-import * as fs from 'fs'
 const expect = chai.expect;
 
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
 function delay(milliseconds) {
   return new Promise((resolve) => {
     setTimeout(resolve, milliseconds);
@@ -36,23 +29,18 @@ Given("I set the browser to intercept outbound requests", async function () {
   })
 });
 
-When("I set the page content with {string} HTML file", async function (fileName) {
-  await this.page.setContent(fs.readFileSync(path.join(__dirname, `..`, fileName), 'utf8'));
+When("I wait {int} seconds", async function (delaySeconds) {
+  await delay(delaySeconds * 1000);
 });
 
-// This is still in progress. GA requests don't currently occur after clicking a button element.
-When("I click on element with selector {string}", async function (elementSelector) {
-  await this.page.locator(elementSelector).click();
-  await delay(2000)
-})
+Then("there is a GA4 request", function() {
+  const ga4Request = this.requests.find(request => request.url.includes("https://www.google-analytics.com/g/collect"));
+  expect(ga4Request).to.exist;
+});
 
 Then("there are no unexpected requests", function () {
-  this.requests.forEach((request) => {
-    let isAllowed = false;
-    if (request.url.includes('https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js') || request.url.includes("https://www.googletagmanager.com/gtag/js?id=G-CSLL4ZEK4L")) {
-      isAllowed = true;
-    }
-    expect(isAllowed).to.equal(true)
-  })
-})
-
+  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);
+})

features/support/step_definitions/browser_steps.js

@@ -0,0 +1,42 @@
+import { Then } from "@cucumber/cucumber";
+import * as chai from 'chai'
+const expect = chai.expect;
+
+Then("DAP will set custom dimensions", async function (table) {
+  const configCommand = await this.page.evaluate(() => {
+    return window.dataLayer.find(item => item[0] === 'config');
+  });
+  expect(configCommand["0"]).to.equal("config");
+  expect(configCommand["1"]).to.equal("G-9TNNMGP8WJ");
+  expect(configCommand["2"]).to.include(table.rowsHash());
+});
+
+Then("the file download is reported to DAP with interaction type {string}", async function (interactionType) {
+  const event = await this.page.evaluate(() => {
+    return window.dataLayer.find(item => item[0] === 'event' && item[1] === 'file_download');
+  });
+  expect(event).to.deep.equal(
+    {
+      '0': 'event',
+      '1': 'file_download',
+      '2': {
+        "interaction_type": interactionType,
+        "send_to": 'GSA_GA4_ENOR0',
+        "event_name_dimension": 'file_download',
+        "file_extension": "zip",
+        "file_name": "/about.zip",
+        "link_domain": "localhost",
+        "link_id": "internaldownload",
+        "link_text": "/about.zip",
+        "link_url": "http://localhost:8080/about.zip",
+      }
+    }
+  );
+});
+
+Then("the file download is not reported to DAP", async function () {
+  const event = await this.page.evaluate(() => {
+    return window.dataLayer.find(item => item[0] === 'event' && item[1] === 'file_download');
+  });
+  expect(event).to.be.undefined;
+});

features/support/step_definitions/dataLayer_steps.js

@@ -0,0 +1,14 @@
+import { When } from "@cucumber/cucumber";
+
+When("I click on a file to download it", async function () {
+  await this.page.locator('#internalDownload').click();
+});
+
+When("I highlight and press Enter on a file to download it", async function () {
+  await this.page.focus('#internalDownload');
+  await this.page.keyboard.press('Enter');
+});
+
+When("I click on element with selector {string}", async function (elementSelector) {
+  await this.page.locator(elementSelector).click();
+});