Add more e2e testing

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -32,6 +32,9 @@ export const someMoreNestedRoutes = [
                     <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
                       Navigate to Another Lazy Route
                     </Link>
+                    <Link to="/lazy/inner/1/2/" id="navigate-to-upper">
+                      Navigate to Upper Lazy Route
+                    </Link>
                   </div>
                 ),
               },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -107,7 +107,15 @@ test('Creates navigation transactions between two different lazy routes', async
   expect(secondEvent.contexts?.trace?.op).toBe('navigation');
 });
 
-test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+test('Creates navigation transactions from inner lazy route to another lazy route with history navigation', async ({
+  page,
+}) => {
+  await page.goto('/');
+
+  // Navigate to inner lazy route first
+  const navigationToInner = page.locator('id=navigation');
+  await expect(navigationToInner).toBeVisible();
+
   // First, navigate to the inner lazy route
   const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
@@ -117,11 +125,6 @@ test('Creates navigation transactions from inner lazy route to another lazy rout
     );
   });
 
-  await page.goto('/');
-
-  // Navigate to inner lazy route first
-  const navigationToInner = page.locator('id=navigation');
-  await expect(navigationToInner).toBeVisible();
   await navigationToInner.click();
 
   const firstEvent = await firstTransactionPromise;
@@ -135,6 +138,10 @@ test('Creates navigation transactions from inner lazy route to another lazy rout
   expect(firstEvent.type).toBe('transaction');
   expect(firstEvent.contexts?.trace?.op).toBe('navigation');
 
+  // Click the navigation link from within the inner lazy route to another lazy route
+  const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+  await expect(navigationToAnotherFromInner).toBeVisible();
+
   // Now navigate from the inner lazy route to another lazy route
   const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
@@ -144,9 +151,6 @@ test('Creates navigation transactions from inner lazy route to another lazy rout
     );
   });
 
-  // Click the navigation link from within the inner lazy route to another lazy route
-  const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
-  await expect(navigationToAnotherFromInner).toBeVisible();
   await navigationToAnotherFromInner.click();
 
   const secondEvent = await secondTransactionPromise;
@@ -159,4 +163,103 @@ test('Creates navigation transactions from inner lazy route to another lazy rout
   expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
   expect(secondEvent.type).toBe('transaction');
   expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+
+  // Go back to the previous page to ensure history navigation works as expected
+  const goBackTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+    );
+  });
+
+  await page.goBack();
+
+  const goBackEvent = await goBackTransactionPromise;
+
+  // Validate the second go back transaction event
+  expect(goBackEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+  expect(goBackEvent.type).toBe('transaction');
+  expect(goBackEvent.contexts?.trace?.op).toBe('navigation');
+
+  // Navigate to the upper route
+  const goUpperRouteTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/lazy/inner/:id/:anotherId'
+    );
+  });
+
+  const navigationToUpper = page.locator('id=navigate-to-upper');
+
+  await navigationToUpper.click();
+
+  const goUpperRouteEvent = await goUpperRouteTransactionPromise;
+
+  // Validate the go upper route transaction event
+  expect(goUpperRouteEvent.transaction).toBe('/lazy/inner/:id/:anotherId');
+  expect(goUpperRouteEvent.type).toBe('transaction');
+  expect(goUpperRouteEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Does not send any duplicate navigation transaction names browsing between different routes', async ({ page }) => {
+  const transactionNamesList: string[] = [];
+
+  // Monitor and add all transaction names sent to Sentry for the navigations
+  const allTransactionsPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    if (transactionEvent?.transaction) {
+      transactionNamesList.push(transactionEvent.transaction);
+    }
+
+    if (transactionNamesList.length >= 5) {
+      // Stop monitoring once we have enough transaction names
+      return true;
+    }
+
+    return false;
+  });
+
+  // Go to root page
+  await page.goto('/');
+  page.waitForTimeout(1000);
+
+  // Navigate to inner lazy route
+  const navigationToInner = page.locator('id=navigation');
+  await expect(navigationToInner).toBeVisible();
+  await navigationToInner.click();
+
+  // Navigate to another lazy route
+  const navigationToAnother = page.locator('id=navigate-to-another-from-inner');
+  await expect(navigationToAnother).toBeVisible();
+  await page.waitForTimeout(1000);
+
+  // Click to navigate to another lazy route
+  await navigationToAnother.click();
+  const anotherLazyRouteContent = page.locator('id=another-lazy-route-deep');
+  await expect(anotherLazyRouteContent).toBeVisible();
+  await page.waitForTimeout(1000);
+
+  // Navigate back to inner lazy route
+  await page.goBack();
+  await expect(page.locator('id=innermost-lazy-route')).toBeVisible();
+  await page.waitForTimeout(1000);
+
+  // Navigate to upper inner lazy route
+  const navigationToUpper = page.locator('id=navigate-to-upper');
+  await expect(navigationToUpper).toBeVisible();
+  await navigationToUpper.click();
+
+  await page.waitForTimeout(1000);
+
+  await allTransactionsPromise;
+
+  expect(transactionNamesList.length).toBe(5);
+  expect(transactionNamesList).toEqual([
+    '/',
+    '/lazy/inner/:id/:anotherId/:someAnotherId',
+    '/another-lazy/sub/:id/:subId',
+    '/lazy/inner/:id/:anotherId/:someAnotherId',
+    '/lazy/inner/:id/:anotherId',
+  ]);
 });