fix test

segmentio · Apr 10, 2024 · b98dcfc · b98dcfc
1 parent 2fb3327
commit b98dcfc
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 18 deletions.
diff --git a/packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla-opt-out.html b/packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla-opt-out.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <body>
-  <h1>Hello World - Serving Analytics</h1>
+  <h1>Hello World - Serving Analytics (Consent Tools Vanilla Opt Out)</h1>
   <h2>Please Check Network tab</h2>
   <p>This page can used as playground or run by webdriver.io</p>
   <script src="/public/dist/consent-tools-vanilla-opt-out.bundle.js"></script>

diff --git a/packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla.html b/packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla.html
@@ -5,8 +5,6 @@
   <h1>Hello World - Serving Analytics</h1>
   <h2>Please Check Network tab</h2>
   <p>This page can used as playground or run by webdriver.io</p>
-  <button id="give-consent">Give Consent</button>
-  <button id="deny-consent">Deny Consent</button>
-  <script src="/public/dist/consent-tools-vanilla-opt-out.bundle.js"></script>
+  <script src="/public/dist/consent-tools-vanilla.bundle.js"></script>
 </body>
 
diff --git a/...s/consent/consent-tools-integration-tests/src/page-bundles/consent-tools-vanilla/index.ts b/...s/consent/consent-tools-integration-tests/src/page-bundles/consent-tools-vanilla/index.ts
@@ -1,29 +1,117 @@
 import { AnalyticsBrowser } from '@segment/analytics-next'
-import { createWrapper } from '@segment/analytics-consent-tools'
+import { createWrapper, resolveWhen } from '@segment/analytics-consent-tools'
 
-const fakeCategories = { FooCategory1: true, FooCategory2: true }
+const constants = {
+  giveConsentId: 'give-consent',
+  denyConsentId: 'deny-consent',
+}
+/**
+ * This is a mock consent manager that simulates a consent manager that is loaded asynchronously.
+ * Similar to OneTrust, TrustArc, etc.
+ */
+export const initMockConsentManager = (settings: { isOptIn: boolean }) => {
+  const categories = {}
+  let onConsentChange = (_categories: Record<string, boolean>) =>
+    undefined as void
+
+  const createAlertBox = () => {
+    const container = document.createElement('div')
+    container.id = 'alert-box'
+    container.innerHTML = `
+      <button id="${constants.giveConsentId}">Give consent</button>
+      <button id="${constants.denyConsentId}">Deny consent</button>
+      `
+    return container
+  }
+
+  const alertBox = createAlertBox()
+  let loaded = false
+  setTimeout(() => {
+    loaded = true
+    mockCMPPublicAPI.openAlertBox()
+  }, 300)
+
+  /**
+   * similar to window.OneTrust
+   */
+  const mockCMPPublicAPI = {
+    get isLoaded() {
+      return loaded
+    },
+    get isOptIn() {
+      return settings.isOptIn
+    },
+    setCategories: (newCategories: Record<string, boolean>) => {
+      const c = { ...categories, ...newCategories }
+      onConsentChange(c)
+      return c
+    },
+    getCategories: () => ({ FooCategory1: true, FooCategory2: true }),
+    openAlertBox: () => {
+      document.body.appendChild(alertBox)
+      document
+        .getElementById(constants.giveConsentId)!
+        .addEventListener('click', () => {
+          mockCMPPublicAPI.setCategories({
+            FooCategory1: true,
+            FooCategory2: true,
+          })
+          mockCMPPublicAPI.closeAlertBox()
+        })
+      document
+        .getElementById(constants.denyConsentId)!
+        .addEventListener('click', () => {
+          mockCMPPublicAPI.setCategories({
+            FooCategory1: false,
+            FooCategory2: false,
+          })
+          mockCMPPublicAPI.closeAlertBox()
+        })
+    },
+    closeAlertBox: () => {
+      document.body.removeChild(alertBox)
+    },
+    onConsentChange: (fn: (categories: Record<string, boolean>) => void) => {
+      onConsentChange = fn
+    },
+  }
+
+  return mockCMPPublicAPI
+}
+
+const consentManager = initMockConsentManager({ isOptIn: true })
 
 const withCMP = createWrapper({
-  getCategories: () => fakeCategories,
+  shouldLoadWrapper: async () => {
+    await resolveWhen(() => consentManager.isLoaded, 500)
+  },
+  getCategories: () => consentManager.getCategories(),
+  registerOnConsentChanged: (fn) => {
+    consentManager.onConsentChange(fn)
+  },
   shouldLoadSegment: async (ctx) => {
-    return new Promise((resolve, reject) => {
+    if (!consentManager.isOptIn) {
+      // if opt out, load immediately
+      return ctx.load({ optIn: false })
+    }
+    return new Promise((resolve) => {
       document.getElementById('give-consent')!.addEventListener('click', () => {
-        ctx.load({ optIn: true })
+        ctx.load({ optIn: false })
         resolve()
       })
+
       document.getElementById('deny-consent')!.addEventListener('click', () => {
         ctx.abort()
-        reject()
+        resolve()
       })
     })
   },
 })
 
 const analytics = new AnalyticsBrowser()
+// for testing
+;(window as any).analytics = analytics
 
 withCMP(analytics).load({
   writeKey: 'foo',
 })
-
-// for testing
-;(window as any).analytics = analytics
diff --git a/packages/consent/consent-tools-integration-tests/src/page-objects/consent-tools-vanilla.ts b/packages/consent/consent-tools-integration-tests/src/page-objects/consent-tools-vanilla.ts
@@ -4,6 +4,12 @@ class ConsentToolsVanilla extends BasePage {
   constructor() {
     super('consent-tools-vanilla.html')
   }
+  clickGiveConsent() {
+    return $('#give-consent').click()
+  }
+  clickDenyConsent() {
+    return $('#deny-consent').click()
+  }
 }
 
 export default new ConsentToolsVanilla()
diff --git a/packages/consent/consent-tools-integration-tests/src/tests/consent-tools-vanilla.test.ts b/packages/consent/consent-tools-integration-tests/src/tests/consent-tools-vanilla.test.ts
@@ -8,8 +8,13 @@ import { expect } from 'expect'
 afterEach(async () => {
   await page.cleanup()
 })
+
+const parsePostReqBody = (req: any) => {
+  return JSON.parse(req.postData!)
+}
 it('should stamp each event', async () => {
   await page.load()
+  await page.clickGiveConsent()
 
   await browser.execute(() => {
     return window.analytics.track('hello')
@@ -21,11 +26,10 @@ it('should stamp each event', async () => {
     timeoutMsg: 'Expected a track call to be made',
   })
   const requests = page.segmentTrackingApiReqs
-  expect(requests.length).toEqual(1)
-  const req = requests[0]
-  expect(req.url).toEqual('https://api.segment.io/v1/t')
-  const reqBody = JSON.parse(req.postData!)
-  expect(reqBody.context.consent).toEqual({
+  const [consentPreferenceEvent, otherTrackCall] =
+    requests.map(parsePostReqBody)
+  expect(consentPreferenceEvent.event).toEqual('Segment Consent Preference')
+  expect(otherTrackCall.context.consent).toEqual({
     categoryPreferences: {
       FooCategory1: true,
       FooCategory2: true,