refactor(ui-componets): replace useSource with useContext(SourceContext)

sanity-io · Oct 3, 2024 · 5512a2a · 5512a2a
1 parent 16131b1
commit 5512a2a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/packages/sanity/src/ui-components/errorBoundary/ErrorBoundary.tsx b/packages/sanity/src/ui-components/errorBoundary/ErrorBoundary.tsx
@@ -2,9 +2,9 @@ import {
   ErrorBoundary as UIErrorBoundary,
   type ErrorBoundaryProps as UIErrorBoundaryProps,
 } from '@sanity/ui'
-import {useCallback} from 'react'
+import {useCallback, useContext} from 'react'
 
-import {useSource} from '../../core/studio/source'
+import {SourceContext} from '../../_singletons'
 
 export type ErrorBoundaryProps = UIErrorBoundaryProps
 
@@ -14,7 +14,7 @@ export type ErrorBoundaryProps = UIErrorBoundaryProps
  */
 export function ErrorBoundary({onCatch, ...rest}: ErrorBoundaryProps): JSX.Element {
   // Use context, because source could be undefined and we don't want to throw in that case
-  const source = useSource()
+  const source = useContext(SourceContext)
 
   const handleCatch = useCallback(
     ({error: caughtError, info: caughtInfo}: {error: Error; info: React.ErrorInfo}) => {

diff --git a/packages/sanity/src/ui-components/errorBoundary/__test__/ErrorBoundary.test.tsx b/packages/sanity/src/ui-components/errorBoundary/__test__/ErrorBoundary.test.tsx
@@ -4,16 +4,8 @@ import {render} from '@testing-library/react'
 
 import {LocaleProviderBase, usEnglishLocale} from '../../../core/i18n'
 import {prepareI18n} from '../../../core/i18n/i18nConfig'
-import {useSource} from '../../../core/studio/source'
 import {ErrorBoundary} from '../ErrorBoundary'
 
-// Mock dependencies
-jest.mock('../../../core/studio/source', () => ({
-  useSource: jest.fn(),
-}))
-
-const useSourceMock = useSource as jest.Mock
-
 describe('ErrorBoundary', () => {
   beforeAll(() => {
     jest.clearAllMocks()
@@ -45,8 +37,6 @@ describe('ErrorBoundary', () => {
     const onStudioError = jest.fn()
     const onCatch = jest.fn()
 
-    useSourceMock.mockReturnValue({onStudioError})
-
     const ThrowErrorComponent = () => {
       throw new Error('An EXPECTED, testing error occurred!')
     }
@@ -65,16 +55,38 @@ describe('ErrorBoundary', () => {
   it('calls onCatch prop when an error is caught when no onStudioError exists', () => {
     const onCatch = jest.fn()
 
+    const WrapperWithoutError = ({children}: {children: React.ReactNode}) => {
+      const locales = [usEnglishLocale]
+      const {i18next} = prepareI18n({
+        projectId: 'test',
+        dataset: 'test',
+        name: 'test',
+      })
+
+      return (
+        <ThemeProvider theme={studioTheme}>
+          <LocaleProviderBase
+            projectId={'test'}
+            sourceId={'test'}
+            locales={locales}
+            i18next={i18next}
+          >
+            {children}
+          </LocaleProviderBase>
+        </ThemeProvider>
+      )
+    }
+
     const ThrowErrorComponent = () => {
       throw new Error('An EXPECTED, testing error occurred!')
     }
 
     render(
-      <Wrapper>
+      <WrapperWithoutError>
         <ErrorBoundary onCatch={onCatch}>
           <ThrowErrorComponent />
         </ErrorBoundary>
-      </Wrapper>,
+      </WrapperWithoutError>,
     )
 
     expect(onCatch).toHaveBeenCalledTimes(1)