render hook names if present (#137)

* update cck dependency

* render hook name if present

* update CHANGELOG.md

* add overrides for messages dep

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
+- Render hook names if present ([#137](https://github.com/cucumber/cucumber-react/pull/137))
 ### Changed
 - Scenario outline styling - Examples changed to H3 and aligned with steps
 

package-lock.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.17.9",
-    "@cucumber/compatibility-kit": "^9.1.2",
+    "@cucumber/compatibility-kit": "^9.2.0",
     "@cucumber/fake-cucumber": "^15.0.0",
     "@cucumber/gherkin": "^23.0.1",
     "@cucumber/gherkin-streams": "^5.0.1",
@@ -104,6 +104,9 @@
     "ts-jest": "^27.1.4",
     "typescript": "4.6.3"
   },
+  "overrides": {
+    "@cucumber/messages": "^18.0.0"
+  },
   "bugs": {
     "url": "https://github.com/cucumber/cucumber/issues"
   },

package.json

@@ -149,4 +149,39 @@ describe('<HookStep>', () => {
 
     expect(container).toHaveTextContent('Hook failed: MyHooks.doSetup')
   })
+
+  it('renders the name when present for a failed hook', () => {
+    const step: messages.TestStep = {
+      id: '123',
+      hookId: '456',
+    }
+
+    const { container } = render(<HookStep step={step} />, {
+      cucumberQuery: new StubCucumberQuery(
+        [
+          {
+            status: messages.TestStepResultStatus.FAILED,
+            message: 'whoops',
+            duration: {
+              seconds: 1,
+              nanos: 0,
+            },
+          },
+        ],
+        {
+          id: '456',
+          name: 'fancy hook!',
+          sourceReference: {
+            uri: 'features/support/hooks.js',
+            location: {
+              line: 4,
+              column: 6,
+            },
+          },
+        }
+      ),
+    })
+
+    expect(container).toHaveTextContent('Hook "fancy hook!" failed:')
+  })
 })

src/components/gherkin/HookStep.spec.tsx

@@ -29,7 +29,7 @@ const DefaultRenderer: React.FunctionComponent<HookStepProps> = ({ step }) => {
     return (
       <StepItem status={stepResult.status}>
         <Title header="h3" id={step.id}>
-          Hook failed: {location}
+          {hook?.name ? `Hook "${hook.name}"` : 'Hook'} failed: {location}
         </Title>
         {stepResult.message && <ErrorMessage message={stepResult.message} />}
         {attachments.map((attachment, i) => (