add network signal test (#1109)

Author: silesky

packages/signals/signals-integration-tests/playwright.config.ts

@@ -6,6 +6,11 @@ import path from 'path'
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'yarn run server',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
   testDir: './src',
   globalSetup: path.resolve(__dirname, 'playwright.global-setup.ts'),
   /* Maximum time one test can run for. */

packages/signals/signals-integration-tests/src/helpers/base-page-object.ts

@@ -9,9 +9,9 @@ export class BasePage {
   public edgeFnDownloadURL = 'https://cdn.edgefn.segment.com/MY-WRITEKEY/foo.js'
   public edgeFn: string
 
-  constructor(url: string, edgeFn: string) {
+  constructor(path: string, edgeFn: string) {
     this.edgeFn = edgeFn
-    this.url = url
+    this.url = 'http://localhost:3000/src/tests' + path
   }
 
   /**
@@ -29,10 +29,14 @@ export class BasePage {
   }
 
   private async setupMockedRoutes() {
+    // clear any existing saved requests
+    this.signalsApiReq = undefined as any as Request
+    this.trackingApiReq = undefined as any as Request
+
     await Promise.all([
       this.mockSignalsApi(),
+      this.mockTrackingApi(),
       this.mockCDNSettings(),
-      await this.mockTrackingApi(),
     ])
   }
 

packages/signals/signals-integration-tests/src/tests/signals-vanilla/basic.test.ts

@@ -8,6 +8,30 @@ test.beforeEach(async ({ page }) => {
   await indexPage.load(page)
 })
 
+test('network signals', async () => {
+  /**
+   * Make a fetch call, see if it gets sent to the signals endpoint
+   */
+  await indexPage.mockRandomJSONApi()
+  await indexPage.makeFetchCallToRandomJSONApi()
+  await indexPage.waitForSignalsApiFlush()
+  const batch = indexPage.signalsApiReq.postDataJSON().batch as SegmentEvent[]
+  const networkEvents = batch.filter(
+    (el: SegmentEvent) => el.properties!.type === 'network'
+  )
+  const requests = networkEvents.filter(
+    (el) => el.properties!.data.action === 'Request'
+  )
+  expect(requests).toHaveLength(1)
+  expect(requests[0].properties!.data.data).toEqual({ foo: 'bar' })
+
+  const responses = networkEvents.filter(
+    (el) => el.properties!.data.action === 'Response'
+  )
+  expect(responses).toHaveLength(1)
+  expect(responses[0].properties!.data.data).toEqual({ someResponse: 'yep' })
+})
+
 test('instrumentation signals', async () => {
   /**
    * Make an analytics.page() call, see if it gets sent to the signals endpoint

packages/signals/signals-integration-tests/src/tests/signals-vanilla/index-page.ts

@@ -1,5 +1,4 @@
 import { BasePage } from '../../helpers/base-page-object'
-import path from 'path'
 import { promiseTimeout } from '@internal/test-helpers'
 
 const edgeFn = `
@@ -13,13 +12,40 @@ const edgeFn = `
 
 export class IndexPage extends BasePage {
   constructor() {
-    super(`file://${path.resolve(__dirname, 'index.html')}`, edgeFn)
+    super(`/signals-vanilla/index.html`, edgeFn)
   }
+
   async makeAnalyticsPageCall(): Promise<unknown> {
     const p = this.page.evaluate(() => {
       void window.analytics.page()
       return new Promise((resolve) => window.analytics.on('page', resolve))
     })
     return promiseTimeout(p, 2000, 'analytics.on("page") did not resolve')
   }
+
+  async mockRandomJSONApi() {
+    await this.page.route('http://localhost:3000/api/foo', (route) => {
+      return route.fulfill({
+        contentType: 'application/json',
+        status: 200,
+        body: JSON.stringify({
+          someResponse: 'yep',
+        }),
+      })
+    })
+  }
+
+  async makeFetchCallToRandomJSONApi(): Promise<void> {
+    return this.page.evaluate(() => {
+      return fetch('http://localhost:3000/api/foo', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ foo: 'bar' }),
+      })
+        .then(console.log)
+        .catch(console.error)
+    })
+  }
 }