Add another integration test for input breadcrumbs

0Calories · 0Calories · commit 431603f4e2c6 · 2023-11-09T14:46:36.000-05:00
diff --git a/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/click/test.ts b/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/click/test.ts
@@ -58,34 +58,37 @@ sentryTest('captures Breadcrumb for clicks & debounces them for a second', async
   ]);
 });
 
-sentryTest('prioritizes the annotated component nam', async ({ getLocalTestUrl, page }) => {
-  const url = await getLocalTestUrl({ testDir: __dirname });
-
-  await page.route('**/foo', route => {
-    return route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        userNames: ['John', 'Jane'],
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
+sentryTest(
+  'prioritizes the annotated component name within the breadcrumb message',
+  async ({ getLocalTestUrl, page }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          userNames: ['John', 'Jane'],
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
     });
-  });
 
-  const promise = getFirstSentryEnvelopeRequest<Event>(page);
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
 
-  await page.goto(url);
-  await page.click('#annotated-button');
-  await page.evaluate('Sentry.captureException("test exception")');
+    await page.goto(url);
+    await page.click('#annotated-button');
+    await page.evaluate('Sentry.captureException("test exception")');
 
-  const eventData = await promise;
+    const eventData = await promise;
 
-  expect(eventData.breadcrumbs).toEqual([
-    {
-      timestamp: expect.any(Number),
-      category: 'ui.click',
-      message: 'AnnotatedButton',
-    },
-  ]);
-});
+    expect(eventData.breadcrumbs).toEqual([
+      {
+        timestamp: expect.any(Number),
+        category: 'ui.click',
+        message: 'AnnotatedButton',
+      },
+    ]);
+  },
+);
diff --git a/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/textInput/template.html b/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/textInput/template.html
@@ -7,5 +7,6 @@
   <body>
     <input id="input1" type="text" />
     <input id="input2" type="text" />
+    <input id="annotated-input" data-component="AnnotatedInput" type="text" />
   </body>
 </html>
diff --git a/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/textInput/test.ts b/packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/textInput/test.ts
@@ -64,3 +64,46 @@ sentryTest('captures Breadcrumb for events on inputs & debounced them', async ({
     },
   ]);
 });
+
+sentryTest(
+  'prioritizes the annotated component name within the breadcrumb message',
+  async ({ getLocalTestUrl, page }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          userNames: ['John', 'Jane'],
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    });
+
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.goto(url);
+
+    await page.click('#annotated-input');
+    await page.type('#annotated-input', 'John', { delay: 1 });
+
+    await page.evaluate('Sentry.captureException("test exception")');
+    const eventData = await promise;
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    expect(eventData.breadcrumbs).toEqual([
+      {
+        timestamp: expect.any(Number),
+        category: 'ui.click',
+        message: 'AnnotatedInput',
+      },
+      {
+        timestamp: expect.any(Number),
+        category: 'ui.input',
+        message: 'AnnotatedInput',
+      },
+    ]);
+  },
+);
