Add headings to report

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### 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))
-- Add new `<Report/>` component ([#410](https://github.com/cucumber/react-components/pull/410))
+- Add new `<Report/>` component ([#410](https://github.com/cucumber/react-components/pull/410)) ([#411](https://github.com/cucumber/react-components/pull/411))
 - Add new `<TestRunHooks/>` component and include in report ([#408](https://github.com/cucumber/react-components/pull/408))
 
 ### Changed
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### 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 `<NoMatchResult/>` component ([#411](https://github.com/cucumber/react-components/pull/411))
 - 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))
 

src/SearchContext.ts

@@ -7,11 +7,13 @@ export interface SearchState {
 }
 
 export interface SearchContextValue extends SearchState {
+  unchanged: boolean
   update: (changes: Partial<SearchState>) => void
 }
 
 export default React.createContext<SearchContextValue>({
   query: '',
   hideStatuses: [],
+  unchanged: true,
   update: () => {},
 })

src/components/app/ControlledSearchProvider.tsx

@@ -13,9 +13,11 @@ export const ControlledSearchProvider: FC<PropsWithChildren<Props>> = ({
   children,
 }) => {
   const contextValue: SearchContextValue = useMemo(() => {
+    const unchanged = !value.query && !value.hideStatuses.length
     return {
       query: value.query,
       hideStatuses: value.hideStatuses,
+      unchanged,
       update: (newValues: Partial<SearchState>) => {
         onChange({ ...value, ...newValues })
       },

src/components/app/FilteredDocuments.module.scss

@@ -0,0 +1,3 @@
+.empty {
+  font-style: italic;
+}

src/components/app/FilteredDocuments.spec.tsx

@@ -74,7 +74,7 @@ describe('FilteredDocuments', () => {
       )
 
       await waitFor(() => {
-        expect(getByText('No matches found for your query and/or filters')).to.be.visible
+        expect(getByText('No scenarios match your query and/or filters.')).to.be.visible
       })
     })
 
@@ -119,7 +119,7 @@ describe('FilteredDocuments', () => {
             name: 'samples/examples-tables/examples-tables.feature',
           })
         ).not.to.exist
-        expect(getByText('No matches found for your query and/or filters')).to.be.visible
+        expect(getByText('No scenarios match your query and/or filters.')).to.be.visible
       })
     })
   })

src/components/app/FilteredDocuments.tsx

@@ -1,16 +1,20 @@
 import React, { FC } from 'react'
 
 import { useFilteredDocuments } from '../../hooks/useFilteredDocuments.js'
+import styles from './FilteredDocuments.module.scss'
 import { GherkinDocumentList } from './GherkinDocumentList.js'
-import { NoMatchResult } from './NoMatchResult.js'
 
 export const FilteredDocuments: FC = () => {
-  const filtered = useFilteredDocuments()
+  const { results, filtered } = useFilteredDocuments()
 
-  if (!filtered) {
+  if (!results) {
     return null
-  } else if (!filtered.length) {
-    return <NoMatchResult />
+  } else if (!results.length) {
+    return filtered ? (
+      <p className={styles.empty}>No scenarios match your query and/or filters.</p>
+    ) : (
+      <p className={styles.empty}>No scenarios were executed.</p>
+    )
   }
-  return <GherkinDocumentList gherkinDocuments={filtered} preExpand={true} />
+  return <GherkinDocumentList gherkinDocuments={results} preExpand={true} />
 }

src/components/app/Report.module.scss

@@ -3,3 +3,8 @@
     margin-bottom: 1.5em;
   }
 }
+
+.heading {
+  font-size: 1.25em;
+  margin: 1em 0;
+}

src/components/app/Report.tsx

@@ -14,9 +14,11 @@ export const Report: FC = () => {
         <SearchBar />
       </section>
       <section>
+        <h2 className={styles.heading}>Scenarios</h2>
         <FilteredDocuments />
       </section>
       <section>
+        <h2 className={styles.heading}>Hooks</h2>
         <TestRunHooks />
       </section>
     </article>

src/components/app/index.ts

@@ -6,7 +6,6 @@ export * from './FilteredDocuments.js'
 export * from './GherkinDocumentList.js'
 export * from './HighLight.js'
 export * from './InMemorySearchProvider.js'
-export * from './NoMatchResult.js'
 export * from './QueriesProvider.js'
 export * from './Report.js'
 export * from './SearchBar.js'

src/hooks/useFilteredDocuments.ts

@@ -7,8 +7,11 @@ import statuses from '../statuses.js'
 import { useQueries } from './useQueries.js'
 import { useSearch } from './useSearch.js'
 
-export function useFilteredDocuments(): GherkinDocument[] | undefined {
-  const { query, hideStatuses } = useSearch()
+export function useFilteredDocuments(): {
+  results: GherkinDocument[] | undefined
+  filtered: boolean
+} {
+  const { query, hideStatuses, unchanged } = useSearch()
   const { gherkinQuery, cucumberQuery } = useQueries()
   const [searchable, setSearchable] = useState<Searchable>()
   const [results, setResults] = useState<GherkinDocument[]>()
@@ -36,5 +39,8 @@ export function useFilteredDocuments(): GherkinDocument[] | undefined {
       }
     )
   }, [query, hideStatuses, gherkinQuery, cucumberQuery, searchable])
-  return results
+  return {
+    results,
+    filtered: !unchanged,
+  }
 }