test(browser): Port builtin tests to playwright (#11733)

This ports `packages/browser/test/integration/suites/builtins.js` to
playwright.

It also re-organizes the `eventListener` test structure to be a little
more organized. The new test suites added are instrumentation for `xhr`
and `requestAnimationFrame`

Co-authored-by: Francesco Novy <[email protected]>

Author: AbhiPrasad

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/init.js

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+});

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener-instrumentation-behaviour/subject.js renamed to dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/instrumentation-behaviour/subject.js

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 
-import { sentryTest } from '../../../../utils/fixtures';
+import { sentryTest } from '../../../../../utils/fixtures';
 
 sentryTest(
   'Event listener instrumentation should attach the same event listener only once',

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener-instrumentation-behaviour/test.ts renamed to dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/instrumentation-behaviour/test.ts

@@ -0,0 +1,7 @@
+function clickHandler() {
+  throw new Error('event_listener_error');
+}
+
+window.addEventListener('click', clickHandler);
+
+document.body.click();

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/named-function/subject.js

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('should capture built-in handlers fn name in mechanism data', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'event_listener_error',
+    mechanism: {
+      type: 'instrument',
+      handled: false,
+      data: {
+        function: 'addEventListener',
+        handler: 'clickHandler',
+        target: 'EventTarget',
+      },
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/named-function/test.ts

@@ -0,0 +1,12 @@
+// store references to original, unwrapped built-ins in order to make assertions re: wrapped functions
+window.originalBuiltIns = {
+  addEventListener: document.addEventListener,
+};
+
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+});

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/original-callback/init.js

@@ -0,0 +1,12 @@
+const div = document.createElement('div');
+document.body.appendChild(div);
+window.capturedCall = false;
+const captureFn = function () {
+  window.capturedCall = true;
+};
+// Use original addEventListener to simulate non-wrapped behavior (callback is attached without __sentry_wrapped__)
+window.originalBuiltIns.addEventListener.call(div, 'click', captureFn);
+// Then attach the same callback again, but with already wrapped method
+div.addEventListener('click', captureFn);
+div.removeEventListener('click', captureFn);
+div.dispatchEvent(new MouseEvent('click'));

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/original-callback/subject.js

@@ -0,0 +1,19 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+sentryTest(
+  'should remove the original callback if it was registered before Sentry initialized (w. original method)',
+  async ({ getLocalTestPath, page }) => {
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+
+    const capturedCalled = await page.evaluate(() => {
+      // @ts-expect-error defined in subject.js
+      return window.capturedCall;
+    });
+
+    expect(capturedCalled).toBe(false);
+  },
+);

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/original-callback/test.ts

@@ -0,0 +1,12 @@
+const div = document.createElement('div');
+document.body.appendChild(div);
+const fooFn = function () {
+  throw new Error('foo');
+};
+const barFn = function () {
+  throw new Error('bar');
+};
+div.addEventListener('click', fooFn);
+div.addEventListener('click', barFn);
+div.removeEventListener('click', barFn);
+div.dispatchEvent(new MouseEvent('click'));

dev-packages/browser-integration-tests/suites/public-api/instrumentation/eventListener/remove/subject.js

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('should transparently remove event listeners from wrapped functions', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'foo',
+    mechanism: {
+      type: 'instrument',
+      handled: false,
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});