Standardize test case

Author: s1gr1d

dev-packages/e2e-tests/README.md

@@ -133,3 +133,22 @@ A standardized frontend test application has the following features:
 ### Standardized Backend Test Apps
 
 TBD
+
+### Standardized Frontend-to-Backend Test Apps
+
+A standardized Meta test application has the following features:
+
+- Has a parameterized backend API route `/user/:id` that returns a JSON object with the user ID.
+- Has a parameterized frontend page (can be SSR) `/user/:id` that fetches the user data on the client-side from the API route and displays it.
+
+The following test cases for connected tracing should be implemented in the test app:
+
+- Capturing a distributed page load trace when a page is loaded
+  - The HTML meta-tag should include the Sentry trace data and baggage
+  - The server root span should be the parent of the client pageload span
+  - All routes (server and client) should be parameterized, e.g. `/user/5` should be captured as `/user/:id` route
+- Capturing a distributed trace when requesting the API from the client-side
+  - There should be three transactions involved: the client pageload, the server "pageload", and the server API request
+  - The client pageload should include an `http.client` span that is the parent of the server API request span
+  - All three transactions and the `http.client` span should share the same `trace_id`
+  - All `transaction` names and the `span` description should be parameterized, e.g. `/user/5` should be captured as `/user/:id` route

dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/fetch-api/[param].vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useFetch, useRoute } from '#imports';
+
+const route = useRoute();
+const userId = route.params.userId as string;
+
+const { data } = await useFetch(`/api/user/${userId}`, {
+  server: false, // Don't fetch during SSR, only client-side
+});
+</script>
+
+<template>
+  <div>
+    <p v-if="data">User ID: {{ data }}</p>
+  </div>
+</template>

dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/test-param/user/[userId].vue

@@ -0,0 +1,7 @@
+import { defineEventHandler, getRouterParam } from '#imports';
+
+export default defineEventHandler(event => {
+  const userId = getRouterParam(event, 'userId');
+
+  return `UserId Param: ${userId}!`;
+});

dev-packages/e2e-tests/test-applications/nuxt-4/server/api/user/[userId].ts

@@ -69,30 +69,30 @@ test.describe('distributed tracing', () => {
 
   test('capture a distributed trace from a client-side API request with parametrized routes', async ({ page }) => {
     const clientTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
-      return txnEvent.transaction === '/test-param/fetch-api/:param()';
+      return txnEvent.transaction === '/test-param/user/:userId()';
     });
     const ssrTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
-      return txnEvent.transaction?.includes('GET /test-param/fetch-api') ?? false;
+      return txnEvent.transaction?.includes('GET /test-param/user') ?? false;
     });
     const serverReqTxnEventPromise = waitForTransaction('nuxt-4', txnEvent => {
-      return txnEvent.transaction?.includes('GET /api/test-param/') ?? false;
+      return txnEvent.transaction?.includes('GET /api/user/') ?? false;
     });
 
     // Navigate to the page which will trigger an API call from the client-side
-    await page.goto(`/test-param/fetch-api/${PARAM}`);
+    await page.goto(`/test-param/user/${PARAM}`);
 
     const [clientTxnEvent, ssrTxnEvent, serverReqTxnEvent] = await Promise.all([
       clientTxnEventPromise,
       ssrTxnEventPromise,
       serverReqTxnEventPromise,
     ]);
 
-    const httpClientSpan = clientTxnEvent?.spans?.find(span => span.description === `GET /api/test-param/${PARAM}`);
+    const httpClientSpan = clientTxnEvent?.spans?.find(span => span.description === `GET /api/user/${PARAM}`);
 
     expect(clientTxnEvent).toEqual(
       expect.objectContaining({
         type: 'transaction',
-        transaction: '/test-param/fetch-api/:param()', // parametrized route
+        transaction: '/test-param/user/:userId()', // parametrized route
         transaction_info: { source: 'route' },
         contexts: expect.objectContaining({
           trace: expect.objectContaining({
@@ -106,10 +106,10 @@ test.describe('distributed tracing', () => {
     expect(httpClientSpan).toBeDefined();
     expect(httpClientSpan).toEqual(
       expect.objectContaining({
-        description: `GET /api/test-param/${PARAM}`, // fixme: parametrize
+        description: `GET /api/user/${PARAM}`, // fixme: parametrize
         parent_span_id: clientTxnEvent.contexts?.trace?.span_id, // pageload span is parent
         data: expect.objectContaining({
-          url: `/api/test-param/${PARAM}`, // fixme: parametrize
+          url: `/api/user/${PARAM}`,
           type: 'fetch',
           'sentry.op': 'http.client',
           'sentry.origin': 'auto.http.browser',
@@ -121,7 +121,7 @@ test.describe('distributed tracing', () => {
     expect(ssrTxnEvent).toEqual(
       expect.objectContaining({
         type: 'transaction',
-        transaction: `GET /test-param/fetch-api/${PARAM}`, // fixme: parametrize (nitro)
+        transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
         transaction_info: { source: 'url' },
         contexts: expect.objectContaining({
           trace: expect.objectContaining({
@@ -135,7 +135,7 @@ test.describe('distributed tracing', () => {
     expect(serverReqTxnEvent).toEqual(
       expect.objectContaining({
         type: 'transaction',
-        transaction: `GET /api/test-param/${PARAM}`,
+        transaction: `GET /api/user/${PARAM}`,
         transaction_info: { source: 'url' },
         contexts: expect.objectContaining({
           trace: expect.objectContaining({