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

fix(html): align prev/next with the group title (#33462)

Browse source
This commit is contained in:
Pavel Feldman 2024-11-06 08:31:55 -08:00 committed by GitHub
parent 2f8a14c6e2
commit 3f8bd36a3a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/html-reporter/src/common.css
View file

@ -46,6 +46,10 @@ svg {
position: relative; position: relative;
} }
.hidden {
visibility: hidden;
}
.d-flex { .d-flex {
display: flex !important; display: flex !important;
} }

3
packages/html-reporter/src/testCaseView.spec.tsx
View file

@ -154,7 +154,7 @@ const resultWithAttachment: TestResult = {
const attachmentLinkRenderingTestCase: TestCase = { const attachmentLinkRenderingTestCase: TestCase = {
testId: 'testid', testId: 'testid',
title: 'My test', title: 'My test',
path: [], path: ['group'],
projectName: 'chromium', projectName: 'chromium',
location: { file: 'test.spec.ts', line: 42, column: 0 }, location: { file: 'test.spec.ts', line: 42, column: 0 },
tags: [], tags: [],
@ -206,6 +206,7 @@ test('should correctly render links in attachment name', async ({ mount }) => {
test('should correctly render prev and next', async ({ mount }) => { test('should correctly render prev and next', async ({ mount }) => {
const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={attachmentLinkRenderingTestCase} prev={testCaseSummary} next={testCaseSummary} run={0} anchor=''></TestCaseView>); const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={attachmentLinkRenderingTestCase} prev={testCaseSummary} next={testCaseSummary} run={0} anchor=''></TestCaseView>);
await expect(component).toMatchAriaSnapshot(` await expect(component).toMatchAriaSnapshot(`
- text: group
- link "« previous" - link "« previous"
- link "next »" - link "next »"
- text: "My test test.spec.ts:42 10ms" - text: "My test test.spec.ts:42 10ms"

11
packages/html-reporter/src/testCaseView.tsx
View file

@ -51,12 +51,13 @@ export const TestCaseView: React.FC<{
}, [test?.annotations]); }, [test?.annotations]);
return <div className='test-case-column vbox'> return <div className='test-case-column vbox'>
<div className='hbox'> {test && <div className='hbox'>
{prev && <Link href={`#?testId=${prev.testId}${filterParam}`}>« previous</Link>} <div className='test-case-path'>{test.path.join(' › ')}</div>
<div style={{ flex: 'auto' }}></div> <div style={{ flex: 'auto' }}></div>
{next && <Link href={`#?testId=${next.testId}${filterParam}`}>next »</Link>} <div className={clsx(!prev && 'hidden')}><Link href={`#?testId=${prev?.testId}${filterParam}`}>« previous</Link></div>
</div> <div style={{ width: 10 }}></div>
{test && <div className='test-case-path'>{test.path.join(' › ')}</div>} <div className={clsx(!next && 'hidden')}><Link href={`#?testId=${next?.testId}${filterParam}`}>next »</Link></div>
</div>}
{test && <div className='test-case-title'>{test?.title}</div>} {test && <div className='test-case-title'>{test?.title}</div>}
{test && <div className='hbox'> {test && <div className='hbox'>
<div className='test-case-location'> <div className='test-case-location'>