test: e2e integration tests for ga and gtm (#189)

Co-authored-by: harlan <[email protected]>

Author: huang-julien

test/e2e/basic.test.ts

@@ -149,3 +149,34 @@ describe('basic', () => {
     expect(text).toMatchInlineSnapshot(`"/_scripts/6nd5bD9YCW.js"`)
   })
 })
+
+describe('third-party-capital', () => {
+  it('expect GA to collect data', {
+    timeout: 10000,
+  }, async () => {
+    const page = await createPage('/tpc/ga')
+    await page.waitForTimeout(500)
+
+    // wait for the collect request or timeout
+    const request = page.waitForRequest(request => request.url().includes('google-analytics.com/g/collect'), {
+      timeout: 10000,
+    })
+    await page.getByText('Trigger conversion').click()
+
+    await request
+  })
+
+  it('expect GTM to work collect data', {
+    timeout: 10000,
+  }, async () => {
+    const page = await createPage('/tpc/gtm')
+    await page.waitForTimeout(500)
+
+    // wait for the collect request
+    const request = page.waitForRequest(request => request.url().includes('analytics.google.com/g/collect?'), {
+      timeout: 10000,
+    })
+    await page.getByText('trigger').click()
+    await request
+  })
+})

test/fixtures/basic/pages/tpc/ga.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useHead, useScriptGoogleAnalytics } from '#imports'
+
+useHead({
+  title: 'Google Analytics',
+})
+
+// composables return the underlying api as a proxy object and a $script with the script state
+const { gtag, $script } = useScriptGoogleAnalytics({
+  id: 'G-TR58L0EF8P',
+})
+function triggerConversion() {
+  gtag('event', 'conversion')
+}
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        status: {{ $script.status.value }}
+      </div>
+    </ClientOnly>
+    <button @click="triggerConversion">
+      Trigger Conversion
+    </button>
+  </div>
+</template>

test/fixtures/basic/pages/tpc/gtm.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useScriptGoogleTagManager } from '#imports'
+
+const { dataLayer, $script } = useScriptGoogleTagManager({
+  id: 'GTM-MNJD4B',
+})
+
+function pushEvent() {
+  dataLayer.push({
+    event: 'page_view',
+    page_title: 'GTM',
+  })
+}
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        status: {{ $script.status }}
+      </div>
+    </ClientOnly>
+
+    <button @click="pushEvent">
+      trigger
+    </button>
+  </div>
+</template>