[Sample]: fix: preload not working (#330)

* fix: all context values noop

* fix: test to throw from context hook

Author: kieran-osgood-shopify

modules/@shopify/checkout-sheet-kit/src/context.tsx

@@ -48,20 +48,9 @@ interface Context {
   version: Maybe<string>;
 }
 
-const noop = () => undefined;
-
-const ShopifyCheckoutSheetContext = React.createContext<Context>({
-  acceleratedCheckoutsAvailable: false,
-  addEventListener: noop,
-  removeEventListeners: noop,
-  setConfig: noop,
-  getConfig: async () => undefined,
-  preload: noop,
-  present: noop,
-  invalidate: noop,
-  dismiss: noop,
-  version: undefined,
-});
+const ShopifyCheckoutSheetContext = React.createContext<Context>(
+  null as unknown as Context,
+);
 
 interface Props {
   features?: Partial<Features>;
@@ -172,7 +161,13 @@ export function ShopifyCheckoutSheetProvider({
 }
 
 export function useShopifyCheckoutSheet() {
-  return React.useContext(ShopifyCheckoutSheetContext);
+  const context = React.useContext(ShopifyCheckoutSheetContext);
+  if (!context) {
+    throw new Error(
+      'useShopifyCheckoutSheet must be used from within a ShopifyCheckoutSheetContext',
+    );
+  }
+  return context;
 }
 
 export default ShopifyCheckoutSheetContext;

modules/@shopify/checkout-sheet-kit/tests/context.test.tsx

@@ -389,27 +389,13 @@ describe('useShopifyCheckoutSheet', () => {
 });
 
 describe('ShopifyCheckoutSheetContext without provider', () => {
-  it('uses default context values when no provider is present', async () => {
-    let hookValue: any;
-    const onHookValue = (value: any) => {
-      hookValue = value;
-    };
-
-    render(<HookTestComponent onHookValue={onHookValue} />);
-
-    const config = await hookValue.getConfig();
-    expect(config).toBeUndefined();
-
-    // Test all the noop functions to ensure they don't throw
-    expect(() => hookValue.addEventListener('close', jest.fn())).not.toThrow();
-    expect(() => hookValue.removeEventListeners('close')).not.toThrow();
-    expect(() =>
-      hookValue.setConfig({colorScheme: ColorScheme.automatic}),
-    ).not.toThrow();
-    expect(() => hookValue.preload('test-url')).not.toThrow();
-    expect(() => hookValue.present('test-url')).not.toThrow();
-    expect(() => hookValue.invalidate()).not.toThrow();
-    expect(() => hookValue.dismiss()).not.toThrow();
-    expect(hookValue.version).toBeUndefined();
+  it('throws error when hook is used without provider', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation();
+    
+    expect(() => {
+      render(<HookTestComponent onHookValue={() => {}} />);
+    }).toThrow('useShopifyCheckoutSheet must be used from within a ShopifyCheckoutSheetContext');
+    
+    errorSpy.mockRestore();
   });
 });

sample/src/App.tsx

@@ -304,8 +304,7 @@ function CartIcon({onPress}: {onPress: () => void}) {
   );
 }
 
-function AppWithNavigation({children}: PropsWithChildren) {
-  const {colorScheme, preference} = useTheme();
+function AppWithCheckoutKit({children}: PropsWithChildren) {
   const {appConfig} = useConfig();
 
   const updatedColors = getColors(
@@ -399,13 +398,20 @@ function AppWithNavigation({children}: PropsWithChildren) {
     <ShopifyCheckoutSheetProvider
       configuration={checkoutKitConfig}
       features={checkoutKitFeatures}>
-      <NavigationContainer theme={getNavigationTheme(colorScheme, preference)}>
-        {children}
-      </NavigationContainer>
+      {children}
     </ShopifyCheckoutSheetProvider>
   );
 }
 
+function AppWithNavigation(props: {children: React.ReactNode}) {
+  const {colorScheme, preference} = useTheme();
+  return (
+    <NavigationContainer theme={getNavigationTheme(colorScheme, preference)}>
+      {props.children}
+    </NavigationContainer>
+  );
+}
+
 function Routes() {
   const {totalQuantity} = useCart();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
@@ -486,11 +492,13 @@ function App() {
   return (
     <ErrorBoundary>
       <AppWithTheme>
-        <AppWithContext>
-          <AppWithNavigation>
-            <Routes />
-          </AppWithNavigation>
-        </AppWithContext>
+        <AppWithCheckoutKit>
+          <AppWithContext>
+            <AppWithNavigation>
+              <Routes />
+            </AppWithNavigation>
+          </AppWithContext>
+        </AppWithCheckoutKit>
       </AppWithTheme>
     </ErrorBoundary>
   );