lighthouse 8.0.0-dev.20210709 → 8.0.0

package/report/test/renderer/dom-test.js

@@ -1,157 +0,0 @@
-/**
- * @license Copyright 2017 The Lighthouse Authors. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
-'use strict';
-
-const assert = require('assert').strict;
-const jsdom = require('jsdom');
-const reportAssets = require('../../report-assets.js');
-const DOM = require('../../renderer/dom.js');
-const Util = require('../../renderer/util.js');
-const I18n = require('../../renderer/i18n.js');
-
-/* eslint-env jest */
-
-describe('DOM', () => {
-  let dom;
-
-  beforeAll(() => {
-    global.Util = Util;
-    global.Util.i18n = new I18n('en', {...Util.UIStrings});
-    const {document} = new jsdom.JSDOM(reportAssets.REPORT_TEMPLATES).window;
-    dom = new DOM(document);
-    dom.setLighthouseChannel('someChannel');
-  });
-
-  afterAll(() => {
-    global.Util.i18n = undefined;
-    global.Util = undefined;
-  });
-
-  describe('createElement', () => {
-    it('creates a simple element using default values', () => {
-      const el = dom.createElement('div');
-      assert.equal(el.localName, 'div');
-      assert.equal(el.className, '');
-      assert.equal(el.hasAttributes(), false);
-    });
-
-    it('creates an element from parameters', () => {
-      const el = dom.createElement(
-          'div', 'class1 class2', {title: 'title attr', tabindex: 0});
-      assert.equal(el.localName, 'div');
-      assert.equal(el.className, 'class1 class2');
-      assert.equal(el.getAttribute('title'), 'title attr');
-      assert.equal(el.getAttribute('tabindex'), '0');
-    });
-  });
-
-  describe('cloneTemplate', () => {
-    it('should clone a template', () => {
-      const clone = dom.cloneTemplate('#tmpl-lh-audit', dom.document());
-      assert.ok(clone.querySelector('.lh-audit'));
-    });
-
-    it('should clone a template from a context scope', () => {
-      const heading = dom.cloneTemplate('#tmpl-lh-footer', dom.document());
-      const items = dom.cloneTemplate('#tmpl-lh-env__items', heading);
-      assert.ok(items.querySelector('.lh-env__item'));
-    });
-
-    it('fails when template cannot be found', () => {
-      assert.throws(() => dom.cloneTemplate('#unknown-selector', dom.document()));
-    });
-
-    it('fails when a template context isn\'t provided', () => {
-      assert.throws(() => dom.cloneTemplate('#tmpl-lh-audit'));
-    });
-
-    it('does not inject duplicate styles', () => {
-      const clone = dom.cloneTemplate('#tmpl-lh-snippet', dom.document());
-      const clone2 = dom.cloneTemplate('#tmpl-lh-snippet', dom.document());
-      assert.ok(clone.querySelector('style'));
-      assert.ok(!clone2.querySelector('style'));
-    });
-  });
-
-  describe('convertMarkdownLinkSnippets', () => {
-    it('correctly converts links', () => {
-      let result = dom.convertMarkdownLinkSnippets(
-          'Some [link](https://example.com/foo). [Learn more](http://example.com).');
-      assert.equal(result.innerHTML,
-          'Some <a rel="noopener" target="_blank" href="https://example.com/foo">link</a>. ' +
-          '<a rel="noopener" target="_blank" href="http://example.com/">Learn more</a>.');
-
-      result = dom.convertMarkdownLinkSnippets('[link](https://example.com/foo)');
-      assert.equal(result.innerHTML,
-          '<a rel="noopener" target="_blank" href="https://example.com/foo">link</a>',
-          'just a link');
-
-      result = dom.convertMarkdownLinkSnippets(
-          '[ Link ](https://example.com/foo) and some text afterwards.');
-      assert.equal(result.innerHTML,
-          '<a rel="noopener" target="_blank" href="https://example.com/foo"> Link </a> ' +
-          'and some text afterwards.', 'link with spaces in brackets');
-    });
-
-    it('handles invalid urls', () => {
-      const text = 'Text has [bad](https:///) link.';
-      assert.throws(() => {
-        dom.convertMarkdownLinkSnippets(text);
-      });
-    });
-
-    it('ignores links that do not start with http', () => {
-      const snippets = [
-        'Sentence with [link](/local/path).',
-        'Sentence with [link](javascript:console.log("pwned")).',
-        'Sentence with [link](chrome://settings#give-my-your-password).',
-      ];
-
-      for (const text of snippets) {
-        const result = dom.convertMarkdownLinkSnippets(text);
-        assert.equal(result.innerHTML, text);
-      }
-    });
-
-    it('handles the case of [text]... [text](url)', () => {
-      const text = 'Ensuring `<td>` cells using the `[headers]` are good. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/3.1/td-headers-attr).';
-      const result = dom.convertMarkdownLinkSnippets(text);
-      assert.equal(result.innerHTML, 'Ensuring `&lt;td&gt;` cells using the `[headers]` are ' +
-          'good. <a rel="noopener" target="_blank" href="https://dequeuniversity.com/rules/axe/3.1/td-headers-attr">Learn more</a>.');
-    });
-
-    it('appends utm params to the URLs with https://developers.google.com origin', () => {
-      const text = '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/description).';
-
-      const result = dom.convertMarkdownLinkSnippets(text);
-      assert.equal(result.innerHTML, '<a rel="noopener" target="_blank" href="https://developers.google.com/web/tools/lighthouse/audits/description?utm_source=lighthouse&amp;utm_medium=someChannel">Learn more</a>.');
-    });
-
-    it('appends utm params to the URLs with https://web.dev origin', () => {
-      const text = '[Learn more](https://web.dev/tap-targets/).';
-
-      const result = dom.convertMarkdownLinkSnippets(text);
-      assert.equal(result.innerHTML, '<a rel="noopener" target="_blank" href="https://web.dev/tap-targets/?utm_source=lighthouse&amp;utm_medium=someChannel">Learn more</a>.');
-    });
-
-    it('doesn\'t append utm params to other (non-docs) origins', () => {
-      const text = '[Learn more](https://example.com/info).';
-
-      const result = dom.convertMarkdownLinkSnippets(text);
-      assert.equal(result.innerHTML, '<a rel="noopener" target="_blank" href="https://example.com/info">Learn more</a>.');
-    });
-  });
-
-  describe('convertMarkdownCodeSnippets', () => {
-    it('correctly converts links', () => {
-      const result = dom.convertMarkdownCodeSnippets(
-          'Here is some `code`, and then some `more code`, and yet event `more`.');
-      assert.equal(result.innerHTML, 'Here is some <code>code</code>, and then some ' +
-          '<code>more code</code>, and yet event <code>more</code>.');
-    });
-  });
-});

