From b8f70599ff41deee341dfb03619f5708346bd164 Mon Sep 17 00:00:00 2001
From: Barry Pollard <barrypollard@google.com>
Date: Thu, 25 Apr 2024 17:28:52 +0100
Subject: [PATCH] Allow reportAllChanges for LCP for late loaded script

---
 src/onLCP.ts           |  6 ++++++
 test/e2e/onLCP-test.js | 36 +++++++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/onLCP.ts b/src/onLCP.ts
index 622c3638..984793df 100644
--- a/src/onLCP.ts
+++ b/src/onLCP.ts
@@ -58,6 +58,12 @@ export const onLCP = (onReport: LCPReportCallback, opts?: ReportOpts) => {
     let report: ReturnType<typeof bindReporter>;
 
     const handleEntries = (entries: LCPMetric['entries']) => {
+      // If reportAllChanges is set then call this function for each entry
+      // As otherwise only want to emit the last one.
+      if (opts!.reportAllChanges && entries.length > 1) {
+        entries.forEach((entry) => handleEntries([entry]));
+      }
+
       const lastEntry = entries[entries.length - 1] as LargestContentfulPaint;
       if (lastEntry) {
         // Only report if the page wasn't hidden prior to LCP.
diff --git a/test/e2e/onLCP-test.js b/test/e2e/onLCP-test.js
index 98efb22a..90046572 100644
--- a/test/e2e/onLCP-test.js
+++ b/test/e2e/onLCP-test.js
@@ -121,14 +121,24 @@ describe('onLCP()', async function () {
     // Wait until all images are loaded and fully rendered.
     await imagesPainted();
 
-    // Load a new page to trigger the hidden state.
-    await navigateTo('about:blank');
+    await beaconCountIs(2);
+    const [lcp1, lcp2] = await getBeacons();
 
-    // Even though the test sets `reportAllChanges` to true, since the library
-    // is lazy loaded after all elements have been rendered, only a single
-    // change will be reported.
-    await beaconCountIs(1);
-    assertStandardReportsAreCorrect(await getBeacons());
+    assert(lcp1.value > 0);
+    assert(lcp1.id.match(/^v4-\d+-\d+$/));
+    assert.strictEqual(lcp1.name, 'LCP');
+    assert.strictEqual(lcp1.value, lcp1.delta);
+    assert.strictEqual(lcp1.rating, 'good');
+    assert.strictEqual(lcp1.entries.length, 1);
+    assert.strictEqual(lcp1.navigationType, 'navigate');
+
+    assert(lcp2.value > 500); // Greater than the image load delay.
+    assert(lcp2.id.match(/^v4-\d+-\d+$/));
+    assert.strictEqual(lcp2.name, 'LCP');
+    assert(lcp2.value > lcp2.delta);
+    assert.strictEqual(lcp2.rating, 'good');
+    assert.strictEqual(lcp2.entries.length, 1);
+    assert.strictEqual(lcp2.navigationType, 'navigate');
   });
 
   it('accounts for time prerendering the page', async function () {
@@ -332,7 +342,7 @@ describe('onLCP()', async function () {
 
     const [lcp1] = await getBeacons();
 
-    assert(lcp1.value > 0); // Greater than the image load delay.
+    assert(lcp1.value > 0);
     assert(lcp1.id.match(/^v4-\d+-\d+$/));
     assert.strictEqual(lcp1.name, 'LCP');
     assert.strictEqual(lcp1.value, lcp1.delta);
@@ -346,7 +356,7 @@ describe('onLCP()', async function () {
 
     const [lcp2] = await getBeacons();
 
-    assert(lcp2.value > 0); // Greater than the image load delay.
+    assert(lcp2.value > 0);
     assert(lcp2.id.match(/^v4-\d+-\d+$/));
     assert.strictEqual(lcp2.name, 'LCP');
     assert.strictEqual(lcp2.value, lcp2.delta);
@@ -377,7 +387,7 @@ describe('onLCP()', async function () {
 
     const [lcp1] = await getBeacons();
 
-    assert(lcp1.value > 0); // Greater than the image load delay.
+    assert(lcp1.value > 0);
     assert(lcp1.id.match(/^v4-\d+-\d+$/));
     assert.strictEqual(lcp1.name, 'LCP');
     assert.strictEqual(lcp1.value, lcp1.delta);
@@ -391,7 +401,7 @@ describe('onLCP()', async function () {
 
     const [lcp2] = await getBeacons();
 
-    assert(lcp2.value > 0); // Greater than the image load delay.
+    assert(lcp2.value > 0);
     assert(lcp2.id.match(/^v4-\d+-\d+$/));
     assert.strictEqual(lcp2.name, 'LCP');
     assert.strictEqual(lcp2.value, lcp2.delta);
@@ -415,7 +425,7 @@ describe('onLCP()', async function () {
 
     const [lcp] = await getBeacons();
 
-    assert(lcp.value > 0); // Greater than the image load delay.
+    assert(lcp.value > 0);
     assert(lcp.id.match(/^v4-\d+-\d+$/));
     assert.strictEqual(lcp.name, 'LCP');
     assert.strictEqual(lcp.value, lcp.delta);
@@ -654,7 +664,7 @@ describe('onLCP()', async function () {
 
       const [lcp2] = await getBeacons();
 
-      assert(lcp2.value > 0); // Greater than the image load delay.
+      assert(lcp2.value > 0);
       assert(lcp2.id.match(/^v4-\d+-\d+$/));
       assert.strictEqual(lcp2.name, 'LCP');
       assert.strictEqual(lcp2.value, lcp2.delta);