Improve useFilteredTestCases

src/hooks/useFilteredTestCases.spec.tsx

@@ -17,12 +17,8 @@ interface ProviderProps {
   defaultHideStatuses?: readonly TestStepResultStatus[]
 }
 
-function renderAndExtractPickleNames({
-  envelopes,
-  defaultQuery,
-  defaultHideStatuses,
-}: ProviderProps) {
-  return renderHook(() => useFilteredTestCases().map(({ pickle }) => pickle.name), {
+function renderFilteredTestCases({ envelopes, defaultQuery, defaultHideStatuses }: ProviderProps) {
+  return renderHook(useFilteredTestCases, {
     wrapper: ({ children }) => (
       <EnvelopesProvider envelopes={envelopes}>
         <InMemorySearchProvider
@@ -36,6 +32,18 @@ function renderAndExtractPickleNames({
   })
 }
 
+function renderAndExtractPickleNames(props: ProviderProps) {
+  const { result, ...rest } = renderFilteredTestCases(props)
+  return {
+    result: {
+      get current() {
+        return (result.current.results ?? []).map(({ pickle }) => pickle.name)
+      },
+    },
+    ...rest,
+  }
+}
+
 describe('useFilteredTestCases', () => {
   describe('with no filters', () => {
     it('returns a test case for every finished scenario', async () => {
@@ -148,4 +156,51 @@ describe('useFilteredTestCases', () => {
       expect(result.current).to.include('another scenario')
     })
   })
+
+  describe('readiness', () => {
+    it('leaves results undefined while the search is still running', () => {
+      const { result } = renderFilteredTestCases({ envelopes: retry, defaultQuery: 'third' })
+
+      expect(result.current.results).to.equal(undefined)
+    })
+
+    it('populates results once the search resolves', async () => {
+      const { result } = renderFilteredTestCases({ envelopes: retry, defaultQuery: 'third' })
+
+      await waitFor(() => expect(result.current.results).not.to.equal(undefined))
+    })
+  })
+
+  describe('the filtered flag', () => {
+    it('is false when no criteria are active', async () => {
+      const { result } = renderFilteredTestCases({ envelopes: hooksConditional })
+
+      await waitFor(() => expect(result.current.results).to.have.lengthOf(3))
+      expect(result.current.filtered).to.equal(false)
+    })
+
+    it('is true when a tag expression is active', async () => {
+      const { result } = renderFilteredTestCases({
+        envelopes: hooksConditional,
+        defaultQuery: '@fail-before',
+      })
+
+      await waitFor(() => expect(result.current.filtered).to.equal(true))
+    })
+
+    it('is true when a text search is active', async () => {
+      const { result } = renderFilteredTestCases({ envelopes: retry, defaultQuery: 'third' })
+
+      await waitFor(() => expect(result.current.filtered).to.equal(true))
+    })
+
+    it('is true when statuses are hidden', async () => {
+      const { result } = renderFilteredTestCases({
+        envelopes: retry,
+        defaultHideStatuses: [TestStepResultStatus.FAILED],
+      })
+
+      await waitFor(() => expect(result.current.filtered).to.equal(true))
+    })
+  })
 })

src/hooks/useFilteredTestCases.ts

@@ -9,13 +9,16 @@ import { useQueries } from './useQueries.js'
 import { useSearch } from './useSearch.js'
 import { useSearchResult } from './useSearchResult.js'
 
-export function useFilteredTestCases(): ReadonlyArray<ExpandedTestCase<TestCaseFinished>> {
+export function useFilteredTestCases(): {
+  results?: ReadonlyArray<ExpandedTestCase<TestCaseFinished>>
+  filtered: boolean
+} {
   const { cucumberQuery } = useQueries()
   const allTestCasesFinished = useMemo(
     () => cucumberQuery.findAllTestCaseFinished(),
     [cucumberQuery]
   )
-  const { hideStatuses, tagExpression } = useSearch()
+  const { hideStatuses, tagExpression, unchanged } = useSearch()
   const candidates = useMemo(
     () =>
       filterAndExpandTestCaseEvents(cucumberQuery, allTestCasesFinished, {
@@ -25,7 +28,7 @@ export function useFilteredTestCases(): ReadonlyArray<ExpandedTestCase<TestCaseF
     [allTestCasesFinished, cucumberQuery, hideStatuses, tagExpression]
   )
   const searchResult = useSearchResult()
-  const [results, setResults] = useState<ReadonlyArray<ExpandedTestCase<TestCaseFinished>>>([])
+  const [results, setResults] = useState<ReadonlyArray<ExpandedTestCase<TestCaseFinished>>>()
 
   useEffect(() => {
     switch (searchResult.status) {
@@ -43,5 +46,8 @@ export function useFilteredTestCases(): ReadonlyArray<ExpandedTestCase<TestCaseF
     }
   }, [candidates, searchResult])
 
-  return results
+  return {
+    results,
+    filtered: !unchanged,
+  }
 }