Shadow: ✅ Create plugin navigation utils (v2)

test/apps/angular-app/main.ts

@@ -27,11 +27,11 @@ if (window.RUM_CONTEXT) {
   imports: [RouterLink],
   template: `
     <h1>Initial Route</h1>
-    <a routerLink="/user/42" [queryParams]="{ admin: 'true' }">Go to User 42</a><br />
-    <a routerLink="/guides/123">Go to Guides 123</a><br />
-    <a routerLink="/error-test">Go to Error Test</a><br />
-    <a routerLink="/parent/nested">Go to Nested Route</a><br />
-    <a routerLink="/unknown/page">Go to Wildcard Route</a><br />
+    <a data-testid="go-to-user" routerLink="/user/42" [queryParams]="{ admin: 'true' }">Go to User 42</a><br />
+    <a data-testid="go-to-guides" routerLink="/guides/123">Go to Guides 123</a><br />
+    <a data-testid="go-to-error-test" routerLink="/error-test">Go to Error Test</a><br />
+    <a data-testid="go-to-nested-route" routerLink="/parent/nested">Go to Nested Route</a><br />
+    <a data-testid="go-to-wildcard" routerLink="/unknown/page">Go to Wildcard Route</a><br />
     <button id="throw-error" (click)="throwError()">Throw Error</button>
     <button id="throw-error-with-context" (click)="throwErrorWithContext()">Throw Error With Context</button>
   `,
@@ -54,10 +54,14 @@ class InitialRouteComponent {
   imports: [RouterLink],
   template: `
     <h1>User Page</h1>
-    <a routerLink="/">Back to Home</a><br />
-    <a [routerLink]="['/user', id]" fragment="section">Go to Section</a><br />
-    <a [routerLink]="['/user', id]" [queryParams]="{ admin: 'false' }">Change query params</a><br />
-    <a [routerLink]="['/user', '999']" [queryParams]="{ admin: 'true' }">Go to User 999</a>
+    <a data-testid="back-to-home" routerLink="/">Back to Home</a><br />
+    <a data-testid="go-to-section" [routerLink]="['/user', id]" fragment="section">Go to Section</a><br />
+    <a data-testid="change-query-params" [routerLink]="['/user', id]" [queryParams]="{ admin: 'false' }"
+      >Change query params</a
+    ><br />
+    <a data-testid="go-to-other-user" [routerLink]="['/user', '999']" [queryParams]="{ admin: 'true' }"
+      >Go to User 999</a
+    >
   `,
 })
 class UserRouteComponent {
@@ -70,7 +74,7 @@ class UserRouteComponent {
   imports: [RouterLink],
   template: `
     <h1>Guides</h1>
-    <a routerLink="/">Back to Home</a>
+    <a data-testid="back-to-home" routerLink="/">Back to Home</a>
   `,
 })
 class GuidesRouteComponent {}

test/apps/nextjs/app/guides/[...slug]/page.tsx

