Initial SPA test case! (#16)

* e2e test case: composition4 * yarn add --development history * e2e test: spa1 * Mark test failure as expected Co-authored-by: Andrew Hyndman <ahyndman@dropbox.com>
dropbox · Apr 13, 2022 · 5a0f123 · 5a0f123
1 parent b6b8e15
commit 5a0f123
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@typescript-eslint/parser": "^5.18.0",
     "eslint": "^8.12.0",
     "express": "^4.17.3",
+    "history": "^5.3.0",
     "jest": "^27.5.1",
     "np": "^7.6.1",
     "npm-run-all": "^4.1.5",

diff --git a/test/e2e/composition4/index.html b/test/e2e/composition4/index.html
@@ -0,0 +1,18 @@
+<head>
+  <script src="/dist/index.min.js"></script>
+</head>
+
+<body>
+  <h1 id="h1">Hello world!</h1>
+
+  <script src="/analytics.js"></script>
+  <script>
+    const asyncScript = document.createElement('script');
+    asyncScript.src = '/mutation.js';
+
+    fetch('/api?delay=500')
+      .then(() => new Promise((resolve) => window.setTimeout(resolve, 100)))
+      .then(() => fetch('/api?delay=500'))
+      .then(() => document.head.appendChild(asyncScript));
+  </script>
+</body>
diff --git a/test/e2e/composition4/index.spec.ts b/test/e2e/composition4/index.spec.ts
@@ -0,0 +1,25 @@
+import {test, expect} from '@playwright/test';
+
+import {FUDGE} from '../../util/constants';
+import {entryCountIs, getEntries} from '../../util/entries';
+
+const PAGELOAD_DELAY = 200;
+const AJAX_DELAY = 500;
+const TIMEOUT_DELAY = 100;
+
+test.describe('TTVC', () => {
+  test('ajax request > short timeout > ajax request > mutation', async ({page}) => {
+    test.fail(); // requestAllIdleCallback has a bug that can be triggered by a brief idle period
+    await page.goto(`/test/composition4?delay=${PAGELOAD_DELAY}`, {
+      waitUntil: 'networkidle',
+    });
+
+    await entryCountIs(page, 1);
+    const entries = await getEntries(page);
+    expect(entries.length).toBe(1);
+
+    const expectedTtvc = PAGELOAD_DELAY + AJAX_DELAY + TIMEOUT_DELAY + AJAX_DELAY;
+    expect(entries[0]).toBeGreaterThanOrEqual(expectedTtvc);
+    expect(entries[0]).toBeLessThanOrEqual(expectedTtvc + FUDGE);
+  });
+});
diff --git a/test/e2e/spa1/index.html b/test/e2e/spa1/index.html
@@ -0,0 +1,47 @@
+<head>
+  <script src="/dist/index.min.js"></script>
+</head>
+
+<body>
+  <h1 id="title"></h1>
+  <ul id="nav">
+    <li><a data-goto="/home" href="#">Home</a></li>
+    <li><a data-goto="/about" href="#">About</a></li>
+  </ul>
+
+  <script src="/analytics.js"></script>
+  <script type="module">
+    import {createHashHistory} from '/node_modules/history/history.production.min.js';
+    const history = createHashHistory();
+
+    // render the title based on current location
+    const render = () => {
+      const title = document.getElementById('title');
+      // title.innerText = 'Loading...';
+      title.innerText = {
+        '/home': 'Home',
+        '/about': 'About',
+      }[history.location.pathname];
+    };
+
+    // set initial path to /home
+    history.push('/home');
+    render();
+
+    // set up link click handlers
+    const anchors = document.querySelectorAll('a');
+    anchors.forEach((anchor) => {
+      const url = anchor.dataset.goto;
+      anchor.addEventListener('click', (event) => {
+        event.preventDefault(0);
+        history.push(url);
+      });
+    });
+
+    // handle navigation
+    history.listen(() => {
+      document.documentElement.dispatchEvent(new Event('locationchange', {bubbles: true}));
+      render();
+    });
+  </script>
+</body>
diff --git a/test/e2e/spa1/index.spec.ts b/test/e2e/spa1/index.spec.ts
@@ -0,0 +1,36 @@
+import {test, expect} from '@playwright/test';
+
+import {FUDGE} from '../../util/constants';
+import {entryCountIs, getEntries} from '../../util/entries';
+
+const PAGELOAD_DELAY = 200;
+
+test.describe('TTVC', () => {
+  test.describe('single page app: hash router + sync mutation', () => {
+    test.beforeEach(async ({page}) => {
+      await page.goto(`/test/spa1?delay=${PAGELOAD_DELAY}`, {
+        waitUntil: 'networkidle',
+      });
+    });
+
+    test('initial pageload', async ({page}) => {
+      const entries = await getEntries(page);
+
+      expect(entries.length).toBe(1);
+      expect(entries[0]).toBeGreaterThanOrEqual(PAGELOAD_DELAY);
+      expect(entries[0]).toBeLessThanOrEqual(PAGELOAD_DELAY + FUDGE);
+    });
+
+    test('SPA navigation', async ({page}) => {
+      test.fail(); // we need to correctly set start time on each navigation!
+      // trigger a navigation
+      await page.click('[data-goto="/about"]');
+
+      await entryCountIs(page, 2);
+      const entries = await getEntries(page);
+
+      expect(entries[1]).toBeGreaterThanOrEqual(0);
+      expect(entries[1]).toBeLessThanOrEqual(0 + FUDGE);
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
@@ -459,6 +459,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -2837,6 +2844,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+history@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"