test(vue): Add test cases for using Options API (mixins) (#23564)

Adds tests for the mixins API (we had none so far). 

And also adds an E2E test variant without the Options API, to
demonstrate that the SDK currently does not send UI spans without it
(`ui.render`, `ui.mount`, ...).

Ref: #23375

Vue Options API Compile time flag:
https://vuejs.org/api/compile-time-flags.html#VUE_OPTIONS_API

Author: s1gr1d

dev-packages/e2e-tests/test-applications/vue-3/package.json

@@ -15,6 +15,8 @@
     "test:assert": "pnpm test:print-version && playwright test",
     "test:build-canary": "pnpm install && pnpm test:install-canary && pnpm build",
     "test:build-latest": "pnpm install && pnpm add vue@latest && pnpm build",
+    "test:build-no-options-api": "pnpm install && VUE_OPTIONS_API=false pnpm build",
+    "test:assert-no-options-api": "VUE_OPTIONS_API=false pnpm test:assert",
     "test:install-canary": "pnpm add vue@$(git ls-remote --tags --sort='v:refname' https://github.com/vuejs/core.git | tail -n1 | awk -F'/' '{print $NF}')",
     "test:print-version": "node -p \"'Vue version: ' + require('vue/package.json').version\""
   },
@@ -52,6 +54,11 @@
       {
         "build-command": "pnpm test:build-canary",
         "label": "vue-3 (canary)"
+      },
+      {
+        "build-command": "pnpm test:build-no-options-api",
+        "assert-command": "pnpm test:assert-no-options-api",
+        "label": "vue-3 (no Options API)"
       }
     ]
   }

dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts

@@ -1,6 +1,9 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+// Set by the `assert-command` of the `vue-3 (no Options API)` variant
+const OPTIONS_API_DISABLED = process.env.VUE_OPTIONS_API === 'false';
+
 test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
   const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
@@ -135,7 +138,10 @@ test('sends a pageload transaction with a route name as transaction name if avai
   });
 });
 
-test('sends a lifecycle span for each tracked components', async ({ page }) => {
+test('sends a lifecycle span for the root and for each tracked component only', async ({ page }) => {
+  // Vue compiles `app.mixin()` down to a no-op when the Options API is disabled, so the SDK creates no UI spans at all.
+  test.fail(OPTIONS_API_DISABLED, 'Vue tracing is registered through app.mixin(), which needs the Options API');
+
   const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
   });
@@ -144,79 +150,61 @@ test('sends a lifecycle span for each tracked components', async ({ page }) => {
 
   const rootSpan = await transactionPromise;
 
-  expect(rootSpan).toMatchObject({
-    contexts: {
-      trace: {
-        data: {
-          'sentry.source': 'route',
-          'sentry.origin': 'auto.pageload.vue',
-          'sentry.op': 'pageload',
-          'url.template': '/components',
-          'url.path': '/components',
-          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/components$/),
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.vue',
-      },
+  const uiSpans = (rootSpan.spans || []).filter(span => span.origin === 'auto.ui.vue');
+  const uiSpanDescriptions = uiSpans.map(span => span.description).sort();
+
+  expect(uiSpanDescriptions).toEqual([
+    'Application Render',
+    'Vue <ComponentMainView>',
+    'Vue <ComponentOneView>',
+    'Vue <Root>',
+  ]);
+
+  // enabled by default
+  const applicationRenderSpan = uiSpans.find(span => span.description === 'Application Render');
+  expect(applicationRenderSpan).toMatchObject({
+    data: {
+      'sentry.op': 'ui.render',
+      'sentry.origin': 'auto.ui.vue',
     },
-    spans: expect.arrayContaining([
-      // enabled by default
-      expect.objectContaining({
-        data: {
-          'sentry.op': 'ui.render',
-          'sentry.origin': 'auto.ui.vue',
-        },
-        description: 'Application Render',
-        op: 'ui.render',
-        origin: 'auto.ui.vue',
-      }),
-      // enabled by default
-      expect.objectContaining({
-        data: {
-          'sentry.op': 'ui.mount',
-          'sentry.origin': 'auto.ui.vue',
-        },
-        description: 'Vue <Root>',
-        op: 'ui.mount',
-        origin: 'auto.ui.vue',
-      }),
+    op: 'ui.render',
+    origin: 'auto.ui.vue',
+  });
 
-      // without `<>`
-      expect.objectContaining({
-        data: {
-          'sentry.op': 'ui.mount',
-          'sentry.origin': 'auto.ui.vue',
-        },
-        description: 'Vue <ComponentMainView>',
-        op: 'ui.mount',
-        origin: 'auto.ui.vue',
-      }),
+  // enabled by default
+  const rootComponentSpan = uiSpans.find(span => span.description === 'Vue <Root>');
+  expect(rootComponentSpan).toMatchObject({
+    data: {
+      'sentry.op': 'ui.mount',
+      'sentry.origin': 'auto.ui.vue',
+    },
+    op: 'ui.mount',
+    origin: 'auto.ui.vue',
+  });
 
-      // with `<>`
-      expect.objectContaining({
-        data: {
-          'sentry.op': 'ui.mount',
-          'sentry.origin': 'auto.ui.vue',
-        },
-        description: 'Vue <ComponentOneView>',
-        op: 'ui.mount',
-        origin: 'auto.ui.vue',
-      }),
+  // without `<>`
+  const componentMainViewSpan = uiSpans.find(span => span.description === 'Vue <ComponentMainView>');
+  expect(componentMainViewSpan).toMatchObject({
+    data: {
+      'sentry.op': 'ui.mount',
+      'sentry.origin': 'auto.ui.vue',
+    },
+    op: 'ui.mount',
+    origin: 'auto.ui.vue',
+  });
 
-      // not tracked
-      expect.not.objectContaining({
-        data: {
-          'sentry.op': 'ui.mount',
-          'sentry.origin': 'auto.ui.vue',
-        },
-        description: 'Vue <ComponentTwoView>',
-        op: 'ui.mount',
-        origin: 'auto.ui.vue',
-      }),
-    ]),
-    transaction: '/components',
-    transaction_info: {
-      source: 'route',
+  // with `<>`
+  const componentOneViewSpan = uiSpans.find(span => span.description === 'Vue <ComponentOneView>');
+  expect(componentOneViewSpan).toMatchObject({
+    data: {
+      'sentry.op': 'ui.mount',
+      'sentry.origin': 'auto.ui.vue',
     },
+    op: 'ui.mount',
+    origin: 'auto.ui.vue',
   });
+
+  // `ComponentTwoView` renders on this route but is absent from `trackComponents`
+  // not tracked
+  expect(uiSpanDescriptions).not.toContain('Vue <ComponentTwoView>');
 });

dev-packages/e2e-tests/test-applications/vue-3/vite.config.ts

@@ -4,9 +4,15 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vite';
 
+// Nuxt 5 disables the Options API by default (users can disable it too for smaller bundle size)
+const optionsApi = process.env.VUE_OPTIONS_API === 'false' ? 'false' : 'true';
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx()],
+  define: {
+    __VUE_OPTIONS_API__: optionsApi,
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),