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

refactor: plumb gitcommitinfo with context

Browse source
This commit is contained in:
Simon Knott 2025-02-06 12:03:17 +01:00
parent bc8d6ce344
commit 30cde54483
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
3 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,12 +23,15 @@ import type { Metadata } from '@playwright/test';
import type { GitCommitInfo } from '@testIsomorphic/types'; import type { GitCommitInfo } from '@testIsomorphic/types';
import { CopyToClipboardContainer } from './copyToClipboard'; import { CopyToClipboardContainer } from './copyToClipboard';
import { linkifyText } from '@web/renderUtils'; import { linkifyText } from '@web/renderUtils';
import { GitCommitInfoContext } from './reportView';
type MetadataEntries = [string, unknown][]; type MetadataEntries = [string, unknown][];
export function filterMetadata(metadata: Metadata): MetadataEntries { export function filterMetadata(metadata: Metadata): { gitCommitInfo?: GitCommitInfo, metadataEntries: MetadataEntries } {
// TODO: do not plumb actualWorkers through metadata. return {
return Object.entries(metadata).filter(([key]) => key !== 'actualWorkers'); gitCommitInfo: metadata['git.commit.info'],
metadataEntries: Object.entries(metadata).filter(([key]) => key !== 'git.commit.info' && key !== 'actualWorkers') // TODO: do not plumb actualWorkers through metadata.
};
} }
class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> { class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
@ -61,9 +64,8 @@ export const MetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ m
return <ErrorBoundary><InnerMetadataView metadataEntries={metadataEntries}/></ErrorBoundary>; return <ErrorBoundary><InnerMetadataView metadataEntries={metadataEntries}/></ErrorBoundary>;
}; };
const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => { const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries: entries }) => {
const gitCommitInfo = metadataEntries.find(([key]) => key === 'git.commit.info')?.[1] as GitCommitInfo | undefined; const gitCommitInfo = React.useContext(GitCommitInfoContext);
const entries = metadataEntries.filter(([key]) => key !== 'git.commit.info');
if (!gitCommitInfo && !entries.length) if (!gitCommitInfo && !entries.length)
return null; return null;
return <div className='metadata-view'> return <div className='metadata-view'>

10
packages/html-reporter/src/reportView.tsx
View file

@ -26,6 +26,10 @@ import './reportView.css';
import { TestCaseView } from './testCaseView'; import { TestCaseView } from './testCaseView';
import { TestFilesHeader, TestFilesView } from './testFilesView'; import { TestFilesHeader, TestFilesView } from './testFilesView';
import './theme.css'; import './theme.css';
import { filterMetadata } from './metadataView';
import type { GitCommitInfo } from '@playwright/isomorphic/types';
export const GitCommitInfoContext = React.createContext<GitCommitInfo | undefined>(undefined);
declare global { declare global {
interface Window { interface Window {
@ -50,6 +54,8 @@ export const ReportView: React.FC<{
const [filterText, setFilterText] = React.useState(searchParams.get('q') || ''); const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
const [metadataVisible, setMetadataVisible] = React.useState(false); const [metadataVisible, setMetadataVisible] = React.useState(false);
const gitCommitInfo = React.useMemo(() => filterMetadata(report?.json().metadata || {}).gitCommitInfo, [report]);
const testIdToFileIdMap = React.useMemo(() => { const testIdToFileIdMap = React.useMemo(() => {
const map = new Map<string, string>(); const map = new Map<string, string>();
for (const file of report?.json().files || []) { for (const file of report?.json().files || []) {
@ -72,7 +78,7 @@ export const ReportView: React.FC<{
return result; return result;
}, [report, filter]); }, [report, filter]);
return <div className='htmlreport vbox px-4 pb-4'> return <MetadataContext.Provider value={gitCommitInfo}><div className='htmlreport vbox px-4 pb-4'>
<main> <main>
{report?.json() && <HeaderView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>} {report?.json() && <HeaderView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
<Route predicate={testFilesRoutePredicate}> <Route predicate={testFilesRoutePredicate}>
@ -88,7 +94,7 @@ export const ReportView: React.FC<{
{!!report && <TestCaseViewLoader report={report} tests={filteredTests.tests} testIdToFileIdMap={testIdToFileIdMap} />} {!!report && <TestCaseViewLoader report={report} tests={filteredTests.tests} testIdToFileIdMap={testIdToFileIdMap} />}
</Route> </Route>
</main> </main>
</div>; </div></MetadataContext.Provider>;
}; };
const TestCaseViewLoader: React.FC<{ const TestCaseViewLoader: React.FC<{

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

@ -69,7 +69,7 @@ export const TestFilesHeader: React.FC<{
}> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => { }> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
if (!report) if (!report)
return; return;
const metadataEntries = filterMetadata(report.metadata || {}); const { metadataEntries } = filterMetadata(report.metadata || {});
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'}> {metadataEntries.length > 0 && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>