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

chore: html report ui fixes (#9522)

Browse source
This commit is contained in:
Pavel Feldman 2021-10-14 17:54:33 -08:00 committed by GitHub
parent 75cfe5d1f5
commit 7ee48febf9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/playwright-core/src/web/htmlReport/htmlReport.css
View file

@ -28,6 +28,11 @@ body {
overflow: auto;
color: #616161;
background-color: #f3f3f3;
border-left: 1px solid #dfe1e5;
}
.test-case-column {
border-right: 1px solid #dfe1e5;
}
.tree-item-title {
@ -44,12 +49,7 @@ body {
}
.suite-tree-column .tree-item-title.selected {
background-color: #0060c0;
color: white;
}
.suite-tree-column .tree-item-title.selected * {
color: white !important;
font-weight: bold;
}
.error-message {
@ -89,7 +89,7 @@ body {
flex: auto;
display: flex;
flex-direction: column;
max-width: 600px;
padding: 0 16px;
overflow: auto;
}
@ -212,3 +212,8 @@ video, img {
min-width: 80%;
min-height: 300px;
}
.columns {
max-width: 1280px;
margin: 0 auto;
}

24
packages/playwright-core/src/web/htmlReport/htmlReport.tsx
View file

@ -23,7 +23,7 @@ import { TabbedPane } from '../traceViewer/ui/tabbedPane';
import { msToString } from '../uiUtils';
import type { ProjectTreeItem, SuiteTreeItem, TestCase, TestResult, TestStep, TestTreeItem, Location, TestFile, Stats, TestAttachment } from '@playwright/test/src/reporters/html';
type Filter = 'Failing' | 'All';
type Filter = 'failing' | 'all';
type TestId = {
fileId: string;
@ -46,22 +46,18 @@ export const Report: React.FC = () => {
}
})();
}, []);
const [filter, setFilter] = React.useState<Filter>('Failing');
const [filter, setFilter] = React.useState<Filter>('failing');
return <div className='hbox'>
return <div className='hbox columns'>
<SplitView sidebarSize={300} orientation='horizontal' sidebarIsFirst={true}>
<TestCaseView key={testId?.testId} testId={testId}></TestCaseView>
<div className='suite-tree-column'>
<div className='tab-strip'>{
(['Failing', 'All'] as Filter[]).map(item => {
const selected = item === filter;
return <div key={item} className={'tab-element' + (selected ? ' selected' : '')} onClick={e => {
setFilter(item);
}}>{item}</div>;
})
}</div>
{!fetchError && filter === 'All' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
{!fetchError && filter === 'Failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
<div className='tab-strip'>
<div key='all' title='All tests' className={'tab-element' + ('all' === filter ? ' selected' : '')} onClick={() => setFilter('all')}>All</div>
<div key='failing' title='Failing tests' className={'tab-element' + ('failing' === filter ? ' selected' : '')} onClick={() => setFilter('failing')}>Failing</div>
</div>
{!fetchError && filter === 'all' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
{!fetchError && filter === 'failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
</div>
</SplitView>
</div>;
@ -92,7 +88,7 @@ const SuiteTreeItemView: React.FC<{
depth: number,
}> = ({ suite, testId, setTestId, failingOnly, depth }) => {
return <TreeItem title={<div className='hbox'>
<div className='tree-text' title={suite.title}>{suite.title}</div>
<div className='tree-text' title={suite.title}>{suite.title || '<untitled>'}</div>
<div style={{ flex: 'auto' }}></div>
<StatsView stats={suite.stats}></StatsView>
</div>