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

fix(html reporter): show fetch error message and use no-cache (#8788)

Browse source
This commit is contained in:
Dmitry Gozman 2021-09-08 14:21:11 -07:00 committed by GitHub
parent b4ca77be23
commit 41088029f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/web/htmlReport/htmlReport.css
View file

@ -94,7 +94,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: calc(100% - 40px);
flex-direction: column;
line-height: 40px;
}
.awesome.small {
font-size: 20px;
} }
.image-preview img { .image-preview img {

18
src/web/htmlReport/htmlReport.tsx
View file

@ -28,13 +28,18 @@ type Filter = 'Failing' | 'All';
export const Report: React.FC = () => { export const Report: React.FC = () => {
const [report, setReport] = React.useState<JsonReport | undefined>(); const [report, setReport] = React.useState<JsonReport | undefined>();
const [fetchError, setFetchError] = React.useState<string | undefined>();
const [selectedTest, setSelectedTest] = React.useState<JsonTestCase | undefined>(); const [selectedTest, setSelectedTest] = React.useState<JsonTestCase | undefined>();
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
const result = await fetch('report.json'); try {
const json = (await result.json()) as JsonReport; const result = await fetch('report.json', { cache: 'no-cache' });
setReport(json); const json = (await result.json()) as JsonReport;
setReport(json);
} catch (e) {
setFetchError(e.message);
}
})(); })();
}, []); }, []);
const [filter, setFilter] = React.useState<Filter>('Failing'); const [filter, setFilter] = React.useState<Filter>('Failing');
@ -62,12 +67,13 @@ export const Report: React.FC = () => {
}}>{item}</div>; }}>{item}</div>;
}) })
}</div> }</div>
{filter === 'All' && report?.suites.map((s, i) => <ProjectTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest}></ProjectTreeItem>)} {!fetchError && filter === 'All' && report?.suites.map((s, i) => <ProjectTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest}></ProjectTreeItem>)}
{filter === 'Failing' && !!unexpectedTestCount && report?.suites.map((s, i) => { {!fetchError && filter === 'Failing' && !!unexpectedTestCount && report?.suites.map((s, i) => {
const hasUnexpectedOutcomes = !!unexpectedTests.get(s)?.length; const hasUnexpectedOutcomes = !!unexpectedTests.get(s)?.length;
return hasUnexpectedOutcomes && <ProjectFlatTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest} unexpectedTests={unexpectedTests.get(s)!}></ProjectFlatTreeItem>; return hasUnexpectedOutcomes && <ProjectFlatTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest} unexpectedTests={unexpectedTests.get(s)!}></ProjectFlatTreeItem>;
})} })}
{filter === 'Failing' && !unexpectedTestCount && <div className='awesome'>You are awesome!</div>} {!fetchError && filter === 'Failing' && !unexpectedTestCount && <div className='awesome'>You are awesome!</div>}
{fetchError && <div className='awesome small'><div>Failed to load report</div><div>Are you using npx playwright?</div></div>}
</div> </div>
</SplitView> </SplitView>
</div>; </div>;