wip

Author: silesky

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

@@ -19,7 +19,7 @@ export function waitForCondition(
           resolve()
         } else if (Date.now() - startTime >= timeout) {
           clearInterval(interval)
-          reject(new Error(errorMessage))
+          reject(new Error(`${errorMessage}. Timeout: ${timeout}ms`))
         }
       } catch (error) {
         clearInterval(interval)

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

@@ -5,11 +5,11 @@ import { Select, SelectItem } from './Select'
 export const App: React.FC = () => {
   return (
     <main>
-      <div>
+      <div id="textfield">
         <h2>TextField</h2>
         <TextField label="some-text-field" />
       </div>
-      <div>
+      <div id="select">
         <h2>Select</h2>
         <Select>
           <SelectItem>Chocolate</SelectItem>
@@ -18,7 +18,6 @@ export const App: React.FC = () => {
           <SelectItem>Vanilla</SelectItem>
         </Select>
       </div>
-      );
     </main>
   )
 }

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

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { waitForCondition } from '../../helpers/playwright-utils'
 import { IndexPage } from './index-page'
+import type { SegmentEvent } from '@segment/analytics-next'
 
 const basicEdgeFn = `const processSignal = (signal) => {}`
 
@@ -9,33 +10,28 @@ test('Collecting signals whenever a user selects an item', async ({ page }) => {
     disableSignalsRedaction: true,
     enableSignalsIngestion: true,
   })
-  const fillAndConfirm = async (selector: string, text: string) => {
-    await page.getByTestId(selector).fill(text)
-    await page.getByTestId(selector).press('Enter')
+
+  const filterClick = (e: SegmentEvent): boolean => {
+    return (
+      e.properties!.data.eventType === 'click' &&
+      e.properties!.data.target.textContent?.includes('Mint')
+    )
   }
-  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',
+  const waitForInteraction = waitForCondition(
+    () => {
+      const events = indexPage.signalsAPI.getEvents('interaction')
+      return events.some(filterClick)
     },
-    target: expect.objectContaining({
-      attributes: expect.objectContaining({
-        type: 'text',
-        value: 'John Doe',
-      }),
-      tagName: 'INPUT',
-      value: 'John Doe',
-    }),
-  })
-  expect(interactionSignals[0].properties!.data).toMatchObject(data)
+    { errorMessage: 'No interaction signals found' }
+  )
+  await page.click('#select button')
+  await page.getByRole('option', { name: 'Mint' }).click()
+
+  await waitForInteraction
+  const signals = indexPage.signalsAPI
+    .getEvents('interaction')
+    .filter(filterClick)
+
+  expect(signals).toHaveLength(1)
 })