package/report/test/renderer/element-screenshot-renderer-test.js

@@ -1,189 +0,0 @@
-/**
- * @license Copyright 2020 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
-'use strict';
-
-/* eslint-env jest */
-
-const jsdom = require('jsdom');
-const ElementScreenshotRenderer = require('../../renderer/element-screenshot-renderer.js');
-const RectHelpers = require('../../../lighthouse-core/lib/rect-helpers.js');
-const Util = require('../../renderer/util.js');
-const I18n = require('../../renderer/i18n.js');
-const DOM = require('../../renderer/dom.js');
-const reportAssets = require('../../report-assets.js');
-
-/**
- * @param {{left: number, top: number, width: number, height:number}} opts
- * @return {LH.Artifacts.Rect}
- */
-function makeRect(opts) {
-  return {
-    ...opts,
-    right: opts.left + opts.width,
-    bottom: opts.top + opts.height,
-  };
-}
-
-describe('ElementScreenshotRenderer', () => {
-  let dom;
-
-  beforeAll(() => {
-    global.RectHelpers = RectHelpers;
-    global.Util = Util;
-    global.Util.i18n = new I18n('en', {...Util.UIStrings});
-    const {document} = new jsdom.JSDOM(reportAssets.REPORT_TEMPLATES).window;
-    dom = new DOM(document);
-  });
-
-  afterAll(() => {
-    global.RectHelpers = undefined;
-    global.Util.i18n = undefined;
-    global.Util = undefined;
-  });
-
-  it('renders screenshot', () => {
-    const fullPageScreenshot = {
-      width: 1000,
-      height: 1000,
-    };
-    const elementRectSC = makeRect({
-      left: 50,
-      top: 50,
-      width: 200,
-      height: 300,
-    });
-    const renderContainerSizeDC = {
-      width: 500,
-      height: 500,
-    };
-    const el = ElementScreenshotRenderer.render(
-      dom,
-      dom.document(),
-      fullPageScreenshot,
-      elementRectSC,
-      renderContainerSizeDC
-    );
-
-    /* eslint-disable max-len */
-    expect(el.innerHTML).toMatchInlineSnapshot(`
-      "
-          <div class=\\"lh-element-screenshot__content\\" style=\\"top: -500px;\\">
-            <div class=\\"lh-element-screenshot__mask\\" style=\\"width: 500px; height: 500px; clip-path: url(#clip-0);\\">
-              <svg xmlns=\\"http://www.w3.org/2000/svg\\" height=\\"0\\" width=\\"0\\">
-                <defs>
-                  <clipPath clipPathUnits=\\"objectBoundingBox\\" id=\\"clip-0\\"><polygon points=\\"0,0             1,0            1,0.1          0,0.1\\"></polygon><polygon points=\\"0,0.7     1,0.7    1,1               0,1\\"></polygon><polygon points=\\"0,0.1        0.1,0.1 0.1,0.7 0,0.7\\"></polygon><polygon points=\\"0.5,0.1 1,0.1       1,0.7       0.5,0.7\\"></polygon></clipPath>
-                  <!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
-                </defs>
-              </svg>
-            </div>
-            <div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"></div>
-            <div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div>
-          </div>
-        "
-    `);
-    /* eslint-enable max-len */
-  });
-
-  it('returns null if element is out of bounds', () => {
-    const fullPageScreenshot = {
-      width: 1000,
-      height: 1000,
-    };
-    const elementRectSC = makeRect({
-      left: 50,
-      top: 5000,
-      width: 200,
-      height: 300,
-    });
-    const renderContainerSizeDC = {
-      width: 500,
-      height: 500,
-    };
-    expect(ElementScreenshotRenderer.render(
-      dom,
-      dom.document(),
-      fullPageScreenshot,
-      elementRectSC,
-      renderContainerSizeDC
-    )).toBe(null);
-  });
-
-  describe('getScreenshotPositions', () => {
-    it('centers the screenshot on the highlighted area', () => {
-      expect(
-        ElementScreenshotRenderer.getScreenshotPositions(
-          {left: 400, top: 500, width: 100, height: 40},
-          {width: 412, height: 300},
-          {width: 1300, height: 5000}
-        )
-      ).toMatchObject({
-        screenshot: {
-          left: 244,
-          top: 370,
-        },
-        clip: {
-          left: 156,
-          top: 130,
-        },
-      });
-    });
-
-    it('contains the screenshot within the display area if the clip is in the top left', () => {
-      expect(
-        ElementScreenshotRenderer.getScreenshotPositions(
-          {left: 0, top: 0, width: 100, height: 40},
-          {width: 412, height: 300},
-          {width: 412, height: 5000}
-        )
-      ).toMatchObject({
-        screenshot: {
-          left: 0,
-          top: 0,
-        },
-        clip: {
-          left: 0,
-          top: 0,
-        },
-      });
-    });
-
-    it('contains the screenshot within the display area if the clip is in the bottom right', () => {
-      expect(
-        ElementScreenshotRenderer.getScreenshotPositions(
-          {left: 300, top: 4950, width: 100, height: 40},
-          {width: 412, height: 300},
-          {width: 412, height: 5000}
-        )
-      ).toMatchObject({
-        screenshot: {
-          left: 0,
-          top: 4700,
-        },
-        clip: {
-          left: 300,
-          top: 250,
-        },
-      });
-
-      expect(
-        ElementScreenshotRenderer.getScreenshotPositions(
-          {left: 300, top: 4950, width: 100, height: 40},
-          {width: 200, height: 300},
-          {width: 412, height: 5000}
-        )
-      ).toMatchObject({
-        screenshot: {
-          left: 212,
-          top: 4700,
-        },
-        clip: {
-          left: 88,
-          top: 250,
-        },
-      });
-    });
-  });
-});

