Rewrite search and filtering

Author: davidjgoss

src/SearchContext.ts

@@ -1,4 +1,5 @@
 import type { TestStepResultStatus as Status } from '@cucumber/messages'
+import type { Node } from '@cucumber/tag-expressions'
 import { createContext } from 'react'
 
 export interface SearchState {
@@ -8,12 +9,16 @@ export interface SearchState {
 
 export interface SearchContextValue extends SearchState {
   unchanged: boolean
+  searchTerm: string | undefined
+  tagExpression: Node | undefined
   update: (changes: Partial<SearchState>) => void
 }
 
 export default createContext<SearchContextValue>({
   query: '',
   hideStatuses: [],
   unchanged: true,
+  searchTerm: undefined,
+  tagExpression: undefined,
   update: () => {},
 })

src/components/app/ControlledSearchProvider.tsx

@@ -1,5 +1,7 @@
+import { parse } from '@cucumber/tag-expressions'
 import { type FC, type PropsWithChildren, useMemo } from 'react'
 
+import isTagExpression from '../../isTagExpression.js'
 import SearchQueryContext, {
   type SearchContextValue,
   type SearchState,
@@ -17,10 +19,13 @@ export const ControlledSearchProvider: FC<PropsWithChildren<Props>> = ({
 }) => {
   const contextValue: SearchContextValue = useMemo(() => {
     const unchanged = !value.query && !value.hideStatuses.length
+    const isTag = !!value.query && isTagExpression(value.query)
     return {
       query: value.query,
       hideStatuses: value.hideStatuses,
       unchanged,
+      searchTerm: value.query && !isTag ? value.query : undefined,
+      tagExpression: isTag ? parse(value.query) : undefined,
       update: (newValues: Partial<SearchState>) => {
         onChange({ ...value, ...newValues })
       },

src/components/app/FilteredDocuments.spec.tsx

@@ -7,6 +7,7 @@ import attachments from '../../../acceptance/attachments/attachments.js'
 import examplesTables from '../../../acceptance/examples-tables/examples-tables.js'
 import hooksConditional from '../../../acceptance/hooks-conditional/hooks-conditional.js'
 import retry from '../../../acceptance/retry/retry.js'
+import rules from '../../../acceptance/rules/rules.js'
 import randomOrderRun from '../../../samples/random-order-run.js'
 import targetedRun from '../../../samples/targeted-run.js'
 import { EnvelopesProvider } from './EnvelopesProvider.js'
@@ -94,8 +95,130 @@ describe('FilteredDocuments', () => {
     })
   })
 
+  describe('filtering by tag expression', () => {
+    it('shows no results based on a tag expression that doesnt match anything', async () => {
+      const { getByText } = render(
+        <EnvelopesProvider envelopes={hooksConditional}>
+          <InMemorySearchProvider defaultQuery="@nonexistent">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() => {
+        expect(getByText('No scenarios match your query and/or filters.')).to.be.visible
+      })
+    })
+
+    it('matches based on a single tag', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={hooksConditional}>
+          <InMemorySearchProvider defaultQuery="@fail-before">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() =>
+        getByRole('heading', {
+          name: 'Scenario: A failure in the before hook and a skipped step',
+        })
+      )
+
+      expect(
+        queryByRole('heading', { name: 'Scenario: A failure in the after hook and a passed step' })
+      ).not.to.exist
+      expect(queryByRole('heading', { name: 'Scenario: With an tag, a passed step and hook' })).not
+        .to.exist
+    })
+
+    it('matches based on an or expression', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={hooksConditional}>
+          <InMemorySearchProvider defaultQuery="@fail-before or @fail-after">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() =>
+        getByRole('heading', {
+          name: 'Scenario: A failure in the before hook and a skipped step',
+        })
+      )
+
+      expect(
+        getByRole('heading', { name: 'Scenario: A failure in the after hook and a passed step' })
+      ).to.be.visible
+      expect(queryByRole('heading', { name: 'Scenario: With an tag, a passed step and hook' })).not
+        .to.exist
+    })
+
+    it('matches based on a negated expression', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={hooksConditional}>
+          <InMemorySearchProvider defaultQuery="not @passing-hook">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() =>
+        getByRole('heading', {
+          name: 'Scenario: A failure in the before hook and a skipped step',
+        })
+      )
+
+      expect(
+        getByRole('heading', { name: 'Scenario: A failure in the after hook and a passed step' })
+      ).to.be.visible
+      expect(queryByRole('heading', { name: 'Scenario: With an tag, a passed step and hook' })).not
+        .to.exist
+    })
+
+    it('matches based on tags inherited from rule', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={rules}>
+          <InMemorySearchProvider defaultQuery="@some-tag">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() => getByRole('button', { name: 'samples/rules/rules.feature' }))
+      await userEvent.click(getByRole('button', { name: 'samples/rules/rules.feature' }))
+
+      await waitFor(() => getByRole('heading', { name: 'Example: No chocolates left' }))
+
+      // scenario inside rule with @some-tag is shown
+      expect(getByRole('heading', { name: 'Example: No chocolates left' })).to.be.visible
+      // scenarios inside rule without @some-tag are excluded
+      expect(queryByRole('heading', { name: 'Example: Not enough money' })).not.to.exist
+      expect(queryByRole('heading', { name: 'Example: Enough money' })).not.to.exist
+    })
+
+    it('matches based on tags inherited from examples table', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={examplesTables}>
+          <InMemorySearchProvider defaultQuery="@passing">
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() => getByRole('heading', { name: 'Examples: These are passing' }))
+
+      // examples with @passing tag are shown
+      expect(getByRole('heading', { name: 'Then I should have 7 cucumbers' })).to.be.visible
+      expect(getByRole('heading', { name: 'Then I should have 15 cucumbers' })).to.be.visible
+      // examples with @failing tag (not matching) should not be visible
+      expect(queryByRole('heading', { name: 'When I eat 20 cucumbers' })).not.to.exist
+      expect(queryByRole('heading', { name: 'When I eat 1 cucumbers' })).not.to.exist
+    })
+  })
+
   describe('filtering by status', () => {
-    it('should show a message if we filter all statuses out', async () => {
+    it('shows no results when all statuses are hidden', async () => {
       const { queryByRole, getByText } = render(
         <EnvelopesProvider envelopes={examplesTables}>
           <InMemorySearchProvider
@@ -120,7 +243,7 @@ describe('FilteredDocuments', () => {
       })
     })
 
-    it('shows only passed scenarios when other statuses are hidden', async () => {
+    it('shows only passed scenarios', async () => {
       const { getByRole, getByText, queryByText } = render(
         <EnvelopesProvider envelopes={retry}>
           <InMemorySearchProvider
@@ -150,7 +273,7 @@ describe('FilteredDocuments', () => {
         .exist
     })
 
-    it('shows only failed scenarios when other statuses are hidden', async () => {
+    it('shows only failed scenarios', async () => {
       const { getByRole, queryByRole, getByText } = render(
         <EnvelopesProvider envelopes={retry}>
           <InMemorySearchProvider
@@ -188,7 +311,7 @@ describe('FilteredDocuments', () => {
       ).not.to.exist
     })
 
-    it('shows scenarios matching any of multiple statuses', async () => {
+    it('shows scenarios matching multiple statuses', async () => {
       const { getByRole, getByText } = render(
         <EnvelopesProvider envelopes={retry}>
           <InMemorySearchProvider
@@ -217,6 +340,25 @@ describe('FilteredDocuments', () => {
         .visible
     })
 
+    it('shows only matching examples within a scenario outline', async () => {
+      const { getByRole, queryByRole } = render(
+        <EnvelopesProvider envelopes={examplesTables}>
+          <InMemorySearchProvider defaultHideStatuses={[TestStepResultStatus.FAILED]}>
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() => getByRole('heading', { name: 'Scenario Outline: Eating cucumbers' }))
+
+      // passing examples should be visible
+      expect(getByRole('heading', { name: 'Then I should have 7 cucumbers' })).to.be.visible
+      expect(getByRole('heading', { name: 'Then I should have 15 cucumbers' })).to.be.visible
+      // failing examples should not be visible
+      expect(queryByRole('heading', { name: 'When I eat 20 cucumbers' })).not.to.exist
+      expect(queryByRole('heading', { name: 'When I eat 1 cucumbers' })).not.to.exist
+    })
+
     it('treats scenarios with failed before hooks as failed', async () => {
       const { getByRole, getByText, queryByText } = render(
         <EnvelopesProvider envelopes={hooksConditional}>
@@ -277,4 +419,35 @@ describe('FilteredDocuments', () => {
       expect(queryByText('With an tag, a passed step and hook')).not.to.exist
     })
   })
+
+  describe('searching and filtering together', () => {
+    it('narrows results with both text search and status filter', async () => {
+      const { getByRole, getByText, queryByText } = render(
+        <EnvelopesProvider envelopes={retry}>
+          <InMemorySearchProvider
+            defaultQuery="always"
+            defaultHideStatuses={[TestStepResultStatus.FAILED]}
+          >
+            <FilteredDocuments />
+          </InMemorySearchProvider>
+        </EnvelopesProvider>
+      )
+
+      await waitFor(() => getByRole('button', { name: 'samples/retry/retry.feature' }))
+      await userEvent.click(getByRole('button', { name: 'samples/retry/retry.feature' }))
+
+      await waitFor(() => getByText("Test cases that pass aren't retried"))
+
+      // scenario 1 matches both filters (step has "always", status is PASSED)
+      expect(getByText("Test cases that pass aren't retried")).to.be.visible
+      // scenarios 2 and 3 don't match text search (no "always" in steps)
+      expect(queryByText('Test cases that fail are retried if within the --retry limit')).not.to
+        .exist
+      expect(queryByText('Test cases that fail will continue to retry up to the --retry limit')).not
+        .to.exist
+      // scenario 4 matches text search but not status filter (it's FAILED)
+      expect(queryByText("Test cases won't retry after failing more than the --retry limit")).not.to
+        .exist
+    })
+  })
 })

src/hooks/useFilteredDocuments.ts

@@ -1,53 +1,67 @@
 import { GherkinDocumentWalker, rejectAllFilters } from '@cucumber/gherkin-utils'
-import type { GherkinDocument, TestStepResultStatus } from '@cucumber/messages'
-import type { Query } from '@cucumber/query'
+import type { GherkinDocument } from '@cucumber/messages'
 import { useEffect, useState } from 'react'
 
-import { createSearch, type Searchable } from '../search/index.js'
-import { useQueries } from './useQueries.js'
+import {
+  type FilterableTestCase,
+  useFilteredTestCasesStarted,
+} from './useFilteredTestCasesStarted.js'
+import { useGherkinDocuments } from './useGherkinDocuments.js'
 import { useSearch } from './useSearch.js'
+import { useSearchIndex } from './useSearchIndex.js'
 
 export function useFilteredDocuments(): {
   results: GherkinDocument[] | undefined
   filtered: boolean
 } {
-  const { query, hideStatuses, unchanged } = useSearch()
-  const { gherkinQuery, cucumberQuery } = useQueries()
-  const [searchable, setSearchable] = useState<Searchable>()
+  const { searchTerm, unchanged } = useSearch()
+  const gherkinDocuments = useGherkinDocuments()
+  const searchIndex = useSearchIndex()
+  const filteredTestCases = useFilteredTestCasesStarted()
   const [results, setResults] = useState<GherkinDocument[]>()
   useEffect(() => {
-    createSearch(gherkinQuery).then((created) => setSearchable(created))
-  }, [gherkinQuery])
+    if (!searchTerm) {
+      setResults(filterAndSort(gherkinDocuments, filteredTestCases))
+    }
+  }, [searchTerm, gherkinDocuments, filteredTestCases])
   useEffect(() => {
-    if (!searchable) {
-      return
+    if (searchTerm && searchIndex) {
+      const allowedUris = new Set(filteredTestCases.map(({ pickle }) => pickle.uri))
+      searchIndex.search(searchTerm, allowedUris).then((searched) => {
+        setResults(filterAndSort(searched, filteredTestCases))
+      })
     }
-    searchable.search(query).then((searched) => {
-      const filtered = filterByStatus(searched, hideStatuses, cucumberQuery)
-      const sorted = sortByUri(filtered)
-      setResults(sorted)
-    })
-  }, [query, hideStatuses, cucumberQuery, searchable])
+  }, [searchTerm, searchIndex, filteredTestCases])
   return {
     results,
     filtered: !unchanged,
   }
 }
 
-function filterByStatus(
+function filterAndSort(
   searched: ReadonlyArray<GherkinDocument>,
-  hideStatuses: ReadonlyArray<TestStepResultStatus>,
-  query: Query
+  filteredTestCases: ReadonlyArray<FilterableTestCase>
+) {
+  return sortByUri(applyFilters(searched, filteredTestCases))
+}
+
+/**
+ * Filters Gherkin documents to only include content that is present in executed test cases
+ * after filters for tag expression and status have been applied.
+ *
+ * The GherkinDocumentWalker traverses each document and produces an abridged copy
+ * containing only the scenarios whose IDs appear in our filtered set. Rules, Features and
+ * ultimately GherkinDocuments with no matching scenarios are excluded entirely.
+ */
+function applyFilters(
+  searched: ReadonlyArray<GherkinDocument>,
+  filteredTestCases: ReadonlyArray<FilterableTestCase>
 ): ReadonlyArray<GherkinDocument> {
+  const scenarioIds = new Set(filteredTestCases.flatMap(({ pickle }) => pickle.astNodeIds))
+
   const walker = new GherkinDocumentWalker({
     ...rejectAllFilters,
-    acceptScenario: (scenario) => {
-      return query
-        .findAllTestCaseStarted()
-        .filter((started) => query.findLineageBy(started)?.scenario?.id === scenario.id)
-        .map((started) => query.findMostSevereTestStepResultBy(started)?.status)
-        .some((status) => !hideStatuses.includes(status as TestStepResultStatus))
-    },
+    acceptScenario: (scenario) => scenarioIds.has(scenario.id),
   })
 
   return searched