test(remix): Run both otel and legacy integration tests on CI (#12983)

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('routes/user.$id');
+});
+
 test('Sends form data with action span to Sentry', async ({ page }) => {
   await page.goto('/action-formdata');
 

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-vite-dev', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('GET user/:id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('GET user/:id');
+});
+
 test('Sends form data with action span', async ({ page }) => {
   await page.goto('/action-formdata');
 

dev-packages/e2e-tests/test-applications/create-remix-app-legacy/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('routes/user.$id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();

dev-packages/e2e-tests/test-applications/create-remix-app-v2-legacy/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-v2-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('routes/user.$id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();

dev-packages/e2e-tests/test-applications/create-remix-app-v2/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-v2', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('GET user/:id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();

dev-packages/e2e-tests/test-applications/create-remix-app/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('GET user/:id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();

packages/remix/package.json

@@ -98,8 +98,11 @@
     "test:integration:otel": "export USE_OTEL=1 && run-s test:integration:v1 test:integration:v2",
     "test:integration:legacy": "export USE_OTEL=0 && run-s test:integration:v1 test:integration:v2",
     "test:integration:v1": "run-s test:integration:clean test:integration:prepare test:integration:client test:integration:server",
-    "test:integration:v2": "export REMIX_VERSION=2 && run-s test:integration:v1",
-    "test:integration:ci": "run-s test:integration:clean test:integration:prepare test:integration:client:ci test:integration:server",
+    "test:integration:v2": "export REMIX_VERSION=2 && yarn test:integration:v1",
+    "test:integration:ci": "run-s test:integration:ci:otel test:integration:ci:legacy",
+    "test:integration:ci:otel": "USE_OTEL=1 yarn test:integration:ci:common",
+    "test:integration:ci:legacy": "USE_OTEL=0 yarn test:integration:ci:common",
+    "test:integration:ci:common": "run-s test:integration:clean test:integration:prepare test:integration:client:ci test:integration:server",
     "test:integration:prepare": "(cd test/integration && yarn install)",
     "test:integration:clean": "(cd test/integration && rimraf .cache node_modules build)",
     "test:integration:client": "yarn playwright install-deps && yarn playwright test test/integration/test/client/ --project='chromium'",