Add [data-testid] to items in the execution summary (#391)

Author: davidjgoss

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- Add [data-testid] to items in the execution summary ([#391](https://github.com/cucumber/react-components/pull/391))
 
 ## [23.1.0] - 2025-06-15
 ### Changed

src/components/app/ExecutionSummary.spec.tsx

@@ -52,7 +52,7 @@ describe('<ExecutionSummary/>', () => {
         </EnvelopesProvider>
       )
 
-      expect(screen.getByTestId('setup.phrase')).to.contain.text(
+      expect(screen.getByTestId('cucumber.summary.setup.phrase')).to.contain.text(
         'cucumber-js@8.0.0-rc.1 with node.js@16.13.1 on linux@5.11.0-1022-azure'
       )
     })

src/components/app/ExecutionSummary.tsx

@@ -37,13 +37,13 @@ export const ExecutionSummary: FC = () => {
     <>
       {meta && (
         <HeaderSection>
-          <HeaderItem>
+          <HeaderItem testId="cucumber.summary.setup">
             <HeaderSubItem>
               <ImplementationIcon implementation={meta.implementation} />
               <RuntimeIcon runtime={meta.runtime} />
               <OSIcon os={meta.os} />
             </HeaderSubItem>
-            <span data-testid="setup.phrase">
+            <span data-testid="cucumber.summary.setup.phrase">
               <VersionedTool {...meta.implementation} fallback="unknown tool" />
               <em className={styles.conjunction}> with </em>
               <VersionedTool {...meta.runtime} fallback="unknown runtime" />
@@ -55,7 +55,7 @@ export const ExecutionSummary: FC = () => {
         </HeaderSection>
       )}
       <HeaderSection>
-        <HeaderItem>
+        <HeaderItem testId="cucumber.summary.status">
           <HeaderSubItem>
             <HealthChart />
             <span>
@@ -68,7 +68,7 @@ export const ExecutionSummary: FC = () => {
           </HeaderSubItem>
         </HeaderItem>
         {startDate && (
-          <HeaderItem>
+          <HeaderItem testId="cucumber.summary.timing">
             <HeaderSubItem>
               <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faStopwatch} />
               <span>
@@ -86,14 +86,14 @@ export const ExecutionSummary: FC = () => {
           </HeaderItem>
         )}
         {meta?.ci && (
-          <HeaderItem>
+          <HeaderItem testId="cucumber.summary.ci">
             <HeaderSubItem>
               <CIJobLink ci={meta.ci} />
             </HeaderSubItem>
           </HeaderItem>
         )}
         {meta?.ci?.git && (
-          <HeaderItem>
+          <HeaderItem testId="cucumber.summary.git">
             <HeaderSubItem>
               <CICommitLink ci={meta.ci} />
             </HeaderSubItem>

src/components/app/Header.tsx

@@ -6,8 +6,12 @@ export const HeaderSection: FC<PropsWithChildren> = ({ children }) => {
   return <div className={styles.section}>{children}</div>
 }
 
-export const HeaderItem: FC<PropsWithChildren> = ({ children }) => {
-  return <div className={styles.item}>{children}</div>
+export const HeaderItem: FC<PropsWithChildren<{ testId?: string }>> = ({ testId, children }) => {
+  return (
+    <div data-testid={testId} className={styles.item}>
+      {children}
+    </div>
+  )
 }
 
 export const HeaderSubItem: FC<PropsWithChildren> = ({ children }) => {