Added test case file: consent-tools-vanilla-opt-in.test.ts

Author: neelkanth-kaushik

packages/consent/consent-tools-integration-tests/package.json

@@ -10,13 +10,18 @@
     "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
     "eslint": "yarn run -T eslint",
     "tsc": "tsc",
-    "concurrently": "yarn run -T concurrently --raw"
+    "concurrently": "yarn run -T concurrently --raw",
+    "playwright-test": "playwright test",
+    "playwright-test:headed": "playwright test --headed",
+    "playwright-test:debug": "playwright test --debug",
+    "serve": "http-server public -p 4567"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
   },
   "devDependencies": {
     "@internal/test-helpers": "workspace:^",
+    "@playwright/test": "^1.28.1",
     "@segment/analytics-consent-tools": "workspace:^",
     "@segment/analytics-consent-wrapper-onetrust": "workspace:^",
     "@segment/analytics-next": "workspace:^",
@@ -29,6 +34,7 @@
     "@wdio/types": "8",
     "expect": "^29.4.1",
     "globby": "^11.0.2",
+    "http-server": "14.1.1",
     "wdio-intercept-service": "^4.4.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.8.0"

packages/consent/consent-tools-integration-tests/playwright.config.ts

@@ -0,0 +1,20 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+
+const PORT = 4567
+const config: PlaywrightTestConfig = {
+  testDir: './src/playwright/tests',
+  timeout: 30000,
+  retries: 2,
+  webServer: {
+    command: 'yarn http-server public -p 4567',
+    port: 4567,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    baseURL: `http://localhost:${PORT}`,
+  },
+}
+
+export default config

packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla-opt-in.html

@@ -5,7 +5,7 @@
   <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>
-  <script src="/public/dist/consent-tools-vanilla-opt-in.bundle.js"></script>
+  <script src="dist/consent-tools-vanilla-opt-in.bundle.js"></script>
 </body>
 
 </html>

packages/consent/consent-tools-integration-tests/public/onetrust.html

@@ -60,10 +60,10 @@
             n.parentNode.insertBefore(t, n)
             analytics._loadOptions = e
           }
-          analytics._writeKey = 'foo'
+          analytics._writeKey = 'C8qe7TaOyZburANuEAbA4WovdITZHywg'
           analytics.SNIPPET_VERSION = '4.15.3'
 
-          withOneTrust(analytics).load('foo') // modified
+          withOneTrust(analytics).load('C8qe7TaOyZburANuEAbA4WovdITZHywg') // modified
           analytics.page()
         }
     })()

packages/consent/consent-tools-integration-tests/src/page-bundles/consent-tools-vanilla-opt-in/index.ts

@@ -10,5 +10,5 @@ const analytics = new AnalyticsBrowser()
 ;(window as any).analytics = analytics
 
 withMockCMP(analytics).load({
-  writeKey: 'foo',
+  writeKey: 'C8qe7TaOyZburANuEAbA4WovdITZHywg',
 })

packages/consent/consent-tools-integration-tests/src/page-objects/base-page.ts

