Add integration testing script

Author: devongovett

package.json

@@ -40,8 +40,11 @@
     "caniuse-lite": "^1.0.30001272",
     "cssnano": "^5.0.8",
     "esbuild": "^0.13.10",
+    "jest-diff": "^27.4.2",
+    "node-fetch": "^3.1.0",
     "parcel": "^2.0.1",
-    "postcss": "^8.3.11"
+    "postcss": "^8.3.11",
+    "puppeteer": "^12.0.1"
   },
   "scripts": {
     "build": "node build.js",

test-integration.mjs

@@ -0,0 +1,171 @@
+import puppeteer from 'puppeteer';
+import fetch from 'node-fetch';
+import assert from 'assert';
+import {diff} from 'jest-diff';
+import css from './native.js';
+
+let urls = [
+  'https://getbootstrap.com/docs/5.1/examples/headers/',
+  'https://getbootstrap.com/docs/5.1/examples/heroes/',
+  'https://getbootstrap.com/docs/5.1/examples/features/',
+  'https://getbootstrap.com/docs/5.1/examples/sidebars/',
+  'https://getbootstrap.com/docs/5.1/examples/footers/',
+  'https://getbootstrap.com/docs/5.1/examples/dropdowns/',
+  'https://getbootstrap.com/docs/5.1/examples/list-groups/',
+  'https://getbootstrap.com/docs/5.1/examples/modals/',
+  'http://csszengarden.com',
+  'http://csszengarden.com/221/',
+  'http://csszengarden.com/219/',
+  'http://csszengarden.com/218/',
+  'http://csszengarden.com/217/',
+  'http://csszengarden.com/216/',
+  'http://csszengarden.com/215/'
+];
+
+let success = true;
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+
+for (let url of urls) {
+  await test(url);
+}
+
+async function test(url) {
+  console.log(`Testing ${url}...`);
+
+  await page.goto(url);
+  await page.waitForNetworkIdle();
+
+  // Snapshot the computed styles of all elements
+  let elements = await page.$$('body *');
+  let computed = [];
+  for (let element of elements) {
+    let style = await element.evaluate(node => {
+      let res = {};
+      let style = window.getComputedStyle(node);
+      for (let i = 0; i < style.length; i++) {
+        res[style.item(i)] = style.getPropertyValue(style.item(i));
+      }
+      return res;
+    });
+
+    for (let key in style) {
+      style[key] = normalize(key, style[key]);
+    }
+
+    computed.push(style);
+  }
+
+  // Find stylesheets, load, and minify.
+  let stylesheets = await page.evaluate(() => {
+    return [...document.styleSheets].map(styleSheet => styleSheet.href).filter(Boolean);
+  });
+
+  let texts = await Promise.all(stylesheets.map(async url => {
+    let res = await fetch(url);
+    return res.text();
+  }));
+
+  let minified = texts.map((code, i) => {
+    let minified = css.transform({
+      filename: 'test.css',
+      code: Buffer.from(code),
+      minify: true,
+      targets: {
+        chrome: 95 << 16
+      }
+    }).code.toString();
+    console.log(new URL(stylesheets[i]).pathname, '–', code.length + ' bytes', '=>', minified.length + ' bytes');
+    return minified;
+  });
+
+  await page.setCacheEnabled(false);
+
+  // Disable the original stylesheets and insert a <style> element containing the minified CSS for each.
+  await page.evaluate(minified => {
+    let i = 0;
+    for (let stylesheet of [...document.styleSheets]) {
+      if (stylesheet.href) {
+        stylesheet.disabled = true;
+
+        let style = document.createElement('style');
+        style.textContent = minified[i++].replace(/url\((.*?)\)/g, (orig, url) => {
+          if (/['"]?data:/.test(url)) {
+            return orig;
+          }
+
+          // Rewrite urls so they are relative to the original stylesheet.
+          return `url(${new URL(url, stylesheet.href)})`;
+        });
+
+        stylesheet.ownerNode.insertAdjacentElement('beforebegin', style);
+      }
+    }
+  }, minified);
+
+  await page.waitForNetworkIdle();
+
+  // Now get the computed style for each element again and compare.
+  let i = 0;
+  for (let element of elements) {
+    let style = await element.evaluate(node => {
+      let res = {};
+      let style = window.getComputedStyle(node);
+      for (let i = 0; i < style.length; i++) {
+        let name = style.item(i);
+        res[name] = style.getPropertyValue(name);
+      }
+      return res;
+    });
+
+    for (let key in style) {
+      style[key] = normalize(key, style[key]);
+
+      // Ignore prefixed properties that were removed during minification.
+      if (key.startsWith('-webkit-box-') && style[key] !== computed[i][key]) {
+        style[key] = computed[i][key];
+      }
+    }
+
+    try {
+      assert.deepEqual(style, computed[i]);
+    } catch (err) {
+      success = false;
+      console.log(diff(computed[i], style));
+      console.log(await element.evaluate(node => node.outerHTML))
+      console.log(minified[0]);
+    }
+
+    i++;
+  }
+
+  console.log('');
+}
+
+function normalize(key, value) {
+  if (key === 'background-position') {
+    value = value.replace(/(^|\s)0(%|px)/g, '$10');
+  }
+
+  if (key === 'background-image') {
+    // Center is implied.
+    value = value.replace('radial-gradient(at center center, ', 'radial-gradient(');
+  }
+
+  return value.split(' ').map(v => {
+    if (/^[\d\.]+px$/.test(v)) {
+      let val = parseFloat(v);
+      return Math.round(val) + 'px';
+    }
+
+    return v;
+  }).join(' ');
+}
+
+if (success) {
+  console.log('Pass!');
+  process.exit(0);
+} else {
+  console.log('Fail!');
+  process.exit(1);
+}