lighthouse 8.3.0-dev.20210904 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/changelog.md +1 -1
  2. package/dist/report/standalone.js +196 -0
  3. package/jest.config.js +0 -4
  4. package/lighthouse-cli/cli-flags.js +6 -14
  5. package/lighthouse-cli/run.js +1 -1
  6. package/lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js +3 -9
  7. package/lighthouse-cli/test/smokehouse/report-assert.js +16 -36
  8. package/lighthouse-core/audits/large-javascript-libraries.js +166 -0
  9. package/lighthouse-core/audits/seo/http-status-code.js +6 -2
  10. package/lighthouse-core/audits/viewport.js +1 -2
  11. package/lighthouse-core/config/config-helpers.js +75 -9
  12. package/lighthouse-core/config/config.js +50 -6
  13. package/lighthouse-core/config/constants.js +0 -1
  14. package/lighthouse-core/config/default-config.js +0 -3
  15. package/lighthouse-core/config/experimental-config.js +8 -0
  16. package/lighthouse-core/config/metrics-to-audits.js +0 -1
  17. package/lighthouse-core/fraggle-rock/config/config.js +4 -3
  18. package/lighthouse-core/fraggle-rock/config/default-config.js +1 -3
  19. package/lighthouse-core/fraggle-rock/config/validation.js +0 -201
  20. package/lighthouse-core/fraggle-rock/gather/base-artifacts.js +0 -4
  21. package/lighthouse-core/fraggle-rock/gather/navigation-runner.js +8 -16
  22. package/lighthouse-core/fraggle-rock/gather/runner-helpers.js +0 -4
  23. package/lighthouse-core/fraggle-rock/gather/session.js +5 -30
  24. package/lighthouse-core/gather/driver/navigation.js +6 -7
  25. package/lighthouse-core/gather/driver/wait-for-condition.js +0 -27
  26. package/lighthouse-core/gather/fetcher.js +7 -17
  27. package/lighthouse-core/gather/gather-runner.js +0 -1
  28. package/lighthouse-core/gather/gatherers/seo/robots-txt.js +6 -2
  29. package/lighthouse-core/gather/gatherers/seo/tap-targets.js +2 -2
  30. package/lighthouse-core/gather/gatherers/stacks.js +1 -1
  31. package/lighthouse-core/lib/asset-saver.js +2 -2
  32. package/lighthouse-core/lib/cdt/SDK.js +0 -1
  33. package/lighthouse-core/lib/csp-evaluator.js +4 -17
  34. package/{report/generator → lighthouse-core/lib}/file-namer.js +0 -0
  35. package/lighthouse-core/lib/i18n/README.md +1 -1
  36. package/lighthouse-core/lib/i18n/i18n.js +7 -7
  37. package/lighthouse-core/lib/i18n/locales/ar-XB.json +18 -0
  38. package/lighthouse-core/lib/i18n/locales/ar.json +18 -0
  39. package/lighthouse-core/lib/i18n/locales/bg.json +18 -0
  40. package/lighthouse-core/lib/i18n/locales/ca.json +18 -0
  41. package/lighthouse-core/lib/i18n/locales/cs.json +18 -0
  42. package/lighthouse-core/lib/i18n/locales/da.json +18 -0
  43. package/lighthouse-core/lib/i18n/locales/de.json +18 -0
  44. package/lighthouse-core/lib/i18n/locales/el.json +18 -0
  45. package/lighthouse-core/lib/i18n/locales/en-GB.json +18 -0
  46. package/lighthouse-core/lib/i18n/locales/en-US.json +18 -18
  47. package/lighthouse-core/lib/i18n/locales/en-XA.json +18 -0
  48. package/lighthouse-core/lib/i18n/locales/en-XL.json +18 -18
  49. package/lighthouse-core/lib/i18n/locales/es-419.json +18 -0
  50. package/lighthouse-core/lib/i18n/locales/es.json +18 -0
  51. package/lighthouse-core/lib/i18n/locales/fi.json +18 -0
  52. package/lighthouse-core/lib/i18n/locales/fil.json +18 -0
  53. package/lighthouse-core/lib/i18n/locales/fr.json +18 -0
  54. package/lighthouse-core/lib/i18n/locales/he.json +18 -0
  55. package/lighthouse-core/lib/i18n/locales/hi.json +18 -0
  56. package/lighthouse-core/lib/i18n/locales/hr.json +18 -0
  57. package/lighthouse-core/lib/i18n/locales/hu.json +18 -0
  58. package/lighthouse-core/lib/i18n/locales/id.json +18 -0
  59. package/lighthouse-core/lib/i18n/locales/it.json +18 -0
  60. package/lighthouse-core/lib/i18n/locales/ja.json +18 -0
  61. package/lighthouse-core/lib/i18n/locales/ko.json +18 -0
  62. package/lighthouse-core/lib/i18n/locales/lt.json +18 -0
  63. package/lighthouse-core/lib/i18n/locales/lv.json +18 -0
  64. package/lighthouse-core/lib/i18n/locales/nl.json +18 -0
  65. package/lighthouse-core/lib/i18n/locales/no.json +18 -0
  66. package/lighthouse-core/lib/i18n/locales/pl.json +18 -0
  67. package/lighthouse-core/lib/i18n/locales/pt-PT.json +18 -0
  68. package/lighthouse-core/lib/i18n/locales/pt.json +18 -0
  69. package/lighthouse-core/lib/i18n/locales/ro.json +18 -0
  70. package/lighthouse-core/lib/i18n/locales/ru.json +18 -0
  71. package/lighthouse-core/lib/i18n/locales/sk.json +18 -0
  72. package/lighthouse-core/lib/i18n/locales/sl.json +18 -0
  73. package/lighthouse-core/lib/i18n/locales/sr-Latn.json +18 -0
  74. package/lighthouse-core/lib/i18n/locales/sr.json +18 -0
  75. package/lighthouse-core/lib/i18n/locales/sv.json +18 -0
  76. package/lighthouse-core/lib/i18n/locales/ta.json +18 -0
  77. package/lighthouse-core/lib/i18n/locales/te.json +18 -0
  78. package/lighthouse-core/lib/i18n/locales/th.json +18 -0
  79. package/lighthouse-core/lib/i18n/locales/tr.json +18 -0
  80. package/lighthouse-core/lib/i18n/locales/uk.json +18 -0
  81. package/lighthouse-core/lib/i18n/locales/vi.json +18 -0
  82. package/lighthouse-core/lib/i18n/locales/zh-HK.json +18 -0
  83. package/lighthouse-core/lib/i18n/locales/zh-TW.json +18 -0
  84. package/lighthouse-core/lib/i18n/locales/zh.json +18 -0
  85. package/lighthouse-core/lib/large-javascript-libraries/bundlephobia-database.json +62 -0
  86. package/lighthouse-core/lib/large-javascript-libraries/library-suggestions.js +20 -0
  87. package/lighthouse-core/lib/network-request.js +1 -3
  88. package/lighthouse-core/lib/traces/pwmetrics-events.js +2 -2
  89. package/lighthouse-core/lib/url-shim.js +1 -7
  90. package/lighthouse-core/runner.js +1 -4
  91. package/lighthouse-core/util-commonjs.js +2 -2
  92. package/now.json +1 -1
  93. package/package.json +13 -20
  94. package/report/README.md +2 -2
  95. package/report/assets/standalone-template.html +1 -0
  96. package/report/assets/styles.css +27 -23
  97. package/report/assets/templates.html +40 -37
  98. package/report/clients/bundle.js +0 -1
  99. package/report/{package.json → clients/package.json} +0 -0
  100. package/report/clients/psi.js +3 -13
  101. package/report/clients/standalone.js +1 -1
  102. package/report/{types/buffer.d.ts → clients/treemap.js} +13 -11
  103. package/report/renderer/category-renderer.js +2 -2
  104. package/report/renderer/components.js +48 -46
  105. package/report/renderer/crc-details-renderer.js +16 -16
  106. package/report/renderer/details-renderer.js +1 -1
  107. package/report/renderer/dom.js +0 -17
  108. package/report/renderer/element-screenshot-renderer.js +9 -9
  109. package/{flow-report/test/setup/global-setup.ts → report/renderer/file-namer.js} +2 -5
  110. package/report/renderer/logger.js +4 -4
  111. package/report/renderer/package.json +4 -0
  112. package/report/renderer/report-renderer.js +11 -4
  113. package/report/renderer/report-ui-features.js +656 -43
  114. package/report/renderer/text-encoding.js +1 -1
  115. package/report/renderer/util.js +2 -2
  116. package/report/{generator/report-assets.js → report-assets.js} +3 -9
  117. package/report/{generator/report-generator.js → report-generator.js} +9 -37
  118. package/report/test/clients/package.json +4 -0
  119. package/report/test/clients/psi-test.js +1 -3
  120. package/report/test/renderer/category-renderer-test.js +1 -2
  121. package/report/test/renderer/components-test.js +0 -35
  122. package/report/test/renderer/crc-details-renderer-test.js +4 -5
  123. package/report/test/renderer/details-renderer-test.js +1 -3
  124. package/report/test/renderer/dom-test.js +6 -8
  125. package/report/test/renderer/i18n-test.js +0 -1
  126. package/report/test/renderer/package.json +4 -0
  127. package/report/test/renderer/performance-category-renderer-test.js +2 -3
  128. package/report/test/renderer/pwa-category-renderer-test.js +1 -2
  129. package/report/test/renderer/report-renderer-test.js +0 -1
  130. package/report/test/renderer/report-ui-features-test.js +18 -20
  131. package/report/test/renderer/snippet-renderer-test.js +0 -1
  132. package/report/test/renderer/text-encoding-test.js +0 -2
  133. package/report/test/renderer/util-test.js +0 -1
  134. package/report/test/{generator/report-generator-test.js → report-generator-test.js} +2 -4
  135. package/third-party/chromium-synchronization/installability-errors-test.js +27 -28
  136. package/third-party/snyk/snapshot.json +0 -2
  137. package/tsconfig.json +5 -24
  138. package/types/artifacts.d.ts +18 -5
  139. package/types/{lhr/audit-details.d.ts → audit-details.d.ts} +3 -18
  140. package/types/audit.d.ts +58 -7
  141. package/types/{lhr/budget.d.ts → budget.d.ts} +0 -0
  142. package/types/bundle-phobia-cli/index.d.ts +40 -0
  143. package/types/config.d.ts +8 -3
  144. package/types/externs.d.ts +119 -5
  145. package/types/gatherer.d.ts +2 -3
  146. package/types/global-lh.d.ts +14 -16
  147. package/{report/types/report-result.d.ts → types/html-renderer.d.ts} +17 -8
  148. package/types/{lhr/i18n.d.ts → i18n.d.ts} +25 -2
  149. package/types/{lhr/lhr.d.ts → lhr.d.ts} +9 -41
  150. package/types/smokehouse.d.ts +3 -3
  151. package/types/{lhr/treemap.d.ts → treemap.d.ts} +3 -3
  152. package/flow-report/assets/standalone-flow-template.html +0 -38
  153. package/flow-report/assets/styles.css +0 -310
  154. package/flow-report/jest.config.js +0 -24
  155. package/flow-report/src/app.tsx +0 -40
  156. package/flow-report/src/common.tsx +0 -72
  157. package/flow-report/src/icons.tsx +0 -96
  158. package/flow-report/src/sidebar/flow.tsx +0 -72
  159. package/flow-report/src/sidebar/sidebar.tsx +0 -89
  160. package/flow-report/src/summary/summary.tsx +0 -178
  161. package/flow-report/src/util.ts +0 -160
  162. package/flow-report/src/wrappers/gauge.tsx +0 -40
  163. package/flow-report/src/wrappers/report-renderer.tsx +0 -46
  164. package/flow-report/src/wrappers/report.tsx +0 -71
  165. package/flow-report/standalone-flow.tsx +0 -23
  166. package/flow-report/test/app-test.tsx +0 -48
  167. package/flow-report/test/common-test.tsx +0 -131
  168. package/flow-report/test/setup/env-setup.ts +0 -25
  169. package/flow-report/test/sidebar/flow-test.tsx +0 -71
  170. package/flow-report/test/sidebar/sidebar-test.tsx +0 -53
  171. package/flow-report/test/summary/summary-test.tsx +0 -132
  172. package/flow-report/test/util-test.tsx +0 -109
  173. package/flow-report/tsconfig.json +0 -39
  174. package/flow-report/types/flow-report.d.ts +0 -27
  175. package/lighthouse-core/audits/lcp-lazy-loaded.js +0 -83
  176. package/report/.eslintrc.cjs +0 -33
  177. package/report/generator/README.md +0 -9
  178. package/report/generator/flow-report-assets.js +0 -20
  179. package/report/generator/package.json +0 -4
  180. package/report/generator/tsconfig.json +0 -28
  181. package/report/renderer/drop-down-menu.js +0 -215
  182. package/report/renderer/features-util.js +0 -26
  183. package/report/renderer/open-tab.js +0 -137
  184. package/report/renderer/topbar-features.js +0 -309
  185. package/report/test/generator/file-namer-test.js +0 -28
  186. package/report/test/generator/package.json +0 -4
  187. package/report/test-assets/faux-psi-template.html +0 -126
  188. package/report/test-assets/faux-psi.js +0 -92
  189. package/report/tsconfig.json +0 -39
  190. package/report/types/augment-dom.d.ts +0 -24
  191. package/report/types/html-renderer.d.ts +0 -28
  192. package/types/lhr/audit-result.d.ts +0 -59
  193. package/types/lhr/flow.d.ts +0 -16
  194. package/types/lhr/settings.d.ts +0 -105
  195. package/types/lhr/tsconfig.json +0 -24
  196. package/types/query-selector.d.ts +0 -36
