From adc4834b426c5bdea311845f7249598b3d3aac41 Mon Sep 17 00:00:00 2001
From: Opeyemi Ibrahim <opeyemi.khadri@gmail.com>
Date: Tue, 8 Oct 2024 12:11:45 +0100
Subject: [PATCH 1/3] fixed lcp background image :bug: :closes:
 wp-media/wp-rocket#6728

---
 src/BeaconLcp.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/BeaconLcp.js b/src/BeaconLcp.js
index a087b96..5dc5ab1 100644
--- a/src/BeaconLcp.js
+++ b/src/BeaconLcp.js
@@ -153,6 +153,10 @@ class BeaconLcp {
                 element_info.bg_set = matches.map(m => m[1] ? { src: m[1].trim() } : {});
             }
 
+            if (element_info.bg_set.length <= 0) {
+                return null;
+            }
+
             if (element_info.bg_set.length > 0) {
                 element_info.src = element_info.bg_set[0].src;
                 if (element_info.type === "bg-img-set") {
@@ -165,7 +169,9 @@ class BeaconLcp {
     }
 
     _initWithFirstElementWithInfo(elements) {
-        const firstElementWithInfo = elements.find(item => item.elementInfo !== null);
+        const firstElementWithInfo = elements.find(item => {
+            return item.elementInfo !== null && (item.elementInfo.src || item.elementInfo.srcset);
+        });
 
         if (!firstElementWithInfo) {
             this.logger.logMessage("No LCP candidate found.");

From 4b5bd67e961b58ac5e8baf22e3e422aea59671c9 Mon Sep 17 00:00:00 2001
From: Opeyemi Ibrahim <opeyemi.khadri@gmail.com>
Date: Fri, 11 Oct 2024 12:11:47 +0100
Subject: [PATCH 2/3] Add tests

---
 test/BeaconLcp.test.js | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/test/BeaconLcp.test.js b/test/BeaconLcp.test.js
index 297b152..0417075 100644
--- a/test/BeaconLcp.test.js
+++ b/test/BeaconLcp.test.js
@@ -4,10 +4,14 @@ import node_fetch from 'node-fetch';
 global.fetch = node_fetch;
 
 describe('BeaconManager', function() {
-    let beacon;
+    let beacon,
+        mockLogger;
+
     const config = { nonce: 'test', url: 'http://example.com', is_mobile: false };
     beforeEach(function() {
-        beacon = new BeaconLcp(config);
+        mockLogger = { logMessage: function(message) {} };
+
+        beacon = new BeaconLcp(config, mockLogger);
     });
 
     describe('#constructor()', function() {
@@ -30,4 +34,30 @@ describe('BeaconManager', function() {
         });
     });
 
+    describe('#_initWithFirstElementWithInfo()', function() {
+        it('should initialize performanceImages with the first valid element info', function() {
+            const elements = [
+                { element: { nodeName: 'div' }, elementInfo: null }, // invalid, no elementInfo
+                { element: { nodeName: 'img', src: 'http://example.com/image1.jpg' }, elementInfo: { type: 'img', src: 'http://example.com/image1.jpg' } },
+                { element: { nodeName: 'img', src: 'http://example.com/image2.jpg' }, elementInfo: { type: 'img', src: 'http://example.com/image2.jpg' } },
+            ];
+
+            beacon._initWithFirstElementWithInfo(elements);
+
+            assert.strictEqual(beacon.performanceImages.length, 1);
+            assert.strictEqual(beacon.performanceImages[0].src, 'http://example.com/image1.jpg');
+            assert.strictEqual(beacon.performanceImages[0].label, 'lcp');
+        });
+
+        it('should not initialize performanceImages if no valid element info is found', function() {
+            const elements = [
+                { element: { nodeName: 'div' }, elementInfo: null },
+                { element: { nodeName: 'div' }, elementInfo: null },
+            ];
+
+            beacon._initWithFirstElementWithInfo(elements);
+
+            assert.strictEqual(beacon.performanceImages.length, 0);
+        });
+    });
 });

From 7a343c52163871b679acd0e5495f62c0f12bb79a Mon Sep 17 00:00:00 2001
From: Opeyemi Ibrahim <opeyemi.khadri@gmail.com>
Date: Fri, 11 Oct 2024 12:45:01 +0100
Subject: [PATCH 3/3] Improve test coverage

---
 test/BeaconLcp.test.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/test/BeaconLcp.test.js b/test/BeaconLcp.test.js
index 0417075..af13966 100644
--- a/test/BeaconLcp.test.js
+++ b/test/BeaconLcp.test.js
@@ -1,6 +1,7 @@
 import assert from 'assert';
 import BeaconLcp from '../src/BeaconLcp.js';
 import node_fetch from 'node-fetch';
+import sinon from 'sinon';
 global.fetch = node_fetch;
 
 describe('BeaconManager', function() {
@@ -12,6 +13,29 @@ describe('BeaconManager', function() {
         mockLogger = { logMessage: function(message) {} };
 
         beacon = new BeaconLcp(config, mockLogger);
+
+        global.window = {};
+        global.document = {};
+
+        global.window.getComputedStyle = sinon.stub().returns({
+            getPropertyValue: sinon.stub().returns('none'),
+        });
+
+        global.getComputedStyle = (element, pseudoElement) => {
+            return {
+                getPropertyValue: (prop) => {
+                    if (prop === "background-image") {
+                        return "none";
+                    }
+                    return "";
+                }
+            };
+        };
+    });
+
+    afterEach(function () {
+        sinon.restore();
+        delete global.window;
     });
 
     describe('#constructor()', function() {
@@ -60,4 +84,16 @@ describe('BeaconManager', function() {
             assert.strictEqual(beacon.performanceImages.length, 0);
         });
     });
+
+    describe('#_getElementInfo()', function() {
+        it('should return null when there are no valid background images', function() {
+            const element = {
+                nodeName: 'div'
+            };
+
+            const elementInfo = beacon._getElementInfo(element);
+
+            assert.strictEqual(elementInfo, null);
+        });
+    });
 });