Render "No hooks found" upon finding no hooks

Author: badeball

src/components/app/TestRunHooks.module.scss

@@ -1,3 +1,7 @@
+.empty {
+  font-style: italic;
+}
+
 .hooks {
   padding: 0;
   list-style: none;

src/components/app/TestRunHooks.stories.tsx

@@ -2,6 +2,7 @@ import * as messages from '@cucumber/messages'
 import { Story } from '@ladle/react'
 import React from 'react'
 
+import empty from '../../../acceptance/empty/empty.js'
 import globalHooksAfterAllError from '../../../acceptance/global-hooks-afterall-error/global-hooks-afterall-error.js'
 import globalHooksAttachments from '../../../acceptance/global-hooks-attachments/global-hooks-attachments.js'
 import globalHooksBeforeAllError from '../../../acceptance/global-hooks-beforeall-error/global-hooks-beforeall-error.js'
@@ -16,6 +17,7 @@ const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
     <EnvelopesProvider envelopes={envelopes}>
       <FilteredDocuments />
+      <h2>BeforeAll/AfterAll</h2>
       <TestRunHooks />
     </EnvelopesProvider>
   )
@@ -25,6 +27,11 @@ export default {
   title: 'App/TestRunHooksList',
 }
 
+export const EmptyGlobalHooks = Template.bind({})
+EmptyGlobalHooks.args = {
+  envelopes: empty,
+}
+
 export const GlobalHooksWithAttachments = Template.bind({})
 GlobalHooksWithAttachments.args = {
   envelopes: globalHooksAttachments,

src/components/app/TestRunHooks.tsx

@@ -7,6 +7,10 @@ import styles from './TestRunHooks.module.scss'
 export const TestRunHooks: FC = () => {
   const hooks = useTestRunHooks()
 
+  if (hooks.length === 0) {
+    return <p className={styles.empty}>No hooks found.</p>
+  }
+
   return (
     <ol aria-label="RunHooks" className={styles.hooks}>
       {hooks.map(({ testRunHookFinished, hook }) => {