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

Properly space header info items

Browse source
This commit is contained in:
Adam Gastineau 2025-02-10 11:30:33 -08:00
parent 96d365b97e
commit 4853bd806c
3 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/html-reporter/src/metadataView.css
View file

@ -18,6 +18,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
margin-left: 5px; margin-left: 5px;
color: var(--color-fg-default);
} }
.metadata-view { .metadata-view {

7
packages/html-reporter/src/testFileView.css
View file

@ -70,3 +70,10 @@
.test-file-test-status-icon { .test-file-test-status-icon {
flex: none; flex: none;
} }
.test-file-header-info {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-fg-subtle);
}

14
packages/html-reporter/src/testFilesView.tsx
View file

@ -69,14 +69,16 @@ export const TestFilesHeader: React.FC<{
}> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => { }> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
const metadataEntries = useMetadata(); const metadataEntries = useMetadata();
if (!report) if (!report)
return; return null;
return <> return <>
<div className='mx-1' style={{ display: 'flex', marginTop: 10 }}> <div className='mx-1' style={{ display: 'flex', marginTop: 10 }}>
{metadataEntries.length > 0 && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}> <div className='test-file-header-info'>
{metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata {metadataEntries.length > 0 && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
</div>} {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
{report.projectNames.length === 1 && !!report.projectNames[0] && <div data-testid='project-name' style={{ color: 'var(--color-fg-subtle)' }}>Project: {report.projectNames[0]}</div>} </div>}
{filteredStats && <div data-testid='filtered-tests-count' style={{ color: 'var(--color-fg-subtle)', padding: '0 10px' }}>Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}</div>} {report.projectNames.length === 1 && !!report.projectNames[0] && <div data-testid='project-name'>Project: {report.projectNames[0]}</div>}
{filteredStats && <div data-testid='filtered-tests-count'>Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}</div>}
</div>
<div style={{ flex: 'auto' }}></div> <div style={{ flex: 'auto' }}></div>
<div data-testid='overall-time' style={{ color: 'var(--color-fg-subtle)', marginRight: '10px' }}>{report ? new Date(report.startTime).toLocaleString() : ''}</div> <div data-testid='overall-time' style={{ color: 'var(--color-fg-subtle)', marginRight: '10px' }}>{report ? new Date(report.startTime).toLocaleString() : ''}</div>
<div data-testid='overall-duration' style={{ color: 'var(--color-fg-subtle)' }}>Total time: {msToString(report.duration ?? 0)}</div> <div data-testid='overall-duration' style={{ color: 'var(--color-fg-subtle)' }}>Total time: {msToString(report.duration ?? 0)}</div>