@@ -1,71 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import {FunctionComponent} from 'preact';
8
- import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
9
-
10
- import {useCurrentLhr, useHashParam} from '../util';
11
- import {useReportRenderer} from './report-renderer';
12
-
13
- /**
14
- * The default behavior of anchor links is not compatible with the flow report's hash navigation.
15
- * This function converts any anchor links under the provided element to a flow report link.
16
- * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
17
- */
18
- export function convertChildAnchors(element: HTMLElement, index: number) {
19
- const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>;
20
- for (const link of links) {
21
- // Check if the link destination is in the report.
22
- const currentUrl = new URL(location.href);
23
- currentUrl.hash = '';
24
- currentUrl.search = '';
25
- const linkUrl = new URL(link.href);
26
- linkUrl.hash = '';
27
- linkUrl.search = '';
28
- if (currentUrl.href !== linkUrl.href || !link.hash) continue;
29
-
30
- const nodeId = link.hash.substr(1);
31
- link.hash = `#index=${index}&anchor=${nodeId}`;
32
- }
33
- }
34
-
35
- export const Report: FunctionComponent = () => {
36
- const {dom, reportRenderer} = useReportRenderer();
37
- const ref = useRef<HTMLDivElement>(null);
38
- const anchor = useHashParam('anchor');
39
- const currentLhr = useCurrentLhr();
40
-
41
- useLayoutEffect(() => {
42
- if (!currentLhr) return;
43
-
44
- if (ref.current) {
45
- dom.clearComponentCache();
46
- reportRenderer.renderReport(currentLhr.value, ref.current);
47
- convertChildAnchors(ref.current, currentLhr.index);
48
- }
49
-
50
- return () => {
51
- if (ref.current) ref.current.textContent = '';
52
- };
53
- }, [reportRenderer, currentLhr]);
54
-
55
- useEffect(() => {
56
- if (anchor) {
57
- const el = document.getElementById(anchor);
58
- if (el) {
59
- el.scrollIntoView({behavior: 'smooth'});
60
- return;
61
- }
62
- }
63
-
64
- // Scroll to top no anchor is found.
65
- if (ref.current) ref.current.scrollIntoView();
66
- }, [anchor, currentLhr]);
67
-
68
- return (
69
- <div ref={ref} className="lh-root" data-testid="Report"/>
70
- );
71
- };
@@ -1,23 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- /**
8
- * @fileoverview The entry point for rendering the Lighthouse flow report for the HTML file created by ReportGenerator.
9
- * The renderer code is bundled and injected into the report HTML along with the JSON report.
10
- */
11
-
12
- import {render} from 'preact';
13
-
14
- import {App} from './src/app';
15
-
16
- // Used by standalone-flow.html
17
- function __initLighthouseFlowReport__() {
18
- const root = document.body.querySelector('main');
19
- if (!root) throw Error('Root element not found');
20
- render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, root);
21
- }
22
-
23
- window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;
@@ -1,48 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import fs from 'fs';
8
- import {dirname} from 'path';
9
- import {fileURLToPath} from 'url';
10
-
11
- import {render} from '@testing-library/preact';
12
-
13
- import {App} from '../src/app';
14
-
15
- const flowResult = JSON.parse(
16
- fs.readFileSync(
17
- // eslint-disable-next-line max-len
18
- `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
19
- 'utf-8'
20
- )
21
- );
22
-
23
- it('renders a standalone report with summary', async () => {
24
- const root = render(<App flowResult={flowResult}/>);
25
-
26
- expect(root.getByTestId('Summary')).toBeTruthy();
27
- });
28
-
29
- it('renders the navigation step', async () => {
30
- global.location.hash = '#index=0';
31
- const root = render(<App flowResult={flowResult}/>);
32
-
33
- expect(root.getByTestId('Report')).toBeTruthy();
34
- });
35
-
36
- it('renders the timespan step', async () => {
37
- global.location.hash = '#index=1';
38
- const root = render(<App flowResult={flowResult}/>);
39
-
40
- expect(root.getByTestId('Report')).toBeTruthy();
41
- });
42
-
43
- it('renders the snapshot step', async () => {
44
- global.location.hash = '#index=2';
45
- const root = render(<App flowResult={flowResult}/>);
46
-
47
- expect(root.getByTestId('Report')).toBeTruthy();
48
- });
@@ -1,131 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import {render} from '@testing-library/preact';
8
-
9
- import {CategoryRatio} from '../src/common';
10
-
11
- describe('CategoryRatio', () => {
12
- it('renders passed audit count', async () => {
13
- const audits = {
14
- 'audit1': {score: 1},
15
- 'audit2': {score: 1},
16
- 'audit3': {score: 0},
17
- } as any;
18
- const category = {
19
- auditRefs: [
20
- {id: 'audit1', weight: 1},
21
- {id: 'audit2', weight: 0},
22
- {id: 'audit3', weight: 1},
23
- ],
24
- } as any;
25
-
26
- const root = render(<CategoryRatio
27
- audits={audits}
28
- category={category}
29
- href="index=0&achor=seo"
30
- />);
31
- const link = root.getByRole('link');
32
-
33
- expect(link.className).toEqual('CategoryRatio CategoryRatio--average');
34
- expect(link.textContent).toEqual('2/3');
35
- });
36
-
37
- it('renders passed audit count with fail rating', async () => {
38
- const audits = {
39
- 'audit1': {score: 0},
40
- 'audit2': {score: 0},
41
- 'audit3': {score: 0},
42
- } as any;
43
- const category = {
44
- auditRefs: [
45
- {id: 'audit1', weight: 1},
46
- {id: 'audit2', weight: 1},
47
- {id: 'audit3', weight: 1},
48
- ],
49
- } as any;
50
-
51
- const root = render(<CategoryRatio
52
- audits={audits}
53
- category={category}
54
- href="index=0&achor=seo"
55
- />);
56
- const link = root.getByRole('link');
57
-
58
- expect(link.className).toEqual('CategoryRatio CategoryRatio--fail');
59
- expect(link.textContent).toEqual('0/3');
60
- });
61
-
62
- it('renders passed audit count with pass rating', async () => {
63
- const audits = {
64
- 'audit1': {score: 1},
65
- 'audit2': {score: 1},
66
- 'audit3': {score: 1},
67
- } as any;
68
- const category = {
69
- auditRefs: [
70
- {id: 'audit1', weight: 1},
71
- {id: 'audit2', weight: 1},
72
- {id: 'audit3', weight: 1},
73
- ],
74
- } as any;
75
-
76
- const root = render(<CategoryRatio
77
- audits={audits}
78
- category={category}
79
- href="index=0&achor=seo"
80
- />);
81
- const link = root.getByRole('link');
82
-
83
- expect(link.className).toEqual('CategoryRatio CategoryRatio--pass');
84
- expect(link.textContent).toEqual('3/3');
85
- });
86
-
87
- it('uses null rating of no audits have weight', async () => {
88
- const audits = {
89
- 'audit1': {score: 1},
90
- 'audit2': {score: 0},
91
- } as any;
92
- const category = {
93
- auditRefs: [
94
- {id: 'audit1', weight: 0},
95
- {id: 'audit2', weight: 0},
96
- ],
97
- } as any;
98
-
99
- const root = render(<CategoryRatio
100
- audits={audits}
101
- category={category}
102
- href="index=0&achor=seo"
103
- />);
104
- const link = root.getByRole('link');
105
-
106
- expect(link.className).toEqual('CategoryRatio CategoryRatio--null');
107
- expect(link.textContent).toEqual('1/2');
108
- });
109
-
110
- it('treats audit ref with no matching score as fail', async () => {
111
- const audits = {
112
- 'audit1': {score: 1},
113
- } as any;
114
- const category = {
115
- auditRefs: [
116
- {id: 'audit1', weight: 1},
117
- {id: 'audit2', weight: 1},
118
- ],
119
- } as any;
120
-
121
- const root = render(<CategoryRatio
122
- audits={audits}
123
- category={category}
124
- href="index=0&achor=seo"
125
- />);
126
- const link = root.getByRole('link');
127
-
128
- expect(link.className).toEqual('CategoryRatio CategoryRatio--average');
129
- expect(link.textContent).toEqual('1/2');
130
- });
131
- });
@@ -1,25 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import {jest} from '@jest/globals';
8
- import {JSDOM} from 'jsdom';
9
-
10
- /**
11
- * The jest environment "jsdom" does not work when preact is combined with the report renderer.
12
- */
13
- export function setupJsDom() {
14
- const {window} = new JSDOM(undefined, {
15
- url: 'file:///Users/example/report.html/',
16
- });
17
- global.window = window as any;
18
- global.document = window.document;
19
- global.location = window.location;
20
-
21
- // Function not implemented in JSDOM.
22
- window.Element.prototype.scrollIntoView = jest.fn();
23
- }
24
-
25
- global.beforeEach(setupJsDom);
@@ -1,71 +0,0 @@
1
- import fs from 'fs';
2
- import {dirname} from 'path';
3
- import {fileURLToPath} from 'url';
4
-
5
- import {render} from '@testing-library/preact';
6
- import {FunctionComponent} from 'preact';
7
-
8
- import {SidebarFlow} from '../../src/sidebar/flow';
9
- import {FlowResultContext} from '../../src/util';
10
-
11
-
12
- const flowResult = JSON.parse(
13
- fs.readFileSync(
14
- // eslint-disable-next-line max-len
15
- `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
16
- 'utf-8'
17
- )
18
- );
19
-
20
- let wrapper: FunctionComponent;
21
-
22
- beforeEach(() => {
23
- wrapper = ({children}) => (
24
- <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
25
- );
26
- });
27
-
28
- describe('SidebarFlow', () => {
29
- it('renders flow steps', async () => {
30
- const root = render(<SidebarFlow/>, {wrapper});
31
-
32
- const navigation = root.getByText('Navigation report (www.mikescerealshack.co/)');
33
- const timespan = root.getByText('Timespan report (www.mikescerealshack.co/search)');
34
- const snapshot = root.getByText('Snapshot report (www.mikescerealshack.co/search)');
35
- const navigation2 = root.getByText('Navigation report (www.mikescerealshack.co/corrections)');
36
-
37
- const links = root.getAllByRole('link') as HTMLAnchorElement[];
38
- expect(links.map(a => a.textContent)).toEqual([
39
- navigation.textContent,
40
- timespan.textContent,
41
- snapshot.textContent,
42
- navigation2.textContent,
43
- ]);
44
- expect(links.map(a => a.href)).toEqual([
45
- 'file:///Users/example/report.html/#index=0',
46
- 'file:///Users/example/report.html/#index=1',
47
- 'file:///Users/example/report.html/#index=2',
48
- 'file:///Users/example/report.html/#index=3',
49
- ]);
50
- });
51
-
52
- it('no steps highlighted on summary page', async () => {
53
- const root = render(<SidebarFlow/>, {wrapper});
54
-
55
- const links = root.getAllByRole('link');
56
- const highlighted = links.filter(h => h.classList.contains('Sidebar--current'));
57
-
58
- expect(highlighted).toHaveLength(0);
59
- });
60
-
61
- it('highlight current step', async () => {
62
- global.location.hash = '#index=1';
63
- const root = render(<SidebarFlow/>, {wrapper});
64
-
65
- const links = root.getAllByRole('link');
66
- const highlighted = links.filter(h => h.classList.contains('Sidebar--current'));
67
-
68
- expect(highlighted).toHaveLength(1);
69
- expect(links[1]).toEqual(highlighted[0]);
70
- });
71
- });
@@ -1,53 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import fs from 'fs';
8
- import {dirname} from 'path';
9
- import {fileURLToPath} from 'url';
10
-
11
- import {render} from '@testing-library/preact';
12
- import {FunctionComponent} from 'preact';
13
-
14
- import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
15
- import {FlowResultContext} from '../../src/util';
16
-
17
-
18
- const flowResult = JSON.parse(
19
- fs.readFileSync(
20
- // eslint-disable-next-line max-len
21
- `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
22
- 'utf-8'
23
- )
24
- );
25
-
26
- let wrapper: FunctionComponent;
27
-
28
- beforeEach(() => {
29
- wrapper = ({children}) => (
30
- <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
31
- );
32
- });
33
-
34
- describe('SidebarHeader', () => {
35
- it('renders title content', async () => {
36
- const title = 'Lighthouse flow report';
37
- const date = '2021-08-03T18:28:13.296Z';
38
- const root = render(<SidebarHeader title={title} date={date}/>, {wrapper});
39
-
40
- expect(root.getByText(title)).toBeTruthy();
41
- expect(root.getByText('Aug 3, 2021, 6:28 PM UTC')).toBeTruthy();
42
- });
43
- });
44
-
45
- describe('SidebarSummary', () => {
46
- it('highlighted by default', async () => {
47
- const root = render(<SidebarSummary/>, {wrapper});
48
- const link = root.getByRole('link') as HTMLAnchorElement;
49
-
50
- expect(link.href).toEqual('file:///Users/example/report.html/#');
51
- expect(link.classList).toContain('Sidebar--current');
52
- });
53
- });
@@ -1,132 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import fs from 'fs';
8
- import {dirname} from 'path';
9
- import {fileURLToPath} from 'url';
10
-
11
- import {render} from '@testing-library/preact';
12
- import {FunctionComponent} from 'preact';
13
-
14
- import {SummaryHeader, SummaryFlowStep} from '../../src/summary/summary';
15
- import {FlowResultContext} from '../../src/util';
16
- import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
17
-
18
- const flowResult: LH.FlowResult = JSON.parse(
19
- fs.readFileSync(
20
- // eslint-disable-next-line max-len
21
- `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
22
- 'utf-8'
23
- )
24
- );
25
-
26
- let wrapper: FunctionComponent;
27
-
28
- beforeEach(() => {
29
- wrapper = ({children}) => (
30
- <FlowResultContext.Provider value={flowResult}>
31
- <ReportRendererProvider>
32
- {children}
33
- </ReportRendererProvider>
34
- </FlowResultContext.Provider>
35
- );
36
- });
37
-
38
- describe('SummaryHeader', () => {
39
- it('renders header content', async () => {
40
- const root = render(<SummaryHeader/>, {wrapper});
41
-
42
- const lhrCounts = root.getByText(/·/);
43
- expect(root.getByText('Summary')).toBeTruthy();
44
- expect(lhrCounts.textContent).toEqual(
45
- '2 navigation reports · 1 timespan reports · 1 snapshot reports'
46
- );
47
- });
48
- });
49
-
50
- describe('SummaryFlowStep', () => {
51
- it('renders navigation step', async () => {
52
- const root = render(<SummaryFlowStep
53
- lhr={flowResult.lhrs[0]}
54
- label="Navigation (1)"
55
- hashIndex={0}
56
- />, {wrapper});
57
-
58
- expect(root.getByTestId('SummaryNavigationHeader')).toBeTruthy();
59
-
60
- expect(root.getByText('Navigation (1)')).toBeTruthy();
61
-
62
- const screenshot = root.getByTestId('SummaryFlowStep__screenshot') as HTMLImageElement;
63
- expect(screenshot.src).toMatch(/data:image\/jpeg;base64/);
64
-
65
- const gauges = root.getAllByTestId('Gauge');
66
- expect(gauges).toHaveLength(4);
67
-
68
- const links = root.getAllByRole('link') as HTMLAnchorElement[];
69
- expect(links.map(a => a.href)).toEqual([
70
- 'file:///Users/example/report.html/#index=0',
71
- 'file:///Users/example/report.html/#index=0&anchor=performance',
72
- 'file:///Users/example/report.html/#index=0&anchor=accessibility',
73
- 'file:///Users/example/report.html/#index=0&anchor=best-practices',
74
- 'file:///Users/example/report.html/#index=0&anchor=seo',
75
- ]);
76
- });
77
-
78
- it('renders timespan step', async () => {
79
- const root = render(<SummaryFlowStep
80
- lhr={flowResult.lhrs[1]}
81
- label="Timespan (1)"
82
- hashIndex={1}
83
- />, {wrapper});
84
-
85
- expect(() => root.getByTestId('SummaryNavigationHeader')).toThrow();
86
-
87
- expect(root.getByText('Timespan (1)')).toBeTruthy();
88
-
89
- const screenshot = root.getByTestId('SummaryFlowStep__screenshot') as HTMLImageElement;
90
- expect(screenshot.src).toBeFalsy();
91
-
92
- expect(root.getByTestId('SummaryCategory__null'));
93
- const gauges = root.getAllByTestId('CategoryRatio');
94
- expect(gauges).toHaveLength(3);
95
-
96
- const links = root.getAllByRole('link') as HTMLAnchorElement[];
97
- expect(links.map(a => a.href)).toEqual([
98
- 'file:///Users/example/report.html/#index=1',
99
- 'file:///Users/example/report.html/#index=1&anchor=performance',
100
- // Accessibility is missing in timespan.
101
- 'file:///Users/example/report.html/#index=1&anchor=best-practices',
102
- 'file:///Users/example/report.html/#index=1&anchor=seo',
103
- ]);
104
- });
105
-
106
- it('renders snapshot step', async () => {
107
- const root = render(<SummaryFlowStep
108
- lhr={flowResult.lhrs[2]}
109
- label="Snapshot (1)"
110
- hashIndex={2}
111
- />, {wrapper});
112
-
113
- expect(() => root.getByTestId('SummaryNavigationHeader')).toThrow();
114
-
115
- expect(root.getByText('Snapshot (1)')).toBeTruthy();
116
-
117
- const screenshot = root.getByTestId('SummaryFlowStep__screenshot') as HTMLImageElement;
118
- expect(screenshot.src).toMatch(/data:image\/jpeg;base64/);
119
-
120
- const gauges = root.getAllByTestId('CategoryRatio');
121
- expect(gauges).toHaveLength(4);
122
-
123
- const links = root.getAllByRole('link') as HTMLAnchorElement[];
124
- expect(links.map(a => a.href)).toEqual([
125
- 'file:///Users/example/report.html/#index=2',
126
- 'file:///Users/example/report.html/#index=2&anchor=performance',
127
- 'file:///Users/example/report.html/#index=2&anchor=accessibility',
128
- 'file:///Users/example/report.html/#index=2&anchor=best-practices',
129
- 'file:///Users/example/report.html/#index=2&anchor=seo',
130
- ]);
131
- });
132
- });
@@ -1,109 +0,0 @@
1
- /**
2
- * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
3
- * 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
4
- * 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.
5
- */
6
-
7
- import fs from 'fs';
8
- import {dirname} from 'path';
9
- import {fileURLToPath} from 'url';
10
-
11
- import {renderHook} from '@testing-library/preact-hooks';
12
- import {FunctionComponent} from 'preact';
13
- import {act} from 'preact/test-utils';
14
-
15
- import {FlowResultContext, useCurrentLhr, useDerivedStepNames} from '../src/util';
16
-
17
- const flowResult: LH.FlowResult = JSON.parse(
18
- fs.readFileSync(
19
- // eslint-disable-next-line max-len
20
- `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
21
- 'utf-8'
22
- )
23
- );
24
-
25
- let wrapper: FunctionComponent;
26
-
27
- beforeEach(() => {
28
- wrapper = ({children}) => (
29
- <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
30
- );
31
- });
32
-
33
- describe('useCurrentLhr', () => {
34
- it('gets current lhr index from url hash', () => {
35
- global.location.hash = '#index=1';
36
- const {result} = renderHook(() => useCurrentLhr(), {wrapper});
37
- expect(result.current).toEqual({
38
- index: 1,
39
- value: flowResult.lhrs[1],
40
- });
41
- });
42
-
43
- it('changes on navigation', async () => {
44
- global.location.hash = '#index=1';
45
- const render = renderHook(() => useCurrentLhr(), {wrapper});
46
-
47
- expect(render.result.current).toEqual({
48
- index: 1,
49
- value: flowResult.lhrs[1],
50
- });
51
-
52
- await act(() => {
53
- global.location.hash = '#index=2';
54
- });
55
- await render.waitForNextUpdate();
56
-
57
- expect(render.result.current).toEqual({
58
- index: 2,
59
- value: flowResult.lhrs[2],
60
- });
61
- });
62
-
63
- it('return null if lhr index is unset', () => {
64
- const {result} = renderHook(() => useCurrentLhr(), {wrapper});
65
- expect(result.current).toBeNull();
66
- });
67
-
68
- it('return null if lhr index is out of bounds', () => {
69
- global.location.hash = '#index=5';
70
- const {result} = renderHook(() => useCurrentLhr(), {wrapper});
71
- expect(result.current).toBeNull();
72
- });
73
-
74
- it('returns null for invalid value', () => {
75
- global.location.hash = '#index=OHNO';
76
- const {result} = renderHook(() => useCurrentLhr(), {wrapper});
77
- expect(result.current).toBeNull();
78
- });
79
- });
80
-
81
- describe('useDerivedStepNames', () => {
82
- it('counts up for each mode', () => {
83
- const {result} = renderHook(() => useDerivedStepNames(), {wrapper});
84
- expect(result.current).toEqual([
85
- 'Navigation report (www.mikescerealshack.co/)',
86
- 'Timespan report (www.mikescerealshack.co/search)',
87
- 'Snapshot report (www.mikescerealshack.co/search)',
88
- 'Navigation report (www.mikescerealshack.co/corrections)',
89
- ]);
90
- });
91
-
92
- it('enumerates if multiple in same group', () => {
93
- const lhrs = flowResult.lhrs;
94
- lhrs[3] = lhrs[2];
95
- const newFlowResult = {lhrs};
96
- const wrapper: FunctionComponent = ({children}) => (
97
- <FlowResultContext.Provider value={newFlowResult}>{children}</FlowResultContext.Provider>
98
- );
99
-
100
- const {result} = renderHook(() => useDerivedStepNames(), {wrapper});
101
-
102
- expect(result.current).toEqual([
103
- 'Navigation report (www.mikescerealshack.co/)',
104
- 'Timespan report (www.mikescerealshack.co/search)',
105
- 'Snapshot report 1 (www.mikescerealshack.co/search)',
106
- 'Snapshot report 2 (www.mikescerealshack.co/search)',
107
- ]);
108
- });
109
- });