Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: separate anchor from autochip

Browse source
This commit is contained in:
Simon Knott 2024-11-19 14:02:14 +01:00
parent aa6064e676
commit dc064d414f
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
3 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/html-reporter/src/chip.tsx
View file

@ -20,7 +20,7 @@ import './colors.css';
import './common.css'; import './common.css';
import * as icons from './icons'; import * as icons from './icons';
import { clsx } from '@web/uiUtils'; import { clsx } from '@web/uiUtils';
import { Anchor } from './links'; import { useAnchor } from './links';
export const Chip: React.FC<{ export const Chip: React.FC<{
header: JSX.Element | string, header: JSX.Element | string,
@ -53,19 +53,18 @@ export const AutoChip: React.FC<{
noInsets?: boolean, noInsets?: boolean,
children?: any, children?: any,
dataTestId?: string, dataTestId?: string,
anchorId?: string, revealOnAnchorId?: string,
}> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => { }> = ({ header, initialExpanded, noInsets, children, dataTestId, revealOnAnchorId }) => {
const [expanded, setExpanded] = React.useState(initialExpanded ?? true); const [expanded, setExpanded] = React.useState(initialExpanded ?? true);
const onReveal = React.useCallback(() => setExpanded(true), []); const onReveal = React.useCallback(() => setExpanded(true), []);
return <Anchor id={anchorId} onReveal={onReveal}> useAnchor(revealOnAnchorId, onReveal);
<Chip return <Chip
header={header} header={header}
expanded={expanded} expanded={expanded}
setExpanded={setExpanded} setExpanded={setExpanded}
noInsets={noInsets} noInsets={noInsets}
dataTestId={dataTestId} dataTestId={dataTestId}
> >
{children} {children}
</Chip> </Chip>;
</Anchor>;
}; };

5
packages/html-reporter/src/links.tsx
View file

@ -116,8 +116,11 @@ const kMissingContentType = 'x-playwright/missing';
type AnchorID = string | ((id: string | null) => boolean) | undefined; type AnchorID = string | ((id: string | null) => boolean) | undefined;
function useAnchor(id: AnchorID, onReveal: () => void) { export function useAnchor(id: AnchorID, onReveal: () => void) {
React.useEffect(() => { React.useEffect(() => {
if (typeof id === 'undefined')
return;
const listener = () => { const listener = () => {
const params = new URLSearchParams(window.location.hash.slice(1)); const params = new URLSearchParams(window.location.hash.slice(1));
const anchor = params.get('anchor'); const anchor = params.get('anchor');

18
packages/html-reporter/src/testResultView.tsx
View file

@ -20,7 +20,7 @@ import { TreeItem } from './treeItem';
import { msToString } from './utils'; import { msToString } from './utils';
import { AutoChip } from './chip'; import { AutoChip } from './chip';
import { traceImage } from './images'; import { traceImage } from './images';
import { AttachmentLink, generateTraceUrl } from './links'; import { Anchor, AttachmentLink, generateTraceUrl } from './links';
import { statusIcon } from './statusIcon'; import { statusIcon } from './statusIcon';
import type { ImageDiff } from '@web/shared/imageDiffView'; import type { ImageDiff } from '@web/shared/imageDiffView';
import { ImageDiffView } from '@web/shared/imageDiffView'; import { ImageDiffView } from '@web/shared/imageDiffView';
@ -91,9 +91,11 @@ export const TestResultView: React.FC<{
</AutoChip>} </AutoChip>}
{diffs.map((diff, index) => {diffs.map((diff, index) =>
<AutoChip key={`diff-${index}`} dataTestId='test-results-image-diff' header={`Image mismatch: ${diff.name}`} anchorId={`diff-${index}`}> <Anchor key={`diff-${index}`} id={`diff-${index}`}>
<ImageDiffView diff={diff}/> <AutoChip dataTestId='test-results-image-diff' header={`Image mismatch: ${diff.name}`} revealOnAnchorId={`diff-${index}`}>
</AutoChip> <ImageDiffView diff={diff}/>
</AutoChip>
</Anchor>
)} )}
{!!screenshots.length && <AutoChip header='Screenshots'> {!!screenshots.length && <AutoChip header='Screenshots'>
@ -107,23 +109,23 @@ export const TestResultView: React.FC<{
})} })}
</AutoChip>} </AutoChip>}
{!!traces.length && <AutoChip header='Traces' anchorId='traces'> {!!traces.length && <Anchor id='traces'><AutoChip header='Traces' revealOnAnchorId='traces'>
{<div> {<div>
<a href={generateTraceUrl(traces)}> <a href={generateTraceUrl(traces)}>
<img className='screenshot' src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} /> <img className='screenshot' src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
</a> </a>
{traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)} {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
</div>} </div>}
</AutoChip>} </AutoChip></Anchor>}
{!!videos.length && <AutoChip header='Videos' anchorId='videos'> {!!videos.length && <Anchor id='videos'><AutoChip header='Videos' revealOnAnchorId='videos'>
{videos.map((a, i) => <div key={`video-${i}`}> {videos.map((a, i) => <div key={`video-${i}`}>
<video controls> <video controls>
<source src={a.path} type={a.contentType}/> <source src={a.path} type={a.contentType}/>
</video> </video>
<AttachmentLink attachment={a}></AttachmentLink> <AttachmentLink attachment={a}></AttachmentLink>
</div>)} </div>)}
</AutoChip>} </AutoChip></Anchor>}
{!!(otherAttachments.size + htmls.length) && <AutoChip header='Attachments'> {!!(otherAttachments.size + htmls.length) && <AutoChip header='Attachments'>
{[...htmls].map((a, i) => ( {[...htmls].map((a, i) => (