From b34475832d675cf54631170c1866909977b24ba0 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 4 Aug 2024 16:36:18 +0200
Subject: [PATCH 1/3] test: e2e integration tests for ga and gtm

---
 test/e2e/basic.test.ts                | 32 +++++++++++++++++++++++++++
 test/fixtures/basic/pages/tpc/ga.vue  | 28 +++++++++++++++++++++++
 test/fixtures/basic/pages/tpc/gtm.vue | 28 +++++++++++++++++++++++
 3 files changed, 88 insertions(+)
 create mode 100644 test/fixtures/basic/pages/tpc/ga.vue
 create mode 100644 test/fixtures/basic/pages/tpc/gtm.vue

diff --git a/test/e2e/basic.test.ts b/test/e2e/basic.test.ts
index 0c933957..a34e1345 100644
--- a/test/e2e/basic.test.ts
+++ b/test/e2e/basic.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { createResolver } from '@nuxt/kit'
 import { createPage, setup } from '@nuxt/test-utils/e2e'
 import { parseURL } from 'ufo'
+import type { Request } from 'playwright-core'
 
 const { resolve } = createResolver(import.meta.url)
 
@@ -149,3 +150,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
+  })
+})
diff --git a/test/fixtures/basic/pages/tpc/ga.vue b/test/fixtures/basic/pages/tpc/ga.vue
new file mode 100644
index 00000000..27a73fea
--- /dev/null
+++ b/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-TEST',
+})
+function triggerConversion() {
+  gtag('event', 'conversion')
+}
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        status: {{ $script.status.value }}
+      </div>
+    </ClientOnly>
+    <button @click="triggerConversion">
+      Trigger Conversion
+    </button>
+  </div>
+</template>
diff --git a/test/fixtures/basic/pages/tpc/gtm.vue b/test/fixtures/basic/pages/tpc/gtm.vue
new file mode 100644
index 00000000..ae9d0c6e
--- /dev/null
+++ b/test/fixtures/basic/pages/tpc/gtm.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useScriptGoogleTagManager } from '#imports'
+
+const { dataLayer, $script } = useScriptGoogleTagManager({
+  id: 'G-TEST',
+})
+
+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>

From 192d976125abaf93f098045a2090dcb2d23868af Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 4 Aug 2024 16:45:47 +0200
Subject: [PATCH 2/3] lint

---
 test/e2e/basic.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/e2e/basic.test.ts b/test/e2e/basic.test.ts
index a34e1345..f90d8997 100644
--- a/test/e2e/basic.test.ts
+++ b/test/e2e/basic.test.ts
@@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest'
 import { createResolver } from '@nuxt/kit'
 import { createPage, setup } from '@nuxt/test-utils/e2e'
 import { parseURL } from 'ufo'
-import type { Request } from 'playwright-core'
 
 const { resolve } = createResolver(import.meta.url)
 

From 4cc9751681d96717fb3f87144cfebc19eae16f77 Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Mon, 5 Aug 2024 14:30:11 +1000
Subject: [PATCH 3/3] chore: use real ids

---
 test/fixtures/basic/pages/tpc/ga.vue  | 2 +-
 test/fixtures/basic/pages/tpc/gtm.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/fixtures/basic/pages/tpc/ga.vue b/test/fixtures/basic/pages/tpc/ga.vue
index 27a73fea..73686db4 100644
--- a/test/fixtures/basic/pages/tpc/ga.vue
+++ b/test/fixtures/basic/pages/tpc/ga.vue
@@ -7,7 +7,7 @@ useHead({
 
 // composables return the underlying api as a proxy object and a $script with the script state
 const { gtag, $script } = useScriptGoogleAnalytics({
-  id: 'G-TEST',
+  id: 'G-TR58L0EF8P',
 })
 function triggerConversion() {
   gtag('event', 'conversion')
diff --git a/test/fixtures/basic/pages/tpc/gtm.vue b/test/fixtures/basic/pages/tpc/gtm.vue
index ae9d0c6e..15c419ab 100644
--- a/test/fixtures/basic/pages/tpc/gtm.vue
+++ b/test/fixtures/basic/pages/tpc/gtm.vue
@@ -2,7 +2,7 @@
 import { useScriptGoogleTagManager } from '#imports'
 
 const { dataLayer, $script } = useScriptGoogleTagManager({
-  id: 'G-TEST',
+  id: 'GTM-MNJD4B',
 })
 
 function pushEvent() {