diff --git a/packages/html-reporter/src/metadataView.tsx b/packages/html-reporter/src/metadataView.tsx new file mode 100644 index 0000000000..3f027be99c --- /dev/null +++ b/packages/html-reporter/src/metadataView.tsx @@ -0,0 +1,100 @@ +/* + Copyright (c) Microsoft Corporation. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import * as React from 'react'; +import './colors.css'; +import './common.css'; +import * as icons from './icons'; +import { Metadata } from './index'; +import { AutoChip } from './chip'; +import './reportView.css'; +import './theme.css'; + +export const MetadataView: React.FC = metadata => { + return ( + + {metadata['revision.id'] && + {metadata['revision.id'].slice(0, 7)} + } + {metadata['revision.subject'] && metadata['revision.subject'] || 'no subject>'} + {!metadata['revision.subject'] && 'Commit metainfo'} + } initialExpanded={false}> + {metadata['revision.subject'] && + {metadata['revision.subject']}} + /> + } + {metadata['revision.id'] && + {metadata['revision.id']}} + href={metadata['revision.link']} + icon='commit' + /> + } + {(metadata['revision.author'] || metadata['revision.email']) && + {metadata['revision.author']} {metadata['revision.email']} + : (metadata['revision.author'] || metadata['revision.email']) + )!} + icon='person' + /> + } + {metadata['revision.timestamp'] && + + {Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(metadata['revision.timestamp'])} + {Intl.DateTimeFormat(undefined, { timeStyle: 'long' }).format(metadata['revision.timestamp'])} + + } + icon='calendar' + /> + } + {metadata['ci.link'] && + + } + {metadata['generatedAt'] && + + Report generated on {Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(metadata['generatedAt'])} + }> + } + + ); +}; + +const MetadatViewItem: React.FC<{ content: JSX.Element | string; icon?: keyof typeof icons, href?: string, testId?: string }> = ({ content, icon, href, testId }) => { + return ( +
+
+ {icons[icon || 'blank']()} +
+
+ {href ? {content} : content} +
+
+ ); +}; diff --git a/packages/html-reporter/src/reportView.css b/packages/html-reporter/src/reportView.css index 7b987046fd..7937d4c8fd 100644 --- a/packages/html-reporter/src/reportView.css +++ b/packages/html-reporter/src/reportView.css @@ -24,6 +24,7 @@ html, body { body { overflow: auto; + max-width: 1024px; margin: 0 auto; width: 100%; } @@ -32,58 +33,8 @@ body { border-top: 1px solid var(--color-border-default); } -.htmlreport { - gap: 24px; - - display: flex; - flex-direction: row; - justify-content: center; -} - -.htmlreport header { - width: 300px; - order: 2; -} - -.htmlreport main { - max-width: 1024px; - width: 100%; - order: 1; -} - -.metadata-view a { - color: var(--color-accent-fg); - text-decoration: none; -} - -.metadata-view a:hover { - text-decoration: underline; -} - -.metadata-view h1 { - font-size: 16px; - font-weight: 600; - margin-bottom: 16px; - margin-top: 0; - line-height: 1.5; -} - @media only screen and (max-width: 600px) { .report { padding: 0 !important; } } - -@media only screen and (max-width: 900px) { - .htmlreport { - flex-direction: column; - } - - .htmlreport header { - order: 1; - } - - .htmlreport main { - order: 2; - } -} diff --git a/packages/html-reporter/src/reportView.tsx b/packages/html-reporter/src/reportView.tsx index e58afd085f..fbfdd0ec83 100644 --- a/packages/html-reporter/src/reportView.tsx +++ b/packages/html-reporter/src/reportView.tsx @@ -23,11 +23,10 @@ import { HeaderView } from './headerView'; import { Route } from './links'; import { LoadedReport } from './loadedReport'; import './reportView.css'; +import { MetadataView } from './metadataView'; import { TestCaseView } from './testCaseView'; import { TestFilesView } from './testFilesView'; import './theme.css'; -import * as icons from './icons'; -import { Metadata } from './index'; declare global { interface Window { @@ -45,10 +44,9 @@ export const ReportView: React.FC<{ const filter = React.useMemo(() => Filter.parse(filterText), [filterText]); return
- - {report?.json().metadata && }
{report?.json() && } + {report?.json().metadata && } @@ -62,68 +60,6 @@ export const ReportView: React.FC<{
; }; -const MetadataView: React.FC = metadata => { - return ( -
-

{metadata['revision.subject'] || 'Playwright Test Report'}

- {metadata['revision.id'] && - {metadata['revision.id'].slice(0, 7)}} - href={metadata['revision.link']} - icon='commit' - /> - } - {(metadata['revision.author'] || metadata['revision.email']) && - {metadata['revision.author']}
{metadata['revision.email']} - : (metadata['revision.author'] || metadata['revision.email']) - )!} - icon='person' - /> - } - {metadata['revision.timestamp'] && - - {Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(metadata['revision.timestamp'])} -
- {Intl.DateTimeFormat(undefined, { timeStyle: 'long' }).format(metadata['revision.timestamp'])} - - } - icon='calendar' - /> - } - {metadata['ci.link'] && - - } - {metadata['generatedAt'] && -

Report generated on {Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(metadata['generatedAt'])}

- } -
- ); -}; - -const MetadatViewItem: React.FC<{ content: JSX.Element | string; icon: keyof typeof icons, href?: string, testId?: string }> = ({ content, icon, href, testId }) => { - return ( -
-
- {icons[icon]()} -
-
- {href ? {content} : content} -
-
- ); -}; - const TestCaseViewLoader: React.FC<{ report: LoadedReport, }> = ({ report }) => { diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts index 5c4e6fe6bd..977fd26c40 100644 --- a/tests/playwright-test/reporter-html.spec.ts +++ b/tests/playwright-test/reporter-html.spec.ts @@ -703,13 +703,13 @@ test('should include metadata', async ({ runInlineTest, showReport, page }) => { await showReport(); expect(result.exitCode).toBe(0); - const metadata = page.locator('.metadata-view'); - await expect.soft(metadata.locator('data-test-id=revision.id')).toContainText(/^[a-f\d]{7}$/i); - await expect.soft(metadata.locator('data-test-id=revision.id >> a')).toHaveAttribute('href', 'https://playwright.dev/microsoft/playwright-example-for-test/commit/example-sha'); - await expect.soft(metadata.locator('data-test-id=revision.timestamp')).toContainText(/AM|PM/); - await expect.soft(metadata).toContainText('awesome commit message'); - await expect.soft(metadata).toContainText('William'); - await expect.soft(metadata).toContainText('shakespeare@example.local'); - await expect.soft(metadata.locator('text=CI/CD Logs')).toHaveAttribute('href', 'https://playwright.dev/microsoft/playwright-example-for-test/actions/runs/example-run-id'); - await expect.soft(metadata.locator('text=Report generated on')).toContainText(/AM|PM/); + await page.click('text=awesome commit message'); + await expect.soft(page.locator('data-test-id=revision.id')).toContainText(/^[a-f\d]+$/i); + await expect.soft(page.locator('data-test-id=revision.id >> a')).toHaveAttribute('href', 'https://playwright.dev/microsoft/playwright-example-for-test/commit/example-sha'); + await expect.soft(page.locator('data-test-id=revision.timestamp')).toContainText(/AM|PM/); + await expect.soft(page.locator('text=awesome commit message')).toHaveCount(2); + await expect.soft(page.locator('text=William')).toBeVisible(); + await expect.soft(page.locator('text=shakespeare@example.local')).toBeVisible(); + await expect.soft(page.locator('text=CI/CD Logs')).toHaveAttribute('href', 'https://playwright.dev/microsoft/playwright-example-for-test/actions/runs/example-run-id'); + await expect.soft(page.locator('text=Report generated on')).toContainText(/AM|PM/); });