tests(treemap): add test for node coverage shading

lighthouse-treemap/test/treemap-test-pptr.js

@@ -12,7 +12,7 @@
 const fs = require('fs');
 const puppeteer = require('puppeteer');
 const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js');
-const portNumber = 10200;
+const portNumber = 20202;
 const treemapUrl = `http://localhost:${portNumber}/dist/gh-pages/treemap/index.html`;
 const debugOptions = require('../app/debug.json');
 
@@ -141,4 +141,49 @@ describe('Lighthouse Treemap', () => {
       expect(optionsInPage.lhr.requestedUrl).toBe(options.lhr.requestedUrl);
     });
   });
+
+  describe('renders correctly', () => {
+    it('correctly shades coverage of gtm node', async () => {
+      await page.goto(`${treemapUrl}?debug`, {
+        waitUntil: 'networkidle0',
+        timeout: 30000,
+      });
+
+      await page.click('#view-mode--unused-bytes');
+      await page.waitForSelector('.lh-treemap--view-mode--unused-bytes');
+
+      // Identify the JS data.
+      const gtmNode = await page.evaluate(() => {
+        const d1Nodes = window.__treemapOptions.lhr.audits['script-treemap-data'].details.nodes;
+        const gtmNode = d1Nodes.find(n => n.name.includes('gtm.js'));
+        return gtmNode;
+      });
+
+      expect(gtmNode.unusedBytes).toBeGreaterThan(20_000);
+      expect(gtmNode.resourceBytes).toBeGreaterThan(20_000);
+
+      // Identify the DOM node.
+      const gtmElemHandle = await page.evaluateHandle(() => {
+        const captionEls = Array.from(document.querySelectorAll('.webtreemap-caption'));
+        return captionEls.find(el => el.textContent.includes('gtm.js')).parentElement;
+      });
+
+      expect(await gtmElemHandle.isIntersectingViewport()).toBeTruthy();
+
+      // Determine visual red shading percentage.
+      const percentRed = await gtmElemHandle.evaluate(node => {
+        const redWidthPx = parseInt(window.getComputedStyle(node, ':before').width);
+        const completeWidthPx = node.getBoundingClientRect().width;
+        return redWidthPx / completeWidthPx;
+      });
+
+      // Reminder! UNUSED == RED
+      const percentDataUnused = gtmNode.unusedBytes / gtmNode.resourceBytes;
+      expect(percentDataUnused).toBeGreaterThan(0);
+
+      // Assert 0.2520 ~= 0.2602 w/ 1 decimal place of precision.
+      // CSS pixels won't let us go to 2 decimal places.
+      expect(percentRed).toBeApproximately(percentDataUnused, 1);
+    });
+  });
 });