Render a more test case-centric report (#396)

Author: davidjgoss

CHANGELOG.md

@@ -7,8 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- Include duration for each test step ([#396](https://github.com/cucumber/react-components/pull/396))
 - Include pass rate in execution summary ([#397](https://github.com/cucumber/react-components/pull/397))
 
+### Changed
+- Render a more test case-centric report ([#396](https://github.com/cucumber/react-components/pull/396))
+
+### Removed
+- BREAKING CHANGE: Remove defunct scenario/step components `<ExamplesTable/>`, `<GherkinStep/>`, `<GherkinSteps/>`, `<HookStep/>`, `<HookSteps/>`, `<StepItem/>` and their corresponding `CustomRenderingSupport` properties ([#396](https://github.com/cucumber/react-components/pull/396))
+- BREAKING CHANGE: Remove defunct `<UriProvider/>` component and underlying context ([#396](https://github.com/cucumber/react-components/pull/396))
+- BREAKING CHANGE: Remove `<MDG/>` component in favour of using standard Gherkin components for Markdown documents ([#396](https://github.com/cucumber/react-components/pull/396))
+
 ## [23.2.0] - 2025-08-07
 ### Changed
 - Applied URI-based sorting for the displayed Gherkin documents ([#394](https://github.com/cucumber/react-components/pull/394))

generate-fixtures.cjs

@@ -10,16 +10,14 @@ for (const ndjsonPath of glob.sync(
   'node_modules/@cucumber/compatibility-kit/features/**/*.ndjson'
 )) {
   const filename = path.basename(ndjsonPath)
-  const [suiteName, ...suffixes] = filename.split('.')
+  const [suiteName] = filename.split('.')
   const content = fs.readFileSync(ndjsonPath, { encoding: 'utf-8' })
   const asTs = `// Generated file. Do not edit.
 import { Envelope } from '@cucumber/messages'
 
 export default [${content.split('\n').join(',')}] as ReadonlyArray<Envelope>
 `
-  const targetPath = `acceptance/${suiteName}/${suiteName}.${suffixes
-    .filter((s) => s !== 'ndjson')
-    .join('.')}.ts`
+  const targetPath = `acceptance/${suiteName}/${suiteName}.ts`
   fs.mkdirSync(`acceptance/${suiteName}`, { recursive: true })
   fs.writeFileSync(targetPath, asTs, { encoding: 'utf-8' })
 }

package-lock.json

@@ -25,10 +25,10 @@
     "lint": "eslint --max-warnings 0 src test-utils && prettier --check src test-utils"
   },
   "dependencies": {
-    "@cucumber/gherkin-utils": "9.2.0",
-    "@cucumber/messages": "27.2.0",
-    "@cucumber/query": "13.2.0",
-    "@cucumber/tag-expressions": "6.1.2",
+    "@cucumber/gherkin-utils": "10.0.0",
+    "@cucumber/messages": "29.0.1",
+    "@cucumber/query": "14.0.1",
+    "@cucumber/tag-expressions": "6.2.0",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-solid-svg-icons": "6.2.1",
     "@fortawesome/react-fontawesome": "0.2.0",
@@ -55,10 +55,10 @@
     "react-dom": "~18"
   },
   "devDependencies": {
-    "@cucumber/compatibility-kit": "^18.0.2",
-    "@cucumber/fake-cucumber": "^18.0.0",
-    "@cucumber/gherkin": "^32.0.1",
-    "@cucumber/gherkin-streams": "^5.0.1",
+    "@cucumber/compatibility-kit": "^22.0.1",
+    "@cucumber/fake-cucumber": "^18.1.0",
+    "@cucumber/gherkin": "^35.0.0",
+    "@cucumber/gherkin-streams": "^6.0.0",
     "@cucumber/message-streams": "^4.0.1",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.2.0",

package.json

@@ -0,0 +1,73 @@
+import { TestStepResultStatus } from '@cucumber/messages'
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { FC, ReactNode } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel,
+} from 'react-accessible-accordion'
+
+import { StatusIcon } from '../gherkin/index.js'
+import styles from './DocumentAccordion.module.scss'
+
+const idByUri = new Map<string, string>()
+function getIdByUri(uri: string): string {
+  if (!idByUri.has(uri)) {
+    idByUri.set(uri, crypto.randomUUID())
+  }
+  return idByUri.get(uri) as string
+}
+
+interface DocumentAccordionProps {
+  expanded: ReadonlyArray<string>
+  children: ReactNode
+}
+
+interface DocumentAccordionItemProps {
+  status: TestStepResultStatus
+  uri: string
+  children: ReactNode
+}
+
+export const DocumentAccordion: FC<DocumentAccordionProps> = ({ expanded, children }) => {
+  const preExpand = expanded.map((uri) => getIdByUri(uri))
+  return (
+    <Accordion
+      allowMultipleExpanded={true}
+      allowZeroExpanded={true}
+      preExpanded={preExpand}
+      className={styles.accordion}
+    >
+      {children}
+    </Accordion>
+  )
+}
+
+export const DocumentAccordionItem: FC<DocumentAccordionItemProps> = ({
+  status,
+  uri,
+  children,
+}) => {
+  const id = getIdByUri(uri)
+  return (
+    <AccordionItem uuid={id} className={styles.accordionItem}>
+      <AccordionItemHeading>
+        <AccordionItemButton className={styles.accordionButton}>
+          <FontAwesomeIcon
+            className={styles.accordionChevron}
+            aria-hidden="true"
+            icon={faChevronRight}
+          />
+          <span className={styles.icon}>
+            <StatusIcon status={status} />
+          </span>
+          <span>{uri}</span>
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel className={styles.accordionPanel}>{children}</AccordionItemPanel>
+    </AccordionItem>
+  )
+}

screenshots/examples-tables.png

@@ -5,7 +5,7 @@ import { expect } from 'chai'
 import React from 'react'
 import sinon from 'sinon'
 
-import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
+import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.js'
 import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { ExecutionSummary } from './ExecutionSummary.js'
 

src/UriContext.ts

@@ -3,7 +3,7 @@ import { TestRunFinished, TestRunStarted, TimeConversion } from '@cucumber/messa
 import { Story } from '@ladle/react'
 import React from 'react'
 
-import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
+import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.js'
 import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { ExecutionSummary } from './ExecutionSummary.js'