Closes #6728 Largest element with a background-image that is not kept (…

…#33) * fixed lcp background image 🐛 :closes: wp-media/wp-rocket#6728 * Add tests * Improve test coverage
wp-media · Oct 15, 2024 · b612364 · b612364
1 parent 9f02ec4
commit b612364
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
diff --git 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.");

diff --git a/test/BeaconLcp.test.js b/test/BeaconLcp.test.js
@@ -1,13 +1,41 @@
 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() {
-    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);
+
+        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() {
@@ -30,4 +58,42 @@ 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);
+        });
+    });
+
+    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);
+        });
+    });
 });