report(flow): embedded lighthouse report #12989
Conversation
flow-report/src/wrappers/report.tsx
Outdated
| useLayoutEffect(() => { | ||
| if (!currentLhr) return; | ||
|
|
||
| dom.clearComponentCache(); |
There was a problem hiding this comment.
Without this, style nodes are not added every time the LHR changes
lighthouse/report/renderer/dom.js
Lines 95 to 102 in 94f5bdf
| /** | ||
| * The jest environment "jsdom" does not work when preact is combined with the report renderer. | ||
| */ | ||
| export function setupJsDom() { |
There was a problem hiding this comment.
The default jsdom test environment was not cooperating with the report renderer. These changes basically setup our own environment for testing with JSDOM.
The only problem I've encountered is that findBy* queries don't work, but we can just replace those with equivalent getBy* ones.
flow-report/src/util.ts
Outdated
| @@ -48,6 +48,21 @@ export function getScreenshot(reportResult: LH.ReportResult) { | |||
| return fullPageScreenshot || null; | |||
| } | |||
|
|
|||
| export function convertChildAnchors(element: HTMLElement, index: number) { | |||
| const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>; | |||
There was a problem hiding this comment.
flow-report.d.ts can pull in the better typed querySelector and get this without the cast. report does it here:
lighthouse/report/types/augment-dom.d.ts
Lines 12 to 13 in 38f6364
There was a problem hiding this comment.
This made the type errors visible in VSCode, but the type cast is still necessary. Either way I think it's a helpful change.
There was a problem hiding this comment.
weird, I wonder if it's a js vs ts difference. Something to look into at some point
| export function useCurrentLhr(): {value: LH.Result, index: number}|null { | ||
| const flowResult = useFlowResult(); | ||
| const [indexString, setIndexString] = useState(getHashParam('index')); | ||
| export function useHashParam(param: string) { |
Renders a lighthouse report in the flow report. I intentionally left
ReportUIFeaturesout for this PR.