test: add basic dataLayer tests header and unity-react-core

Author: davidornelas11

packages/component-header-footer/.storybook/preview-head.html

@@ -0,0 +1,37 @@
+<!-- FONTAWESOME loaded from CDN 'kit' URL -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<!-- Initialize dataLayer for GA. Implementing sites will need this above GTM snippet. More info: https://developers.google.com/tag-manager/devguide -->
+<script>
+  window.global = window;
+  dataLayer = [];
+</script>
+
+<!-- Google Tag Manager ASU Universal-->
+<script>
+  (function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({
+      "gtm.start": new Date().getTime(),
+      "event": "gtm.js",
+    });
+    var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s),
+      dl = l != "dataLayer" ? "&l=" + l : "";
+    j.async = true;
+    j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, "script", "dataLayer", "GTM-KDWN8Z");
+</script>
+<!-- Google Tag Manager (noscript) -->
+<!-- <noscript>
+  <iframe src="//www.googletagmanager.com/ns.html?id=GTM-KDWN8Z" height="0" width="0"
+    style="display: none; visibility: hidden"></iframe>
+  </noscript> -->
+<!-- End Google Tag Manager ASU Universal -->
+
+<style>
+  div.sbdocs.sbdocs-wrapper {
+    gap: 0rem!important;
+  }
+</style>

packages/component-header-footer/package.json

@@ -33,7 +33,8 @@
   },
   "scripts": {
     "lint": "eslint --fix 'src/**/*.{js,jsx}' --ignore-path ../../.eslintignore",
-    "test": "jest --config=./jest.config.js --silent --coverage",
+    "test": "jest --config=./jest.config.js --silent --coverage && yarn test-datalayer",
+    "test-datalayer": "playwright test tests/dataLayer-header.spec.mjs",
     "test-update-snapshot": "yarn test -- -u",
     "build": "vite build && yarn postbuild",
     "build:stats": "webpack -c webpack/webpack.prod.js --profile --json=compilation-stats.json",

packages/component-header-footer/playwright.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from '@playwright/test';
+import defaultConfig from "../unity-react-core/playwright.config.js";
+
+export default defineConfig({
+  ...defaultConfig,
+  use: {
+    baseURL: 'http://localhost:9080',
+    trace: 'on-firstt-retry',
+  },
+});

packages/component-header-footer/tests/dataLayer-header.spec.mjs

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test';
+
+const STORYBOOK_URL = 'http://localhost:9080';
+const STORY_ID = 'uds-asu-header--default';
+
+async function getLatestLinkEvent(page) {
+  return await page.evaluate(() => {
+    if (!window.dataLayer) return null;
+    const events = window.dataLayer.filter(e => e && e.region === 'navbar');
+    return events.length ? events[events.length - 1] : null;
+  });
+}
+
+test.describe('GTM dataLayer events for ASUHeader', () => {
+  test('should push correct events when clicking navbar item', async ({ page }) => {
+    await page.goto(`${STORYBOOK_URL}/iframe.html?id=${STORY_ID}&viewMode=story`);
+
+    await page.waitForSelector('[data-testid="navigation"]');
+
+    const navLinks = await page.$$('.nav-list a');
+    expect(navLinks.length).toBeGreaterThan(0);
+
+    const dataLayerInit = await page.evaluate(() => Array.isArray(window.dataLayer));
+    expect(dataLayerInit).toBe(true);
+    const navText = await navLinks[1].textContent();
+
+    await navLinks[1].click();
+    let event = await getLatestLinkEvent(page);
+    expect(event).not.toBeNull();
+    expect(event.event).toBe('collapse');
+    expect(event.action).toBe('open');
+    expect(event.region).toBe('navbar');
+    expect(event.section).toBe('main navbar');
+    expect(event.text?.toLowerCase()).toEqual(navText?.toLowerCase());
+  });
+
+  test('should push correct events when clicking dropdown link', async ({ page }) => {
+    await page.goto(`${STORYBOOK_URL}/iframe.html?id=${STORY_ID}&viewMode=story`);
+    await page.waitForSelector('[data-testid="navigation"]');
+
+    await page.evaluate(() => {
+      document.querySelectorAll('a').forEach(a => {
+        a.addEventListener('click', e => e.preventDefault());
+      });
+    });
+
+    const navLinks = await page.$$('.nav-list a');
+    expect(navLinks.length).toBeGreaterThan(1);
+    await navLinks[1].click();
+
+    const dropdownLinks = await page.$$('.header-dropdown-1 a');
+
+    expect(dropdownLinks.length).toBeGreaterThan(0);
+    const dropdownText = await dropdownLinks[0].textContent();
+
+    await dropdownLinks[0].click();
+    let event = await getLatestLinkEvent(page);
+    expect(event).not.toBeNull();
+    expect(event.event).toBe('link');
+    expect(event.action).toBe('click');
+    expect(event.region).toBe('navbar');
+    expect(event.section).toBe('main navbar');
+    expect(event.text?.toLowerCase()).toEqual(dropdownText?.toLowerCase());
+  });
+});

packages/unity-react-core/package.json

@@ -31,7 +31,8 @@
     "create": "plop",
     "dev": "yarn storybook & yarn testui",
     "lint": "eslint --fix 'src/**/*.{js,jsx}' --ignore-path ../../.eslintignore",
-    "test": "vitest --watch=false",
+    "test": "vitest --watch=false && yarn test-datalayer",
+    "test-datalayer": "playwright test tests/dataLayer.spec.mjs",
     "test:accessibility": "playwright test",
     "testui": "vitest --ui",
     "start:dev": "webpack-dashboard -- webpack serve -c webpack/webpack.dev.js",

packages/unity-react-core/tests/dataLayer.spec.mjs

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+
+const STORYBOOK_BASE_URL = 'http://localhost:9200';
+const STORY_ID_PARAMS = 'iframe.html?id=components-accordion--color-combinations&viewMode=story';
+
+const testUrls = [
+  {
+    name: 'Bootstrap Version',
+    url: `${STORYBOOK_BASE_URL}/${STORY_ID_PARAMS}`,
+  },
+  {
+    name: 'React Framework',
+    url: `${STORYBOOK_BASE_URL}/${STORY_ID_PARAMS}&globals=framework:react`,
+  },
+];
+
+async function getLatestCollapseEvent(page) {
+  return await page.evaluate(() => {
+    if (!window.dataLayer) return null;
+
+    const events = window.dataLayer.filter(e => e && e.event === 'collapse');
+    return events.length ? events[events.length - 1] : null;
+  });
+}
+
+for (const config of testUrls) {
+  test.describe(`GTM dataLayer events for Accordion - ${config.name}`, () => {
+    test('should push correct events when opening and closing accordion', async ({ page }) => {
+      await page.goto(config.url);
+
+      await page.waitForSelector('[data-testid="accordion-opener"]');
+
+      const openers = await page.$$('[data-testid="accordion-opener"]');
+      expect(openers.length).toBeGreaterThan(0);
+
+      const dataLayerInit = await page.evaluate(() => Array.isArray(window.dataLayer));
+      expect(dataLayerInit).toBe(true);
+
+      await openers[0].click();
+      let event = await getLatestCollapseEvent(page);
+      expect(event).not.toBeNull();
+      expect(event.action).toBe('close');
+      expect(event.text).toBe('accordion card 1');
+    });
+  });
+}