tests(trace-elements): test node eviction with unit rather than smoke (…

…#12056)
GoogleChrome · Mar 23, 2021 · 171f956 · 171f956
1 parent 3735a22
commit 171f956
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 61 deletions.
diff --git a/lighthouse-cli/test/fixtures/perf/delayed-element.js b/lighthouse-cli/test/fixtures/perf/delayed-element.js
@@ -12,17 +12,6 @@ function stall(ms) {
   while (performance.now() - start < ms) ;
 }
 
-/** Render large number of elements to fill up the backend node cache. */
-async function rerender(iterations) {
-  const waitForAnimationFrame = () => new Promise(r => requestAnimationFrame(r))
-
-  for (let i = 0; i < iterations; i++) {
-    const filler = `<div>Filler element</div>`.repeat(4000);
-    document.body.innerHTML = `<div id="div-${i}">${i} left</div>${filler}`;
-    await waitForAnimationFrame()
-  }
-}
-
 // largest-contentful-paint-element: add the largest element later in page load
 // layout-shift-elements: shift down the `<h1>` in the page
 setTimeout(() => {
@@ -38,16 +27,6 @@ setTimeout(() => {
   const sectionEl = document.createElement('section');
   sectionEl.append(imgEl, textEl);
   shadowRoot.append(sectionEl);
-
-  // layout-shift-elements: ensure we can handle shift elements that the protocol can no longer identify
-  // see https://github.com/GoogleChrome/lighthouse/pull/10877
-  if (window.location.href.includes('?evicted')) {
-    stall(100); // force a long task to ensure we reach the rerendering stage
-    setTimeout(async () => {
-      await rerender(30); // rerender a large number of nodes to evict the early layout shift node
-      document.body.textContent = 'Now it is all gone!';
-    }, 50);
-  }
 }, 1000);
 
 // long-tasks: add a very long task at least 500ms

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
@@ -290,44 +290,6 @@ module.exports = [
       },
     },
   },
-  {
-    lhr: {
-      requestedUrl: 'http://localhost:10200/perf/trace-elements.html?evicted',
-      finalUrl: 'http://localhost:10200/perf/trace-elements.html?evicted',
-      audits: {
-        'largest-contentful-paint-element': {
-          score: null,
-          scoreDisplayMode: /(notApplicable|informative)/,
-          details: {
-            // LCP in m88 was changed to allow selection of removed nodes.
-            // When this happens we aren't able to identify the LCP element anymore.
-            // https://chromiumdash.appspot.com/commit/a5484e6310a38223fde757b6f094a673ce032cc0
-            _maxChromiumMilestone: 87,
-            items: [
-              {
-                node: {
-                  type: 'node',
-                  selector: 'body',
-                },
-              },
-            ],
-          },
-        },
-        'layout-shift-elements': {
-          score: null,
-          // If nodes were evicted, then `details.items === []`, and we mark things as notApplicable. #10877
-
-          // Our test page tries to _force_ an eviction (#11426)
-          // But we've seen cases where there is no eviction. This is fine, actually. The user
-          // ends up seeing a useful result. (and item.details is populated!)
-          // This case (just like the normal here-are-your-cls-elements case) is marked `informative`.
-
-          // That leaves us mostly asserting that this audit is error-free.
-          scoreDisplayMode: /(notApplicable|informative)/,
-        },
-      },
-    },
-  },
   {
     lhr: {
       requestedUrl: 'http://localhost:10200/perf/frame-metrics.html',

diff --git a/lighthouse-core/test/audits/largest-contentful-paint-element-test.js b/lighthouse-core/test/audits/largest-contentful-paint-element-test.js
@@ -25,6 +25,7 @@ describe('Performance: largest-contentful-paint-element audit', () => {
 
     const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts);
     expect(auditResult.score).toEqual(1);
+    expect(auditResult.notApplicable).toEqual(false);
     expect(auditResult.displayValue).toBeDisplayString('1 element found');
     expect(auditResult.details.items).toHaveLength(1);
     expect(auditResult.details.items[0].node.path).toEqual('1,HTML,3,BODY,5,DIV,0,HEADER');
@@ -39,6 +40,7 @@ describe('Performance: largest-contentful-paint-element audit', () => {
 
     const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts);
     expect(auditResult.score).toEqual(1);
+    expect(auditResult.notApplicable).toEqual(true);
     expect(auditResult.displayValue).toBeDisplayString('0 elements found');
     expect(auditResult.details.items).toHaveLength(0);
   });

diff --git a/lighthouse-core/test/audits/layout-shift-elements-test.js b/lighthouse-core/test/audits/layout-shift-elements-test.js
@@ -50,6 +50,7 @@ describe('Performance: layout-shift-elements audit', () => {
 
     const auditResult = await LayoutShiftElementsAudit.audit(artifacts);
     expect(auditResult.score).toEqual(1);
+    expect(auditResult.notApplicable).toEqual(false);
     expect(auditResult.displayValue).toBeDisplayString('4 elements found');
     expect(auditResult.details.items).toHaveLength(4);
   });
@@ -61,6 +62,7 @@ describe('Performance: layout-shift-elements audit', () => {
 
     const auditResult = await LayoutShiftElementsAudit.audit(artifacts);
     expect(auditResult.score).toEqual(1);
+    expect(auditResult.notApplicable).toEqual(true);
     expect(auditResult.displayValue).toBeUndefined();
     expect(auditResult.details.items).toHaveLength(0);
   });

diff --git a/lighthouse-core/test/gather/gatherers/trace-elements-test.js b/lighthouse-core/test/gather/gatherers/trace-elements-test.js
@@ -494,6 +494,9 @@ describe('Trace Elements gatherer - Animated Elements', () => {
       .mockResponse('Runtime.callFunctionOn', {result: {value: LCPNodeData}})
       .mockResponse('DOM.resolveNode', {object: {objectId: 2}})
       .mockResponse('Runtime.callFunctionOn', {result: {value: layoutShiftNodeData}})
+      .mockResponse('DOM.resolveNode', () => { // 2nd CLS node
+        throw Error('No node found');
+      })
       .mockResponse('Animation.resolveAnimation', {remoteObject: {objectId: 4}})
       .mockResponse('Runtime.getProperties', {result: [{
         name: 'animationName',
@@ -507,9 +510,14 @@ describe('Trace Elements gatherer - Animated Elements', () => {
     trace.traceEvents.push(
       makeLayoutShiftTraceEvent(1, [
         {
-          new_rect: [0, 100, 200, 200],
           node_id: 4,
           old_rect: [0, 100, 200, 200],
+          new_rect: [0, 300, 200, 200], // shift down 200px
+        },
+        { // 2nd LS node that will be 'no node found'
+          node_id: 7,
+          old_rect: [400, 100, 200, 200],
+          new_rect: [400, 300, 200, 200], // shift down 200px
         },
       ])
     );
@@ -530,7 +538,7 @@ describe('Trace Elements gatherer - Animated Elements', () => {
       },
       {
         ...layoutShiftNodeData,
-        score: 1,
+        score: 0.5, // the other CLS node contributed an additional 0.5, but it was 'no node found'
         nodeId: 4,
       },
       {