Add integration test for checking a click interaction uses the annotated component name

0Calories · 0Calories · commit f48b3c7f0175 · 2023-11-09T14:04:12.000-05:00
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/assets/script.js b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/assets/script.js
@@ -14,3 +14,4 @@ const delay = e => {
 };
 
 document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
+document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/template.html b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/template.html
@@ -6,6 +6,7 @@
   <body>
     <div>Rendered Before Long Task</div>
     <button data-test-id="interaction-button">Click Me</button>
+    <button data-test-id="annotated-button" data-component="AnnotatedButton">Click Me</button>
     <script src="https://example.com/path/to/script.js"></script>
   </body>
 </html>
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts
@@ -80,3 +80,35 @@ sentryTest(
     }
   },
 );
+
+sentryTest(
+  'should use the component name for a clicked element when it is available',
+  async ({ browserName, getLocalTestPath, page }) => {
+    const supportedBrowsers = ['chromium', 'firefox'];
+
+    if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+    await getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.locator('[data-test-id=annotated-button]').click();
+
+    const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+    expect(envelopes).toHaveLength(1);
+    const eventData = envelopes[0];
+
+    expect(eventData.spans).toHaveLength(1);
+
+    const interactionSpan = eventData.spans![0];
+    expect(interactionSpan.op).toBe('ui.interaction.click');
+    expect(interactionSpan.description).toBe('AnnotatedButton');
+  },
+);
diff --git a/packages/utils/test/browser.test.ts b/packages/utils/test/browser.test.ts
@@ -1,6 +1,6 @@
 import { JSDOM } from 'jsdom';
 
-import { getDomElement, getElementIdentifier, htmlTreeAsString } from '../src/browser';
+import { getDomElement, htmlTreeAsString } from '../src/browser';
 
 beforeAll(() => {
   const dom = new JSDOM();

Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,4 @@ const delay = e => {`
`14`	`14`	`};`
`15`	`15`
`16`	`16`	`document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);`
	`17`	`+document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);`