test(e2e): Add E2E tests for transactions in React test app

Author: Luca Forstner

packages/e2e-tests/test-applications/standard-frontend-react/tests/behaviour-test.spec.ts

@@ -36,12 +36,105 @@ test('Sends an exception to Sentry', async ({ page }) => {
         `https://sentry.io/api/0/projects/${SENTRY_TEST_ORG_SLUG}/${SENTRY_TEST_PROJECT}/events/${exceptionEventId}/`,
         { headers: { Authorization: `Bearer ${authToken}` } },
       );
-      clearTimeout(timeout);
       expect(response?.status).toBe(200);
       break;
     } catch (e) {
       lastErrorResponse = e;
       await new Promise(resolve => setTimeout(resolve, EVENT_POLLING_RETRY_INTERVAL));
     }
   }
+
+  clearTimeout(timeout);
+});
+
+test('Sends a pageload transaction to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  const recordedTransactionsHandle = await page.waitForFunction(() => {
+    if (window.recordedTransactions && window.recordedTransactions?.length >= 1) {
+      return window.recordedTransactions;
+    } else {
+      return undefined;
+    }
+  });
+  const recordedTransactionEventIds = (await recordedTransactionsHandle.jsonValue()) as string[];
+
+  const timeout = setTimeout(() => {
+    throw new Error('Timeout reached while polling events.');
+  }, EVENT_POLLING_TIMEOUT);
+
+  let hadPageLoadTransaction = false;
+
+  await Promise.all(
+    recordedTransactionEventIds.map(async (transactionEventId, i) => {
+      while (true) {
+        try {
+          const response = await axios.get(
+            `https://sentry.io/api/0/projects/${SENTRY_TEST_ORG_SLUG}/${SENTRY_TEST_PROJECT}/events/${transactionEventId}/`,
+            { headers: { Authorization: `Bearer ${authToken}` } },
+          );
+          expect(response?.status).toBe(200);
+          if (response.data.contexts.trace.op === 'pageload') {
+            hadPageLoadTransaction = true;
+          }
+          break;
+        } catch (e) {
+          await new Promise(resolve => setTimeout(resolve, EVENT_POLLING_RETRY_INTERVAL));
+        }
+      }
+    }),
+  );
+
+  clearTimeout(timeout);
+
+  expect(hadPageLoadTransaction).toBe(true);
+});
+
+test.only('Sends a navigation transaction to Sentry', async ({ page }) => {
+  await page.goto('/');
+
+  // Give pageload transaction time to finish
+  page.waitForTimeout(4000);
+
+  const linkElement = page.locator('id=navigation');
+  await linkElement.click();
+
+  const recordedTransactionsHandle = await page.waitForFunction(() => {
+    if (window.recordedTransactions && window.recordedTransactions?.length >= 2) {
+      return window.recordedTransactions;
+    } else {
+      return undefined;
+    }
+  });
+  const recordedTransactionEventIds = (await recordedTransactionsHandle.jsonValue()) as string[];
+
+  const timeout = setTimeout(() => {
+    throw new Error('Timeout reached while polling events.');
+  }, EVENT_POLLING_TIMEOUT);
+
+  let hadPageNavigationTransaction = false;
+
+  await Promise.all(
+    recordedTransactionEventIds.map(async (transactionEventId, i) => {
+      while (true) {
+        try {
+          const response = await axios.get(
+            `https://sentry.io/api/0/projects/${SENTRY_TEST_ORG_SLUG}/${SENTRY_TEST_PROJECT}/events/${transactionEventId}/`,
+            { headers: { Authorization: `Bearer ${authToken}` } },
+          );
+          expect(response?.status).toBe(200);
+          if (response.data.contexts.trace.op === 'pageload') {
+            hadPageNavigationTransaction = true;
+          }
+          break;
+        } catch (e) {
+          await new Promise(resolve => setTimeout(resolve, EVENT_POLLING_RETRY_INTERVAL));
+        }
+      }
+    }),
+  );
+
+  clearTimeout(timeout);
+
+  expect(hadPageNavigationTransaction).toBe(true);
 });