Testing...

.github/workflows/tests.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Run server
         run: npm run test:server &
       - name: Run e2e tests for chrome
-        run: npm run test:e2e -- --browsers=chrome
+        run: npm run test:e2e -- --browsers=chrome --metrics=FCP
   firefox-tests:
     name: Run Firefox e2e tests
     # Runs best on macos for CI as linux requires extra setup
@@ -48,7 +48,7 @@ jobs:
       - name: Run server
         run: npm run test:server &
       - name: Run e2e tests for firefox
-        run: npm run test:e2e -- --browsers=firefox
+        run: npm run test:e2e -- --browsers=firefox --metrics=FCP
   safari-tests:
     name: Run Safari e2e tests
     # Requires macos
@@ -63,4 +63,4 @@ jobs:
       - name: Run server
         run: npm run test:server &
       - name: Run e2e tests for safari
-        run: npm run test:e2e -- --browsers=safari
+        run: npm run test:e2e -- --browsers=safari --metrics=FCP

test/e2e/onFCP-test.js

@@ -41,7 +41,7 @@ assert.strictEqual = function (actual, expected, message) {
 
 describe('onFCP()', async function () {
   // Retry all tests in this suite up to 2 times.
-  this.retries(2);
+  // this.retries(2);
 
   let browserSupportsFCP;
   before(async function () {
@@ -131,10 +131,26 @@ describe('onFCP()', async function () {
     assert.strictEqual(bfcacheRestoreBeacons.length, 0);
   });
 
-  it('does not report if the document was hidden at page load time', async function () {
+  it.only('does not report if the document was hidden at page load time', async function () {
     if (!browserSupportsFCP) this.skip();
 
-    await navigateTo('/test/fcp?hidden=1', {readyState: 'interactive'});
+    console.log(await navigateTo('/test/fcp?hidden=1', {readyState: 'complete'}));
+
+    // await browser.pause(1000);
+
+    const foo = await browser.execute(() => self.foo);
+    console.log({foo});
+
+    const foo2 = await browser.execute(() => self.foo2);
+    console.log({foo2});
+
+    const wv = await browser.execute(() => self.wv);
+
+    console.log({wv});
+    assert.equal(wv, true);
+
+    const vs = await browser.execute(() => self.document.visibilityState);
+    console.log({vs});
 
     await stubVisibilityChange('visible');
 

test/utils/domReadyState.js

@@ -22,7 +22,12 @@
  */
 export function domReadyState(state) {
   return browser.executeAsync(async (state, done) => {
+    const logs = [];
+    self.foo = document.readyState;
+    logs.push(['foo', document.readyState]);
+
     await new Promise((resolve) => {
+      logs.push(['foo:promise', document.readyState]);
       if (document.readyState === 'complete' || document.readyState === state) {
         resolve();
       } else {
@@ -36,10 +41,15 @@ export function domReadyState(state) {
         });
       }
     });
-    if (state !== 'loading' && self.__readyPromises) {
+    // logs.push(self.__toSafeObject(self.__readyPromises));
+    if (state !== 'loading') {
+      self.foo2 = document.readyState;
+      logs.push(['foo2', document.readyState]);
       await Promise.all(self.__readyPromises);
     }
+    self.foo3 = document.readyState;
+    logs.push(['foo3', document.readyState]);
     // Queue a task so this resolves after any event callback run.
-    setTimeout(done, 0);
+    setTimeout(() => done(logs), 0);
   }, state);
 }

test/utils/navigateTo.js

@@ -35,7 +35,8 @@ export async function navigateTo(urlPath, opts) {
     });
   }
 
+  console.log('navigateTo', opts);
   if (opts?.readyState) {
-    await domReadyState(opts.readyState);
+    return await domReadyState(opts.readyState);
   }
 }

test/views/blank.njk

@@ -0,0 +1,22 @@
+<script type="module">
+  document.addEventListener('DOMContentLoaded', () => {
+    console.log('DCL');
+  });
+
+  document.addEventListener('readystatechange', () => {
+    console.log('readystatechange', document.readyState);
+  });
+</script>
+
+
+<script type="module">
+
+// import '/dist/foo.js';
+// import '/dist/bar.js';
+
+await import('/dist/foo.js');
+await import('/dist/bar.js');
+
+console.log('done');
+
+</script>

test/views/fcp.njk

@@ -27,8 +27,51 @@
 
   <p><a id="navigate-away" href="https://example.com">Navigate away</a></p>
 
+  <script>
+    (async function() {
+      document.addEventListener('DOMContentLoaded', () => {
+        console.log('DCL');
+      });
+
+
+      const state = 'interactive';
+      const logs = [];
+      self.foo = document.readyState;
+      logs.push(['foo', document.readyState]);
+
+      await new Promise((resolve) => {
+        logs.push(['foo:promise', document.readyState]);
+        if (document.readyState === 'complete' || document.readyState === state) {
+          resolve();
+        } else {
+          document.addEventListener('readystatechange', () => {
+            console.log('readystatechange', document.readyState);
+            if (
+              document.readyState === state ||
+              document.readyState === 'complete'
+            ) {
+              resolve();
+            }
+          });
+        }
+      });
+      // logs.push(self.__toSafeObject(self.__readyPromises));
+      // if (state !== 'loading') {
+        self.foo2 = document.readyState;
+        logs.push(['foo2', document.readyState]);
+        await Promise.all(self.__readyPromises);
+      // }
+      self.foo3 = document.readyState;
+      logs.push(['foo3', document.readyState]);
+      // Queue a task so this resolves after any event callback run.
+      setTimeout(() => console.log(logs), 0);
+    })();
+  </script>
+
   <script type="module">
+    console.log('before __testImport');
     const {onFCP} = await __testImport('{{ modulePath }}');
+    console.log('after __testImport');
 
     onFCP((fcp) => {
       // Log for easier manual testing.
@@ -37,5 +80,8 @@
       // Test sending the metric to an analytics endpoint.
       navigator.sendBeacon(`/collect`, JSON.stringify(__toSafeObject(fcp)));
     }, {reportAllChanges: self.__reportAllChanges});
+
+    console.log('wc', self.wv = true);
+
   </script>
 {% endblock %}

test/views/layout.njk

@@ -227,6 +227,7 @@
 
         const importPromise = import(modulePath);
         self.__readyPromises.push(importPromise);
+        console.log('self.__readyPromises.push(importPromise)', self.__readyPromises.length);
 
         return await importPromise;
       };