@@ -5,7 +5,9 @@ export default async function GuidesPage({ params }: { params: Promise<{ slug: s
 
   return (
     <div>
-      <Link href="/">Back to Home</Link>
+      <Link data-testid="back-to-home" href="/">
+        Back to Home
+      </Link>
       <h1>Guides: {slug.join('/')}</h1>
     </div>
   )

test/apps/nextjs/app/page.tsx

@@ -6,19 +6,29 @@ export default function HomePage() {
       <h1>Home</h1>
       <ul>
         <li>
-          <Link href="/user/42?admin=true">Go to User 42</Link>
+          <Link data-testid="go-to-user" href="/user/42?admin=true">
+            Go to User 42
+          </Link>
         </li>
         <li>
-          <Link href="/guides/123">Go to Guides 123</Link>
+          <Link data-testid="go-to-guides" href="/guides/123">
+            Go to Guides 123
+          </Link>
         </li>
         <li>
-          <Link href="/error-test">Go to Error Test</Link>
+          <Link data-testid="go-to-error-test" href="/error-test">
+            Go to Error Test
+          </Link>
         </li>
         <li>
-          <Link href="/error-test/server-error?throw=true">Go to Server Error</Link>
+          <Link data-testid="go-to-server-error" href="/error-test/server-error?throw=true">
+            Go to Server Error
+          </Link>
         </li>
         <li>
-          <Link href="/global-error-test?throw=true">Go to Global Error</Link>
+          <Link data-testid="go-to-global-error" href="/global-error-test?throw=true">
+            Go to Global Error
+          </Link>
         </li>
       </ul>
     </div>

test/apps/nextjs/app/user/[id]/page.tsx

@@ -5,16 +5,24 @@ export default async function UserPage({ params }: { params: Promise<{ id: strin
 
   return (
     <div>
-      <Link href="/">← Back to Home</Link>
+      <Link data-testid="back-to-home" href="/">
+        ← Back to Home
+      </Link>
       <h1>User {id}</h1>
       <div>
-        <Link href="/user/999?admin=true">Go to User 999</Link>
+        <Link data-testid="go-to-other-user" href="/user/999?admin=true">
+          Go to User 999
+        </Link>
       </div>
       <div>
-        <Link href={`/user/${id}?admin=false`}>Change query params</Link>
+        <Link data-testid="change-query-params" href={`/user/${id}?admin=false`}>
+          Change query params
+        </Link>
       </div>
       <div>
-        <Link href={`/user/${id}#section`}>Go to Section</Link>
+        <Link data-testid="go-to-section" href={`/user/${id}#section`}>
+          Go to Section
+        </Link>
       </div>
     </div>
   )

test/apps/nextjs/pages/pages-router/guides/[...slug].tsx

@@ -8,7 +8,9 @@ export default function GuidesPage() {
 
   return (
     <div>
-      <Link href="/pages-router">← Back to Home</Link>
+      <Link data-testid="back-to-home" href="/pages-router">
+        ← Back to Home
+      </Link>
       <h1>Guides: {slugParts.join('/')}</h1>
     </div>
   )

test/apps/nextjs/pages/pages-router/index.tsx

@@ -6,13 +6,19 @@ export default function HomePage() {
       <h1>Home</h1>
       <ul>
         <li>
-          <Link href="/pages-router/user/42?admin=true">Go to User 42</Link>
+          <Link data-testid="go-to-user" href="/pages-router/user/42?admin=true">
+            Go to User 42
+          </Link>
         </li>
         <li>
-          <Link href="/pages-router/guides/123">Go to Guides 123</Link>
+          <Link data-testid="go-to-guides" href="/pages-router/guides/123">
+            Go to Guides 123
+          </Link>
         </li>
         <li>
-          <Link href="/pages-router/error-test">Go to Error Test</Link>
+          <Link data-testid="go-to-error-test" href="/pages-router/error-test">
+            Go to Error Test
+          </Link>
         </li>
       </ul>
     </div>

test/apps/nextjs/pages/pages-router/user/[id].tsx

@@ -7,16 +7,24 @@ export default function UserPage() {
 
   return (
     <div>
-      <Link href="/pages-router">← Back to Home</Link>
+      <Link data-testid="back-to-home" href="/pages-router">
+        ← Back to Home
+      </Link>
       <h1>User {id}</h1>
       <div>
-        <Link href="/pages-router/user/999?admin=true">Go to User 999</Link>
+        <Link data-testid="go-to-other-user" href="/pages-router/user/999?admin=true">
+          Go to User 999
+        </Link>
       </div>
       <div>
-        <Link href={`/pages-router/user/${id}?admin=false`}>Change query params</Link>
+        <Link data-testid="change-query-params" href={`/pages-router/user/${id}?admin=false`}>
+          Change query params
+        </Link>
       </div>
       <div>
-        <Link href={`/pages-router/user/${id}#section`}>Go to Section</Link>
+        <Link data-testid="go-to-section" href={`/pages-router/user/${id}#section`}>
+          Go to Section
+        </Link>
       </div>
     </div>
   )

test/apps/nuxt-app/pages/guides/[...slug].vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     <h1>Guides</h1>
-    <NuxtLink to="/">Back to Home</NuxtLink>
+    <NuxtLink data-testid="back-to-home" to="/">Back to Home</NuxtLink>
   </div>
 </template>

test/apps/nuxt-app/pages/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <h1>Home</h1>
-    <NuxtLink to="/user/42?admin=true">Go to User 42</NuxtLink><br />
-    <NuxtLink to="/guides/123">Go to Guides 123</NuxtLink><br />
-    <NuxtLink to="/error-test">Go to Error Test</NuxtLink><br />
+    <NuxtLink data-testid="go-to-user" to="/user/42?admin=true">Go to User 42</NuxtLink><br />
+    <NuxtLink data-testid="go-to-guides" to="/guides/123">Go to Guides 123</NuxtLink><br />
+    <NuxtLink data-testid="go-to-error-test" to="/error-test">Go to Error Test</NuxtLink><br />
   </div>
 </template>

test/apps/nuxt-app/pages/user/[id].vue

@@ -5,9 +5,11 @@ const route = useRoute()
 <template>
   <div>
     <h1>User {{ route.params.id }}</h1>
-    <NuxtLink to="/">Back to Home</NuxtLink><br />
-    <NuxtLink :to="`/user/${route.params.id}#section`">Go to Section</NuxtLink><br />
-    <NuxtLink :to="`/user/${route.params.id}?admin=false`">Change query params</NuxtLink><br />
-    <NuxtLink to="/user/999?admin=true">Go to User 999</NuxtLink>
+    <NuxtLink data-testid="back-to-home" to="/">Back to Home</NuxtLink><br />
+    <NuxtLink data-testid="go-to-section" :to="`/user/${route.params.id}#section`">Go to Section</NuxtLink><br />
+    <NuxtLink data-testid="change-query-params" :to="`/user/${route.params.id}?admin=false`"
+      >Change query params</NuxtLink
+    ><br />
+    <NuxtLink data-testid="go-to-other-user" to="/user/999?admin=true">Go to User 999</NuxtLink>
   </div>
 </template>

test/apps/nuxt-app/yarn.lock

@@ -347,8 +347,8 @@ __metadata:
 
 "@datadog/browser-core@file:../../../packages/core/package.tgz::locator=nuxt-app%40workspace%3A.":
   version: 6.32.0
-  resolution: "@datadog/browser-core@file:../../../packages/core/package.tgz#../../../packages/core/package.tgz::hash=3139c3&locator=nuxt-app%40workspace%3A."
-  checksum: 10c0/043726d1ed47fc37dc7f38bf1a79db8ddc191eb07602e347e96d02c4f837d5773ed548dd8c07a8e92f121d460da68d84088489030c7f88120194927c77b4ac09
+  resolution: "@datadog/browser-core@file:../../../packages/core/package.tgz#../../../packages/core/package.tgz::hash=2bcbab&locator=nuxt-app%40workspace%3A."
+  checksum: 10c0/d184c9c1b22336ceebe73f9e7b74c1d8fc955610171d9d765e2032baf4ce3fc1b63bea4950a0bd99a73e212d75e064b9161dad6df9cefdaf8fdbe54d4ad29ecd
   languageName: node
   linkType: hard
 
@@ -363,7 +363,7 @@ __metadata:
 
 "@datadog/browser-rum-nuxt@file:../../../packages/rum-nuxt/package.tgz::locator=nuxt-app%40workspace%3A.":
   version: 0.0.0
-  resolution: "@datadog/browser-rum-nuxt@file:../../../packages/rum-nuxt/package.tgz#../../../packages/rum-nuxt/package.tgz::hash=e895b3&locator=nuxt-app%40workspace%3A."
+  resolution: "@datadog/browser-rum-nuxt@file:../../../packages/rum-nuxt/package.tgz#../../../packages/rum-nuxt/package.tgz::hash=293201&locator=nuxt-app%40workspace%3A."
   dependencies:
     "@datadog/browser-core": "npm:6.32.0"
     "@datadog/browser-rum-core": "npm:6.32.0"
@@ -382,7 +382,7 @@ __metadata:
       optional: true
     vue-router:
       optional: true
-  checksum: 10c0/8c760e9dbd337296a5f4d55980616dc37a47b98676887e7db50aa8ff6cb70b7979ae647229c58daeea9bf3053eb1fc701e637e8c4783aacb9eedc769bb994383
+  checksum: 10c0/ee8d7b559120abea1056e7c984e731cd9cac8edf83d8840bcbabd65e9f0fb51725f9a7ccbab22a396cd73116964091067aaa09e36d2ea0e2113548c89ddeba9a
   languageName: node
   linkType: hard
 

test/apps/react-router-v6-app/app.tsx

@@ -25,15 +25,25 @@ function HomePage() {
   return (
     <div>
       <h1>Home</h1>
-      <Link to="/user/42?admin=true">Go to User 42</Link>
+      <Link data-testid="go-to-user" to="/user/42?admin=true">
+        Go to User 42
+      </Link>
       <br />
-      <Link to="/guides/123">Go to Guides 123</Link>
+      <Link data-testid="go-to-guides" to="/guides/123">
+        Go to Guides 123
+      </Link>
       <br />
-      <Link to="/wildcard/foo/bar">Go to Wildcard</Link>
+      <Link data-testid="go-to-wildcard" to="/wildcard/foo/bar">
+        Go to Wildcard
+      </Link>
       <br />
-      <Link to="/error-test">Go to Error Test</Link>
+      <Link data-testid="go-to-error-test" to="/error-test">
+        Go to Error Test
+      </Link>
       <br />
-      <Link to="/tracked">Go to Tracked</Link>
+      <Link data-testid="go-to-tracked" to="/tracked">
+        Go to Tracked
+      </Link>
     </div>
   )
 }
@@ -43,13 +53,21 @@ function UserPage() {
   return (
     <div>
       <h1>User {id}</h1>
-      <Link to="/">Back to Home</Link>
+      <Link data-testid="back-to-home" to="/">
+        Back to Home
+      </Link>
       <br />
-      <Link to={`/user/${id}#section`}>Go to Section</Link>
+      <Link data-testid="go-to-section" to={`/user/${id}#section`}>
+        Go to Section
+      </Link>
       <br />
-      <Link to={`/user/${id}?admin=false`}>Change query params</Link>
+      <Link data-testid="change-query-params" to={`/user/${id}?admin=false`}>
+        Change query params
+      </Link>
       <br />
-      <Link to="/user/999?admin=true">Go to User 999</Link>
+      <Link data-testid="go-to-other-user" to="/user/999?admin=true">
+        Go to User 999
+      </Link>
     </div>
   )
 }
@@ -58,7 +76,9 @@ function GuidesPage() {
   return (
     <div>
       <h1>Guides</h1>
-      <Link to="/">Back to Home</Link>
+      <Link data-testid="back-to-home" to="/">
+        Back to Home
+      </Link>
     </div>
   )
 }
@@ -68,7 +88,9 @@ function WildcardPage() {
   return (
     <div>
       <h1>Wildcard: {splatPath}</h1>
-      <Link to="/">Back to Home</Link>
+      <Link data-testid="back-to-home" to="/">
+        Back to Home
+      </Link>
     </div>
   )
 }

test/apps/vue-router-app/src/pages/GuidesPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     <h1>Guides</h1>
-    <router-link to="/">Back to Home</router-link>
+    <router-link data-testid="back-to-home" to="/">Back to Home</router-link>
   </div>
 </template>

test/apps/vue-router-app/src/pages/HomePage.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <h1>Home</h1>
-    <router-link to="/user/42?admin=true">Go to User 42</router-link><br />
-    <router-link to="/guides/123">Go to Guides 123</router-link><br />
-    <router-link to="/error-test">Go to Error Test</router-link>
+    <router-link data-testid="go-to-user" to="/user/42?admin=true">Go to User 42</router-link><br />
+    <router-link data-testid="go-to-guides" to="/guides/123">Go to Guides 123</router-link><br />
+    <router-link data-testid="go-to-error-test" to="/error-test">Go to Error Test</router-link>
   </div>
 </template>

test/apps/vue-router-app/src/pages/UserPage.vue

@@ -5,9 +5,11 @@ const route = useRoute()
 <template>
   <div>
     <h1>User {{ route.params.id }}</h1>
-    <router-link to="/">Back to Home</router-link><br />
-    <router-link :to="`/user/${route.params.id}#section`">Go to Section</router-link><br />
-    <router-link :to="`/user/${route.params.id}?admin=false`">Change query params</router-link><br />
-    <router-link to="/user/999?admin=true">Go to User 999</router-link>
+    <router-link data-testid="back-to-home" to="/">Back to Home</router-link><br />
+    <router-link data-testid="go-to-section" :to="`/user/${route.params.id}#section`">Go to Section</router-link><br />
+    <router-link data-testid="change-query-params" :to="`/user/${route.params.id}?admin=false`"
+      >Change query params</router-link
+    ><br />
+    <router-link data-testid="go-to-other-user" to="/user/999?admin=true">Go to User 999</router-link>
   </div>
 </template>