test(vue): Add new route for trackComponent tests

Group trackComponent tests together: 1. With <> 2. Without <> 3. Not tracked Signed-off-by: Kaung Zin Hein <[email protected]>
getsentry · Sep 6, 2024 · ab13a0b · ab13a0b
1 parent 8f48f36
commit ab13a0b
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 34 deletions.
diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts b/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts
@@ -19,7 +19,7 @@ Sentry.init({
     }),
   ],
   tunnel: `http://localhost:3031/`, // proxy server
-  trackComponents: ['<HomeView>', 'UserIdErrorView'],
+  trackComponents: ['ComponentMainView', '<ComponentOneView>'],
 });
 
 app.use(router);

diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts b/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts
@@ -30,6 +30,10 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: '/components',
+      component: () => import('../views/ComponentMainView.vue'),
+    },
   ],
 });
 

diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentMainView.vue b/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentMainView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import ComponentOneView from './ComponentOneView.vue';
+import ComponentTwoView from './ComponentTwoView.vue';
+</script>
+
+<template>
+  <h1>Demonstrating Component Tracking</h1>
+  <ComponentOneView />
+  <ComponentTwoView />
+</template>
diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentOneView.vue b/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentOneView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+function log() {
+  console.log('Component One!');
+}
+</script>
+
+<template>
+  <h1>Component One</h1>
+  <button id="componentOneBtn" @click="log">Click to Log</button>
+</template>
diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentTwoView.vue b/dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentTwoView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+function log() {
+  console.log('Component Two!');
+}
+</script>
+
+<template>
+  <h1>Component One</h1>
+  <button id="componentTwoBtn" @click="log">Click to Log</button>
+</template>
diff --git a/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts b/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts
@@ -123,12 +123,12 @@ test('sends a pageload transaction with a route name as transaction name if avai
   });
 });
 
-test('sends a lifecycle span for the tracked HomeView component - with `<>`', async ({ page }) => {
+test('sends a lifecycle span for each tracked components', async ({ page }) => {
   const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
   });
 
-  await page.goto(`/`);
+  await page.goto(`/components`);
 
   const rootSpan = await transactionPromise;
 
@@ -165,56 +165,41 @@ test('sends a lifecycle span for the tracked HomeView component - with `<>`', as
         op: 'ui.vue.mount',
         origin: 'auto.ui.vue',
       }),
+
+      // without `<>`
       expect.objectContaining({
         data: {
           'sentry.op': 'ui.vue.mount',
           'sentry.origin': 'auto.ui.vue',
         },
-        description: 'Vue <HomeView>',
+        description: 'Vue <ComponentMainView>',
         op: 'ui.vue.mount',
         origin: 'auto.ui.vue',
       }),
-    ]),
-    transaction: '/',
-    transaction_info: {
-      source: 'route',
-    },
-  });
-});
 
-test('sends a lifecycle span for the tracked UserIdErrorView component - without `<>`', async ({ page }) => {
-  const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
-    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
-  });
-
-  await page.goto(`/users-error/123`);
-
-  const rootSpan = await transactionPromise;
-
-  expect(rootSpan).toMatchObject({
-    contexts: {
-      trace: {
+      // with `<>`
+      expect.objectContaining({
         data: {
-          'sentry.source': 'route',
-          'sentry.origin': 'auto.pageload.vue',
-          'sentry.op': 'pageload',
+          'sentry.op': 'ui.vue.mount',
+          'sentry.origin': 'auto.ui.vue',
         },
-        op: 'pageload',
-        origin: 'auto.pageload.vue',
-      },
-    },
-    spans: expect.arrayContaining([
-      expect.objectContaining({
+        description: 'Vue <ComponentOneView>',
+        op: 'ui.vue.mount',
+        origin: 'auto.ui.vue',
+      }),
+
+      // not tracked
+      expect.not.objectContaining({
         data: {
           'sentry.op': 'ui.vue.mount',
           'sentry.origin': 'auto.ui.vue',
         },
-        description: 'Vue <UserIdErrorView>',
+        description: 'Vue <ComponentTwoView>',
         op: 'ui.vue.mount',
         origin: 'auto.ui.vue',
       }),
     ]),
-    transaction: '/users-error/:id',
+    transaction: '/components',
     transaction_info: {
       source: 'route',
     },