package/report/test/renderer/i18n-test.js

@@ -1,146 +0,0 @@
-/**
- * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
-'use strict';
-
-const assert = require('assert').strict;
-const Util = require('../../renderer/util.js');
-const I18n = require('../../renderer/i18n.js');
-const {isNode12SmallIcu} = require('../../../lighthouse-core/test/test-utils.js');
-
-// Require i18n to make sure Intl is polyfilled in Node without full-icu for testing.
-// When Util is run in a browser, Intl will be supplied natively (IE11+).
-// eslint-disable-next-line no-unused-vars
-const i18n = require('../../../lighthouse-core/lib/i18n/i18n.js');
-
-const NBSP = '\xa0';
-
-/* eslint-env jest */
-
-describe('util helpers', () => {
-  it('formats a number', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(10), '10');
-    assert.strictEqual(i18n.formatNumber(100.01), '100');
-    assert.strictEqual(i18n.formatNumber(13000.456), '13,000.5');
-  });
-
-  it('formats a date', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-    const timestamp = i18n.formatDateTime('2017-04-28T23:07:51.189Z');
-    assert.ok(
-      timestamp.includes('Apr 27, 2017') ||
-      timestamp.includes('Apr 28, 2017') ||
-      timestamp.includes('Apr 29, 2017')
-    );
-  });
-
-  it('formats bytes', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatBytesToKiB(100), `0.1${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(2000), `2.0${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(1014 * 1024), `1,014.0${NBSP}KiB`);
-  });
-
-  it('formats bytes with different granularities', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-
-    let granularity = 10;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `20${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `20${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(14.99999, granularity), `10${NBSP}bytes`);
-
-    granularity = 1;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.54321, granularity), `16${NBSP}bytes`);
-
-    granularity = 0.5;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.0${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.0${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.54321, granularity), `15.5${NBSP}bytes`);
-
-    granularity = 0.1;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.0${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.1${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.19999, granularity), `15.2${NBSP}bytes`);
-
-    granularity = 0.01;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.00${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.12${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.19999, granularity), `15.20${NBSP}bytes`);
-  });
-
-  it('formats kibibytes with different granularities', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-
-    let granularity = 10;
-    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `10${NBSP}KiB`);
-    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024, granularity), `0${NBSP}KiB`);
-
-    granularity = 1;
-    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `5${NBSP}KiB`);
-    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024 + 512, granularity), `5${NBSP}KiB`);
-    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024 + 511, granularity), `4${NBSP}KiB`);
-
-    granularity = 0.01;
-    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `5.00${NBSP}KiB`);
-    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024 - 5, granularity), `5.00${NBSP}KiB`);
-    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024 - 6, granularity), `4.99${NBSP}KiB`);
-  });
-
-  it('formats ms', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatMilliseconds(123), `120${NBSP}ms`);
-    assert.equal(i18n.formatMilliseconds(2456.5, 0.1), `2,456.5${NBSP}ms`);
-    assert.equal(i18n.formatMilliseconds(0.000001), `0${NBSP}ms`);
-    assert.equal(i18n.formatMilliseconds(-0.000001), `0${NBSP}ms`);
-  });
-
-  it('formats a duration', () => {
-    const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatDuration(60 * 1000), `1${NBSP}m`);
-    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `1${NBSP}h 5${NBSP}s`);
-    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `1${NBSP}d 4${NBSP}h 5${NBSP}s`);
-  });
-
-  it('formats numbers based on locale', () => {
-    // COMPAT: Node 12 only has 'en' by default.
-    if (isNode12SmallIcu()) return;
-
-    // Requires full-icu or Intl polyfill.
-    const number = 12346.858558;
-
-    const i18n = new I18n('de', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
-    assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
-  });
-
-  it('uses decimal comma with en-XA test locale', () => {
-    // COMPAT: Node 12 only has 'en' by default.
-    if (isNode12SmallIcu()) return;
-
-    // Requires full-icu or Intl polyfill.
-    const number = 12346.858558;
-
-    const i18n = new I18n('en-XA', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
-    assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
-  });
-
-  it('should not crash on unknown locales', () => {
-    const i18n = new I18n('unknown-mystery-locale', {...Util.UIStrings});
-    const timestamp = i18n.formatDateTime('2017-04-28T23:07:51.189Z');
-    assert.ok(
-      timestamp.includes('Apr 27, 2017') ||
-      timestamp.includes('Apr 28, 2017') ||
-      timestamp.includes('Apr 29, 2017')
-    );
-  });
-});