Recast wrappers as providers (#385)

Author: davidjgoss

CHANGELOG.md

@@ -20,11 +20,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Redesigned report header block ([#381](https://github.com/cucumber/react-components/pull/381))
 - BREAKING CHANGE: Remove props from `<StatusesSummary/>`, `<ExecutionSummary/>` and `<SearchBar/>` components, use contexts for state ([#374](https://github.com/cucumber/react-components/pull/374))
 - BREAKING CHANGE: Components and hooks are now exported at the top level, not within `components` and `hooks` objects ([#383](https://github.com/cucumber/react-components/pull/383))
+- BREAKING CHANGE: `<EnvelopesWrapper/>` and `<QueriesWrapper/>` renamed to `<EnvelopesProvider/>` and `<QueriesProvider/>` for clarity ([#385](https://github.com/cucumber/react-components/pull/385))
 
 ### Removed
 - BREAKING CHANGE: Remove `EnvelopesQuery` and its React context ([#374](https://github.com/cucumber/react-components/pull/374))
 - BREAKING CHANGE: Remove defunct `<CucumberReact/>` component ([#382](https://github.com/cucumber/react-components/pull/382))
 - BREAKING CHANGE: Remove `SearchQueryContext`, `<SearchWrapper/>` and related defunct symbols ([#384](https://github.com/cucumber/react-components/pull/384)) 
+- BREAKING CHANGE: Remove `GherkinQueryContext` and `CucumberQueryContext` from entry point ([#385](https://github.com/cucumber/react-components/pull/385))
 
 ## [22.4.1] - 2025-03-30
 ### Fixed

src/acceptance.spec.tsx

@@ -17,7 +17,7 @@ import { pipeline, Writable } from 'stream'
 import { promisify } from 'util'
 
 import { CucumberQueryStream, render } from '../test-utils/index.js'
-import { GherkinDocumentList, QueriesWrapper } from './index.js'
+import { GherkinDocumentList, QueriesProvider } from './index.js'
 
 describe('acceptance tests', function () {
   this.timeout('30s')
@@ -41,9 +41,9 @@ describe('acceptance tests', function () {
           await runCucumber(supportCode, gherkinStream, gherkinQuery, cucumberQueryStream)
 
           const { container } = render(
-            <QueriesWrapper gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
+            <QueriesProvider gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
               <GherkinDocumentList gherkinDocuments={gherkinQuery.getGherkinDocuments()} />
-            </QueriesWrapper>
+            </QueriesProvider>
           )
 
           expect(container.textContent).to.not.eq(null)
@@ -86,9 +86,9 @@ describe('acceptance tests', function () {
         )
 
         const { container } = render(
-          <QueriesWrapper gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
+          <QueriesProvider gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
             <GherkinDocumentList gherkinDocuments={gherkinQuery.getGherkinDocuments()} />
-          </QueriesWrapper>
+          </QueriesProvider>
         )
 
         expect(container.textContent).not.to.eq(null)

src/components/app/EnvelopesWrapper.tsx renamed to src/components/app/EnvelopesProvider.tsx

@@ -1,18 +1,15 @@
 import { Query as GherkinQuery } from '@cucumber/gherkin-utils'
-import * as messages from '@cucumber/messages'
+import { Envelope } from '@cucumber/messages'
 import { Query as CucumberQuery } from '@cucumber/query'
-import React, { FunctionComponent, PropsWithChildren, useMemo } from 'react'
+import React, { FC, PropsWithChildren, useMemo } from 'react'
 
-import { QueriesWrapper } from './QueriesWrapper.js'
+import { QueriesProvider } from './QueriesProvider.js'
 
-interface IProps {
-  envelopes: readonly messages.Envelope[]
+interface Props {
+  envelopes: readonly Envelope[]
 }
 
-export const EnvelopesWrapper: FunctionComponent<PropsWithChildren<IProps>> = ({
-  envelopes,
-  children,
-}) => {
+export const EnvelopesProvider: FC<PropsWithChildren<Props>> = ({ envelopes, children }) => {
   const { gherkinQuery, cucumberQuery } = useMemo(() => {
     const gherkinQuery = new GherkinQuery()
     const cucumberQuery = new CucumberQuery()
@@ -23,8 +20,8 @@ export const EnvelopesWrapper: FunctionComponent<PropsWithChildren<IProps>> = ({
     return { gherkinQuery, cucumberQuery }
   }, [envelopes])
   return (
-    <QueriesWrapper gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
+    <QueriesProvider gherkinQuery={gherkinQuery} cucumberQuery={cucumberQuery}>
       {children}
-    </QueriesWrapper>
+    </QueriesProvider>
   )
 }

src/components/app/ExecutionSummary.spec.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 import sinon from 'sinon'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { ExecutionSummary } from './ExecutionSummary.js'
 
 const meta: Meta = {
@@ -47,9 +47,9 @@ describe('<ExecutionSummary/>', () => {
   describe('meta', () => {
     it('should include a phrase for the setup details', () => {
       render(
-        <EnvelopesWrapper envelopes={envelopes}>
+        <EnvelopesProvider envelopes={envelopes}>
           <ExecutionSummary />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(screen.getByTestId('setup.phrase')).to.contain.text(
@@ -59,9 +59,9 @@ describe('<ExecutionSummary/>', () => {
 
     it('should copy the setup details on request', async () => {
       render(
-        <EnvelopesWrapper envelopes={envelopes}>
+        <EnvelopesProvider envelopes={envelopes}>
           <ExecutionSummary />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       await userEvent.click(screen.getByRole('button', { name: 'Copy' }))
@@ -74,19 +74,19 @@ Platform: [email protected]`)
 
     it('should include the pass rate', () => {
       render(
-        <EnvelopesWrapper envelopes={envelopes}>
+        <EnvelopesProvider envelopes={envelopes}>
           <ExecutionSummary />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(screen.getByText('55.5% passed')).to.be.visible
     })
 
     it('should include the job link', () => {
       render(
-        <EnvelopesWrapper envelopes={envelopes}>
+        <EnvelopesProvider envelopes={envelopes}>
           <ExecutionSummary />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(screen.getByRole('link', { name: 'GitHub Actions' }))
@@ -96,9 +96,9 @@ Platform: [email protected]`)
 
     it('should include the commit link', () => {
       render(
-        <EnvelopesWrapper envelopes={envelopes}>
+        <EnvelopesProvider envelopes={envelopes}>
           <ExecutionSummary />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(screen.getByRole('link', { name: 'b53d820' }))

src/components/app/ExecutionSummary.stories.tsx

@@ -4,7 +4,7 @@ import { Story } from '@ladle/react'
 import React from 'react'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { ExecutionSummary } from './ExecutionSummary.js'
 
 const metaMinimal: messages.Meta = {
@@ -49,9 +49,9 @@ type TemplateArgs = {
 
 const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
-    <EnvelopesWrapper envelopes={envelopes}>
+    <EnvelopesProvider envelopes={envelopes}>
       <ExecutionSummary />
-    </EnvelopesWrapper>
+    </EnvelopesProvider>
   )
 }
 

src/components/app/FilteredResults.spec.tsx

@@ -8,18 +8,18 @@ import attachments from '../../../acceptance/attachments/attachments.feature.js'
 import examplesTables from '../../../acceptance/examples-tables/examples-tables.feature.js'
 import minimal from '../../../acceptance/minimal/minimal.feature.js'
 import targetedRun from '../../../samples/targeted-run.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { FilteredResults } from './FilteredResults.js'
 import { InMemorySearchProvider } from './InMemorySearchProvider.js'
 
 describe('FilteredResults', () => {
   const TestableFilteredResults: FC<{ envelopes: Envelope[] }> = ({ envelopes }) => {
     return (
-      <EnvelopesWrapper envelopes={envelopes}>
+      <EnvelopesProvider envelopes={envelopes}>
         <InMemorySearchProvider>
           <FilteredResults />
         </InMemorySearchProvider>
-      </EnvelopesWrapper>
+      </EnvelopesProvider>
     )
   }
 

src/components/app/FilteredResults.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 import testData from '../../../acceptance/examples-tables/examples-tables.feature.js'
 import targetedRun from '../../../samples/targeted-run.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { FilteredResults } from './FilteredResults.js'
 import { InMemorySearchProvider } from './InMemorySearchProvider.js'
 
@@ -18,11 +18,11 @@ type TemplateArgs = {
 
 const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
-    <EnvelopesWrapper envelopes={envelopes}>
+    <EnvelopesProvider envelopes={envelopes}>
       <InMemorySearchProvider>
         <FilteredResults />
       </InMemorySearchProvider>
-    </EnvelopesWrapper>
+    </EnvelopesProvider>
   )
 }
 

src/components/app/HealthChart.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@ladle/react'
 import React from 'react'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { HealthChart } from './HealthChart.js'
 
 export default {
@@ -16,9 +16,9 @@ type TemplateArgs = {
 
 const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
-    <EnvelopesWrapper envelopes={envelopes}>
+    <EnvelopesProvider envelopes={envelopes}>
       <HealthChart />
-    </EnvelopesWrapper>
+    </EnvelopesProvider>
   )
 }
 

src/components/app/QueriesWrapper.tsx renamed to src/components/app/QueriesProvider.tsx

@@ -1,16 +1,16 @@
 import { Query as GherkinQuery } from '@cucumber/gherkin-utils'
 import { Query as CucumberQuery } from '@cucumber/query'
-import React, { FunctionComponent, PropsWithChildren } from 'react'
+import React, { FC, PropsWithChildren } from 'react'
 
 import CucumberQueryContext from '../../CucumberQueryContext.js'
 import GherkinQueryContext from '../../GherkinQueryContext.js'
 
-interface IProps {
+interface Props {
   cucumberQuery: CucumberQuery
   gherkinQuery: GherkinQuery
 }
 
-export const QueriesWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props) => (
+export const QueriesProvider: FC<PropsWithChildren<Props>> = (props) => (
   <CucumberQueryContext.Provider value={props.cucumberQuery}>
     <GherkinQueryContext.Provider value={props.gherkinQuery}>
       {props.children}

src/components/app/SearchBar.spec.tsx

@@ -9,7 +9,7 @@ import examplesTablesFeature from '../../../acceptance/examples-tables/examples-
 import minimalFeature from '../../../acceptance/minimal/minimal.feature.js'
 import { SearchState } from '../../SearchContext.js'
 import { ControlledSearchProvider } from './ControlledSearchProvider.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { SearchBar } from './SearchBar.js'
 
 const TestableSearchBar: FC<{
@@ -100,29 +100,29 @@ describe('SearchBar', () => {
   describe('filtering by status', () => {
     it('should not show status filters when no statuses', () => {
       const { queryByRole } = render(
-        <EnvelopesWrapper envelopes={[]}>
+        <EnvelopesProvider envelopes={[]}>
           <TestableSearchBar />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(queryByRole('checkbox')).not.to.exist
     })
 
     it('should not show status filters when just one status', () => {
       const { queryByRole } = render(
-        <EnvelopesWrapper envelopes={minimalFeature}>
+        <EnvelopesProvider envelopes={minimalFeature}>
           <TestableSearchBar />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(queryByRole('checkbox')).not.to.exist
     })
 
     it('should show named status filters, all checked by default, when multiple statuses', () => {
       const { getAllByRole, getByRole } = render(
-        <EnvelopesWrapper envelopes={examplesTablesFeature}>
+        <EnvelopesProvider envelopes={examplesTablesFeature}>
           <TestableSearchBar />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(getAllByRole('checkbox')).to.have.length(3)
@@ -137,9 +137,9 @@ describe('SearchBar', () => {
     it('updates the search context with a hidden status when unchecked', async () => {
       const onChange = sinon.fake()
       const { getByRole } = render(
-        <EnvelopesWrapper envelopes={examplesTablesFeature}>
+        <EnvelopesProvider envelopes={examplesTablesFeature}>
           <TestableSearchBar onChange={onChange} />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       await userEvent.click(getByRole('checkbox', { name: 'undefined 2' }))
@@ -152,11 +152,11 @@ describe('SearchBar', () => {
 
     it('should show hidden statuses as unchecked', () => {
       const { getByRole } = render(
-        <EnvelopesWrapper envelopes={examplesTablesFeature}>
+        <EnvelopesProvider envelopes={examplesTablesFeature}>
           <TestableSearchBar
             defaultValue={{ query: '', hideStatuses: [TestStepResultStatus.UNDEFINED] }}
           />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       expect(getByRole('checkbox', { name: 'passed 5' })).to.be.checked
@@ -167,15 +167,15 @@ describe('SearchBar', () => {
     it('updates the search context when a status is rechecked', async () => {
       const onChange = sinon.fake()
       const { getByRole } = render(
-        <EnvelopesWrapper envelopes={examplesTablesFeature}>
+        <EnvelopesProvider envelopes={examplesTablesFeature}>
           <TestableSearchBar
             defaultValue={{
               query: '',
               hideStatuses: [TestStepResultStatus.FAILED, TestStepResultStatus.UNDEFINED],
             }}
             onChange={onChange}
           />
-        </EnvelopesWrapper>
+        </EnvelopesProvider>
       )
 
       await userEvent.click(getByRole('checkbox', { name: 'failed 2' }))

src/components/app/StatusesSummary.spec.tsx

@@ -3,15 +3,15 @@ import { expect } from 'chai'
 import React from 'react'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { StatusesSummary } from './StatusesSummary.js'
 
 describe('StatusesSummary', () => {
   it('should render correctly', () => {
     const { getAllByRole } = render(
-      <EnvelopesWrapper envelopes={examplesTablesFeature}>
+      <EnvelopesProvider envelopes={examplesTablesFeature}>
         <StatusesSummary />
-      </EnvelopesWrapper>
+      </EnvelopesProvider>
     )
 
     expect(getAllByRole('listitem').map((li) => li.textContent)).to.deep.eq([

src/components/app/StatusesSummary.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@ladle/react'
 import React from 'react'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
-import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
 import { StatusesSummary } from './StatusesSummary.js'
 
 export default {
@@ -16,9 +16,9 @@ type TemplateArgs = {
 
 const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
-    <EnvelopesWrapper envelopes={envelopes}>
+    <EnvelopesProvider envelopes={envelopes}>
       <StatusesSummary />
-    </EnvelopesWrapper>
+    </EnvelopesProvider>
   )
 }