@@ -1,124 +1,116 @@
-import { CDNSettingsBuilder } from '@internal/test-helpers'
-import type { SegmentEvent } from '@segment/analytics-next'
-import assert from 'assert'
-import type { Matches } from 'webdriverio'
-
-const waitUntilReady = () =>
-  browser.waitUntil(
-    () => browser.execute(() => document.readyState === 'complete'),
-    {
-      timeout: 10000,
-    }
-  )
+import { Page, Route, Request } from '@playwright/test'
 
 export abstract class BasePage {
-  constructor(protected page: string) {}
+  protected page: Page
+  protected pageFile: string
+
+  segmentTrackingApiReqs: any[] = []
+  fetchIntegrationReqs: any[] = []
 
-  segmentTrackingApiReqs: Matches[] = []
-  fetchIntegrationReqs: Matches[] = []
+  constructor(page: Page, pageFile: string) {
+    this.page = page
+    this.pageFile = pageFile
+  }
 
   async load(): Promise<void> {
-    const baseURL = browser.options.baseUrl
-    assert(baseURL)
     await this.mockAPIs()
-    await browser.url(baseURL + '/public/' + this.page)
-    await waitUntilReady()
+    await this.page.goto(`/${this.pageFile}`)
+    await this.page.waitForLoadState('load')
   }
 
   async clearStorage() {
-    await browser.deleteAllCookies()
-    await browser.execute(() => window.localStorage.clear())
+    await this.page.context().clearCookies()
+    await this.page.evaluate(() => {
+      window.localStorage.clear()
+      window.sessionStorage.clear()
+    })
   }
 
-  getAllTrackingEvents(): SegmentEvent[] {
-    const reqBodies = this.segmentTrackingApiReqs.map((el) =>
-      JSON.parse(el.postData!)
-    )
-    return reqBodies
+  async cleanup() {
+    this.segmentTrackingApiReqs = []
+    this.fetchIntegrationReqs = []
+    await this.clearStorage()
+  }
+
+  getAllTrackingEvents(): any[] {
+    return this.segmentTrackingApiReqs
   }
 
-  getConsentChangedEvents(): SegmentEvent[] {
-    const reqBodies = this.getAllTrackingEvents()
-    const consentEvents = reqBodies.filter(
+  getConsentChangedEvents(): any[] {
+    return this.getAllTrackingEvents().filter(
       (el) => el.event === 'Segment Consent Preference Updated'
     )
-    return consentEvents
   }
 
-  async cleanup() {
-    this.segmentTrackingApiReqs = []
-    this.fetchIntegrationReqs = []
-    await this.clearStorage()
+  get fetchIntegrationReqsData(): any[] {
+    return this.fetchIntegrationReqs
   }
 
-  async mockAPIs() {
+  private async mockAPIs() {
     await this.mockSegmentTrackingAPI()
     await this.mockCDNSettingsAPI()
     await this.mockNextIntegrationsAPI()
   }
 
-  private async mockSegmentTrackingAPI(): Promise<void> {
-    const mock = await browser.mock('https://api.segment.io/v1/t', {
-      method: 'post',
-    })
-    mock.respond((mock) => {
-      this.segmentTrackingApiReqs.push(mock)
-      // response with status 200
-      return Promise.resolve({
-        statusCode: 200,
-        body: JSON.stringify({ success: true }),
-      })
-    })
+  private async mockSegmentTrackingAPI() {
+    await this.page.route(
+      'https://api.segment.io/v1/t',
+      async (route: Route, request: Request) => {
+        const postData = await request.postData()
+        const parsed = JSON.parse(postData || '{}')
+        this.segmentTrackingApiReqs.push(parsed) // store the parsed event object directly
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ success: true }),
+        })
+      }
+    )
   }
 
-  private async mockNextIntegrationsAPI(): Promise<void> {
-    const mock = await browser.mock('**/next-integrations/**')
-    mock.respond((mock) => {
-      this.fetchIntegrationReqs.push(mock)
-      return Promise.resolve({
-        statusCode: 200,
-        body: 'console.log("mocking action and classic destinations")',
-      })
-    })
+  private async mockNextIntegrationsAPI() {
+    await this.page.route(
+      '**/next-integrations/**',
+      async (route: Route, request: Request) => {
+        this.fetchIntegrationReqs.push({ url: request.url() })
+        await route.fulfill({
+          status: 200,
+          body: 'console.log("mocking action and classic destinations")',
+          contentType: 'application/javascript',
+        })
+      }
+    )
   }
 
-  /**   * Mock the CDN Settings endpoint so that this can run offline
-   */
-  private async mockCDNSettingsAPI(): Promise<void> {
-    const settings = new CDNSettingsBuilder({
-      writeKey: 'something',
-    })
-      .addActionDestinationSettings(
-        {
+  private async mockCDNSettingsAPI() {
+    const settings = {
+      integrations: {
+        FullStory: {
           url: 'https://cdn.segment.com/next-integrations/actions/fullstory-plugins/foo.js',
-          creationName: 'FullStory',
           consentSettings: {
             categories: ['FooCategory2'],
           },
         },
-        {
+        'Actions Amplitude': {
           url: 'https://cdn.segment.com/next-integrations/actions/amplitude-plugins/foo.js',
-          creationName: 'Actions Amplitude',
           consentSettings: {
             categories: ['FooCategory1'],
           },
-        }
-      )
-      .build()
-
-    const mock = await browser.mock('**/settings')
-    mock.respond(settings, {
-      statusCode: 200,
-      headers: {
-        'Content-Type': 'application/json',
+        },
       },
+    }
+
+    await this.page.route('**/settings', async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(settings),
+      })
     })
   }
 
-  /**
-   * Hard reload the page
-   */
-  reload() {
-    return browser.execute(() => window.location.reload())
+  async reload() {
+    await this.page.reload()
   }
 }

packages/consent/consent-tools-integration-tests/src/page-objects/consent-tools-vanilla.ts

@@ -1,24 +1,28 @@
+import { Page } from '@playwright/test'
 import { BasePage } from './base-page'
 
 export class ConsentToolsVanilla extends BasePage {
+  constructor(page: Page, file: string) {
+    super(page, file)
+  }
+
   async clickGiveConsent() {
-    const button = await $('#give-consent')
-    return button.click()
+    await this.page.locator('#give-consent').click()
   }
+
   async clickDenyConsent() {
-    const button = await $('#give-consent')
-    return button.click()
+    await this.page.locator('#deny-consent').click()
   }
 }
 
 export class ConsentToolsVanillaOptOut extends ConsentToolsVanilla {
-  constructor() {
-    super('consent-tools-vanilla-opt-out.html')
+  constructor(page: Page) {
+    super(page, 'consent-tools-vanilla-opt-out.html')
   }
 }
 
 export class ConsentToolsVanillaOptIn extends ConsentToolsVanilla {
-  constructor() {
-    super('consent-tools-vanilla-opt-in.html')
+  constructor(page: Page) {
+    super(page, 'consent-tools-vanilla-opt-in.html')
   }
 }

packages/consent/consent-tools-integration-tests/src/playwright/example.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+test('Homepage has welcome message', async ({ page }) => {
+  await page.goto('https://www.example.com/')
+  await expect(page.locator('text=Example Domain')).toBeVisible()
+})

packages/consent/consent-tools-integration-tests/src/playwright/playwright-logger.ts

@@ -0,0 +1,18 @@
+import type { Reporter } from '@playwright/test/types/testReporter'
+import type { TestCase } from '@playwright/test/types/testReporter'
+import type { TestResult } from '@playwright/test/types/testReporter'
+
+class PlaywrightLogger implements Reporter {
+  onTestEnd(test: TestCase, result: TestResult): void {
+    const passed = result.status === 'passed'
+    console.log(
+      [
+        `${passed ? '✅ Passed' : '❌ Failed'}! ${test.title}`,
+        test.location.file,
+        !passed && result.error ? result.error.message : '',
+      ].join('\n')
+    )
+  }
+}
+
+export default PlaywrightLogger