wip

Author: silesky

packages/signals/signals-integration-tests/package.json

@@ -28,13 +28,15 @@
     "@playwright/test": "^1.28.1",
     "@segment/analytics-next": "workspace:^",
     "@segment/analytics-signals": "workspace:^",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18",
     "globby": "^11.0.2",
     "http-server": "14.1.1",
+    "react": "^18.0.0",
+    "react-aria-components": "^1.5.0",
+    "react-dom": "^18.0.0",
     "tslib": "^2.4.1",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.8.0"
-  },
-  "dependencies": {
-    "react-aria-components": "^1.5.0"
   }
 }

packages/signals/signals-integration-tests/src/tests/custom-elements/components/App.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { TextField } from './TextField'
+
+export const App: React.FC = () => {
+  return (
+    <main>
+      <TextField label="some-text-field" />
+    </main>
+  )
+}

packages/signals/signals-integration-tests/src/tests/custom-elements/custom-select.test.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+import { waitForCondition } from '../../helpers/playwright-utils'
+import { IndexPage } from './index-page'
+
+const basicEdgeFn = `const processSignal = (signal) => {}`
+
+test('Collecting signals whenever a user enters text input and focuses out', async ({
+  page,
+}) => {
+  const indexPage = await new IndexPage().loadAndWait(page, basicEdgeFn, {
+    disableSignalsRedaction: true,
+    enableSignalsIngestion: true,
+  })
+  const fillAndConfirm = async (selector: string, text: string) => {
+    await page.getByTestId(selector).fill(text)
+    await page.getByTestId(selector).press('Enter')
+  }
+  await Promise.all([
+    fillAndConfirm('aria-text-field', 'John Doe'),
+    waitForCondition(
+      () => indexPage.signalsAPI.getEvents('interaction').length > 0,
+      { errorMessage: 'No interaction signals found' }
+    ),
+  ])
+  const interactionSignals = indexPage.signalsAPI.getEvents('interaction')
+
+  const data = expect.objectContaining({
+    eventType: 'change',
+    listener: 'mutation',
+    change: {
+      value: 'John Doe',
+    },
+    target: expect.objectContaining({
+      attributes: expect.objectContaining({
+        type: 'text',
+        value: 'John Doe',
+      }),
+      tagName: 'INPUT',
+      value: 'John Doe',
+    }),
+  })
+  expect(interactionSignals[0].properties!.data).toMatchObject(data)
+})

packages/signals/signals-integration-tests/src/tests/custom-elements/index.bundle.tsx

@@ -1,18 +1,12 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-
+import { createRoot } from 'react-dom/client'
 import { AnalyticsBrowser } from '@segment/analytics-next'
 import { SignalsPlugin } from '@segment/analytics-signals'
-import { TextField } from './components/TextField'
+import { App } from './components/App'
 
-/**
- * Not instantiating the analytics object here, as it will be instantiated in the test
- */
 window.SignalsPlugin = SignalsPlugin
 window.analytics = new AnalyticsBrowser()
 
-const App = () => {
-  return <TextField />
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container!)
+root.render(<App />)

packages/signals/signals-integration-tests/src/tests/custom-elements/pages/Home.tsx

@@ -3076,9 +3076,13 @@ __metadata:
     "@playwright/test": ^1.28.1
     "@segment/analytics-next": "workspace:^"
     "@segment/analytics-signals": "workspace:^"
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18
     globby: ^11.0.2
     http-server: 14.1.1
+    react: ^18.0.0
     react-aria-components: ^1.5.0
+    react-dom: ^18.0.0
     tslib: ^2.4.1
     webpack: ^5.76.0
     webpack-cli: ^4.8.0