add integration tests

packages/signals/signals-integration-tests/src/helpers/network-utils.ts

@@ -71,8 +71,6 @@ export class PageNetworkUtils {
           body: JSON.stringify({ foo: 'bar' }),
           ...args.request,
         })
-          .then(console.log)
-          .catch(console.error)
       },
       { url, request }
     )

packages/signals/signals-integration-tests/src/helpers/playwright-utils.ts

@@ -1,4 +1,5 @@
 import { Page } from '@playwright/test'
+import type { Compute } from './ts'
 
 export function waitForCondition(
   conditionFn: () => boolean,
@@ -28,8 +29,15 @@ export function waitForCondition(
   })
 }
 
-export async function fillAndBlur(page: Page, selector: string, text: string) {
-  await page.fill(selector, text, { timeout: 3000 })
+type FillOptions = Compute<Parameters<Page['fill']>[2]>
+
+export async function fillAndBlur(
+  page: Page,
+  selector: string,
+  text: string,
+  options: FillOptions = {}
+) {
+  await page.fill(selector, text, options)
   // Remove focus so the onChange event is triggered
   await page.evaluate(
     (args) => {

packages/signals/signals-integration-tests/src/helpers/ts.ts

@@ -0,0 +1 @@
+export type Compute<T> = { [K in keyof T]: T[K] } & {}

packages/signals/signals-integration-tests/src/tests/signals-vanilla/change-input.test.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test'
+import { waitForCondition } from '../../helpers/playwright-utils'
+import { IndexPage } from './index-page'
+
+const indexPage = new IndexPage()
+
+const basicEdgeFn = `const processSignal = (signal) => {}`
+
+test('Collecting signals whenever a user enters text input', async ({
+  page,
+}) => {
+  /**
+   * Input some text into the input field, see if the signal is emitted correctly
+   */
+  await indexPage.loadAndWait(page, basicEdgeFn, {
+    disableSignalsRedaction: true,
+  })
+
+  await Promise.all([
+    indexPage.fillNameInput('John Doe'),
+    indexPage.waitForSignalsApiFlush(),
+  ])
+
+  await waitForCondition(
+    () => indexPage.signalsAPI.getEvents('interaction').length > 0,
+    { errorMessage: 'No interaction signals found' }
+  )
+  const interactionSignals = indexPage.signalsAPI.getEvents('interaction')
+
+  const data = expect.objectContaining({
+    eventType: 'change',
+    target: expect.objectContaining({
+      attributes: expect.objectContaining({
+        type: 'text',
+        id: 'name',
+        name: 'name',
+      }),
+      classList: [],
+      id: 'name',
+      labels: [
+        {
+          textContent: 'Name:',
+        },
+      ],
+      name: 'name',
+      nodeName: 'INPUT',
+      tagName: 'INPUT',
+      value: 'John Doe',
+    }),
+  })
+  expect(interactionSignals[0]).toMatchObject({
+    event: 'Segment Signal Generated',
+    type: 'track',
+    properties: {
+      type: 'interaction',
+      data,
+    },
+  })
+})

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

@@ -9,21 +9,10 @@ const basicEdgeFn = `const processSignal = (signal) => {}`
 test('redaction enabled -> will XXX the value of text input', async ({
   page,
 }) => {
-  const data = expect.objectContaining({
-    eventType: 'change',
-    target: expect.objectContaining({
-      name: 'name',
-      type: 'text',
-      value: 'XXX', // redacted
-    }),
-  })
-
   await indexPage.loadAndWait(page, basicEdgeFn, {
     disableSignalsRedaction: false,
   })
-  /**
-   * Click a button with nested text, ensure that that correct text shows up
-   */
+
   await Promise.all([
     indexPage.fillNameInput('John Doe'),
     indexPage.waitForSignalsApiFlush(),
@@ -35,6 +24,14 @@ test('redaction enabled -> will XXX the value of text input', async ({
   )
   const interactionSignals = indexPage.signalsAPI.getEvents('interaction')
 
+  const data = expect.objectContaining({
+    eventType: 'change',
+    target: expect.objectContaining({
+      name: 'name',
+      type: 'text',
+      value: 'XXX', // redacted
+    }),
+  })
   expect(interactionSignals[0]).toMatchObject({
     event: 'Segment Signal Generated',
     type: 'track',
@@ -48,19 +45,10 @@ test('redaction enabled -> will XXX the value of text input', async ({
 test('redation disabled -> will not touch the value of text input', async ({
   page,
 }) => {
-  const data = expect.objectContaining({
-    eventType: 'change',
-    target: expect.objectContaining({
-      value: 'John Doe', // noe redacted
-    }),
-  })
-
   await indexPage.loadAndWait(page, basicEdgeFn, {
     disableSignalsRedaction: true,
   })
-  /**
-   * Click a button with nested text, ensure that that correct text shows up
-   */
+
   await Promise.all([
     indexPage.fillNameInput('John Doe'),
     indexPage.waitForSignalsApiFlush(),
@@ -72,6 +60,13 @@ test('redation disabled -> will not touch the value of text input', async ({
   )
   const interactionSignals = indexPage.signalsAPI.getEvents('interaction')
 
+  const data = expect.objectContaining({
+    eventType: 'change',
+    target: expect.objectContaining({
+      value: 'John Doe', // noe redacted
+    }),
+  })
+
   expect(interactionSignals[0]).toMatchObject({
     event: 'Segment Signal Generated',
     type: 'track',