test: fullstory integration test init (#212)

* test: fullstory integration test init * fix: full-story test path typo * fix: fullStory integration setup
QwikDev · Aug 2, 2023 · 9a58112 · 9a58112 · vercel · Aug 2, 2023
1 parent d495ca9
commit 9a58112
Show file tree

Hide file tree

Showing 3 changed files with 323 additions and 0 deletions.
diff --git a/tests/integrations/full-story/full-story.spec.ts b/tests/integrations/full-story/full-story.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('full-story', async ({ page }) => {
+  await page.goto('/tests/integrations/full-story/');
+
+  await page.waitForSelector('.completed');
+
+  const buttonSendEvent = page.locator('#buttonSendEvent');
+  await buttonSendEvent.click();
+
+  const testFullStory = page.locator('#testIdentify');
+  await expect(testFullStory).toHaveText('called');
+});
diff --git a/tests/integrations/full-story/index.html b/tests/integrations/full-story/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+
+    <title>Partytown FullStory</title>
+
+    <script>
+      partytown = {
+        forward: ['FS.identify'],
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logImageRequests: true,
+        logMainAccess: true,
+        logSendBeaconRequests: true,
+        logStackTraces: false,
+        logScriptExecution: true,
+      };
+    </script>
+    <script src="/~partytown/debug/partytown.js"></script>
+
+    <!-- FullStory Code -->
+    <script type="text/partytown">
+
+      window['_fs_debug'] = true;
+      window['_fs_host'] = 'fullstory.com';
+      window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
+      window['_fs_org'] = 'FBQ1T';
+      window['_fs_namespace'] = 'FS';
+      (function (m, n, e, t, l, o, g, y) {
+
+        g = m[e] = function (a, b, s) {
+          g.q ? g.q.push([a, b, s]) : g._api(a, b, s);
+        };
+        g.q = [];
+        o = n.createElement(t);
+        o.async = 1;
+        o.crossOrigin = 'anonymous';
+        o.src = 'https://' + _fs_script;
+        y = n.getElementsByTagName(t)[0];
+        y.parentNode.insertBefore(o, y);
+        g.identify = function (i, v, s) {
+          g(l, { uid: i }, s);
+          if (v) g(l, v, s);
+        };
+        g.setUserVars = function (v, s) {
+          g(l, v, s);
+        };
+        g.event = function (i, v, s) {
+          g('event', { n: i, p: v }, s);
+        };
+        g.anonymize = function () {
+          g.identify(!!0);
+        };
+        g.shutdown = function () {
+          g('rec', !1);
+        };
+        g.restart = function () {
+          g('rec', !0);
+        };
+        g.log = function (a, b) {
+          g('log', [a, b]);
+        };
+        g.consent = function (a) {
+          g('consent', !arguments.length || a);
+        };
+        g.identifyAccount = function (i, v) {
+          o = 'account';
+          v = v || {};
+          v.acctId = i;
+          g(o, v);
+        };
+        g.clearUserCookie = function () {};
+        g.setVars = function (n, p) {
+          g('setVars', [n, p]);
+        };
+        g._w = {};
+        y = 'XMLHttpRequest';
+        g._w[y] = m[y];
+        y = 'fetch';
+        g._w[y] = m[y];
+        if (m[y])
+          m[y] = function () {
+            return g._w[y].apply(this, arguments);
+          };
+        g._v = '1.3.0';
+      })(window, document, window['_fs_namespace'], 'script', 'user');
+    </script>
+    <!-- End FullStory Code -->
+
+    <link
+      rel="icon"
+      id="favicon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
+    />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+          Apple Color Emoji, Segoe UI Emoji;
+        font-size: 12px;
+      }
+      h1 {
+        margin: 0 0 15px 0;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 16px 8px;
+      }
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: blue;
+      }
+      a:hover {
+        background-color: #eee;
+      }
+      li {
+        display: flex;
+        margin: 15px 0;
+      }
+      li strong,
+      li code,
+      li button {
+        white-space: nowrap;
+        flex: 1;
+        margin: 0 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Partytown FullStory</h1>
+
+    <p>
+      <strong>Identify</strong>
+      <span id="testIdentify"></span>
+    </p>
+
+    <script>
+      function sendEvent() {
+        window['FS'].identify('462718483', {
+          displayName: 'Daniel Falko',
+          email: '[email protected]',
+        });
+        document.getElementById('testIdentify').textContent = 'called';
+      }
+    </script>
+    <button onclick="sendEvent()" id="buttonSendEvent">Identify</button>
+
+    <script type="text/partytown">
+      (function () {
+        document.body.classList.add('completed');
+      })();
+    </script>
+
+    <p><a href="/tests/integrations/full-story/standard.html">Standard FullStory</a></p>
+    <p><a href="/tests/">All Tests</a></p>
+  </body>
+</html>
diff --git a/tests/integrations/full-story/standard.html b/tests/integrations/full-story/standard.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+
+    <title>Standard FullStory</title>
+
+    <!-- FullStory -->
+    <script>
+      window['_fs_debug'] = false;
+      window['_fs_host'] = 'fullstory.com';
+      window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
+      window['_fs_org'] = 'ORG-ID';
+      window['_fs_namespace'] = 'FS';
+      (function (m, n, e, t, l, o, g, y) {
+        if (e in m) {
+          if (m.console && m.console.log) {
+            m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');
+          }
+          return;
+        }
+        g = m[e] = function (a, b, s) {
+          g.q ? g.q.push([a, b, s]) : g._api(a, b, s);
+        };
+        g.q = [];
+        o = n.createElement(t);
+        o.async = 1;
+        o.crossOrigin = 'anonymous';
+        o.src = 'https://' + _fs_script;
+        y = n.getElementsByTagName(t)[0];
+        y.parentNode.insertBefore(o, y);
+        g.identify = function (i, v, s) {
+          g(l, { uid: i }, s);
+          if (v) g(l, v, s);
+        };
+        g.setUserVars = function (v, s) {
+          g(l, v, s);
+        };
+        g.event = function (i, v, s) {
+          g('event', { n: i, p: v }, s);
+        };
+        g.anonymize = function () {
+          g.identify(!!0);
+        };
+        g.shutdown = function () {
+          g('rec', !1);
+        };
+        g.restart = function () {
+          g('rec', !0);
+        };
+        g.log = function (a, b) {
+          g('log', [a, b]);
+        };
+        g.consent = function (a) {
+          g('consent', !arguments.length || a);
+        };
+        g.identifyAccount = function (i, v) {
+          o = 'account';
+          v = v || {};
+          v.acctId = i;
+          g(o, v);
+        };
+        g.clearUserCookie = function () {};
+        g.setVars = function (n, p) {
+          g('setVars', [n, p]);
+        };
+        g._w = {};
+        y = 'XMLHttpRequest';
+        g._w[y] = m[y];
+        y = 'fetch';
+        g._w[y] = m[y];
+        if (m[y])
+          m[y] = function () {
+            return g._w[y].apply(this, arguments);
+          };
+        g._v = '1.3.0';
+      })(window, document, window['_fs_namespace'], 'script', 'user');
+    </script>
+    <!-- End FullStory -->
+
+    <link
+      rel="icon"
+      id="favicon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
+    />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+          Apple Color Emoji, Segoe UI Emoji;
+        font-size: 12px;
+      }
+      h1 {
+        margin: 0 0 15px 0;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 16px 8px;
+      }
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: blue;
+      }
+      a:hover {
+        background-color: #eee;
+      }
+      li {
+        display: flex;
+        margin: 15px 0;
+      }
+      li strong,
+      li code,
+      li button {
+        white-space: nowrap;
+        flex: 1;
+        margin: 0 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Standard FullStory</h1>
+
+    <button onclick="sendEvent()">FullStory Identify</button>
+    <script>
+      function sendEvent() {
+        window['FS'].identify('462718483', {
+          displayName: 'Daniel Falko',
+          email: '[email protected]',
+        });
+      }
+    </script>
+
+    <hr />
+    <p><a href="/tests/integrations/full-story/">Partytown FullStory</a></p>
+    <p><a href="/tests/">All Tests</a></p>
+  </body>
+</html>