test globally nested context

Signed-off-by: Will Chou <[email protected]>

Author: wichopy

packages/react/test/provider.spec.tsx

@@ -1,8 +1,14 @@
-import { EvaluationContext, OpenFeature } from '@openfeature/web-sdk';
+import { EvaluationContext, InMemoryProvider, OpenFeature } from '@openfeature/web-sdk';
 import '@testing-library/jest-dom'; // see: https://testing-library.com/docs/react-testing-library/setup
 import { render, renderHook, screen, waitFor, fireEvent, act } from '@testing-library/react';
 import * as React from 'react';
-import { OpenFeatureProvider, useOpenFeatureClient, useWhenProviderReady, useContextMutator, useStringFlagValue } from '../src';
+import {
+  OpenFeatureProvider,
+  useOpenFeatureClient,
+  useWhenProviderReady,
+  useContextMutator,
+  useStringFlagValue,
+} from '../src';
 import { TestingProvider } from './test.utils';
 
 describe('OpenFeatureProvider', () => {
@@ -139,74 +145,149 @@ describe('OpenFeatureProvider', () => {
         await waitFor(() => expect(screen.queryByText('👍')).toBeInTheDocument(), { timeout: DELAY * 2 });
       });
     });
+  });
+  describe('useMutateContext', () => {
+    const MutateButton = () => {
+      const { setContext } = useContextMutator();
 
-    describe('useMutateContext', () => {
-      const MutateButton = () => {
-        const { mutateContext } = useContextMutator();
-
-        return <button onClick={() => mutateContext({ user: '[email protected]' })}>Update Context</button>;
-      };
-      const TestComponent = ({ name }: { name: string}) => {
-        const flagValue = useStringFlagValue<'hi' | 'bye' | 'aloha'>(SUSPENSE_FLAG_KEY, 'hi');
+      return <button onClick={() => setContext({ user: '[email protected]' })}>Update Context</button>;
+    };
+    const TestComponent = ({ name }: { name: string }) => {
+      const flagValue = useStringFlagValue<'hi' | 'bye' | 'aloha'>(SUSPENSE_FLAG_KEY, 'hi');
 
-        return <div>
+      return (
+        <div>
           <MutateButton />
           <div>{`${name} says ${flagValue}`}</div>
-        </div>;
-      };
+        </div>
+      );
+    };
 
-      it('should update context when a domain is set', async () => {
-        const DOMAIN = 'mutate-context-tests';
-        OpenFeature.setProvider(DOMAIN, suspendingProvider());
-        render(<OpenFeatureProvider domain={DOMAIN}>
+    it('should update context when a domain is set', async () => {
+      const DOMAIN = 'mutate-context-tests';
+      OpenFeature.setProvider(DOMAIN, suspendingProvider());
+      render(
+        <OpenFeatureProvider domain={DOMAIN}>
           <React.Suspense fallback={<div>{FALLBACK}</div>}>
-            <TestComponent name="Will"/>
+            <TestComponent name="Will" />
           </React.Suspense>
-        </OpenFeatureProvider>,);
+        </OpenFeatureProvider>,
+      );
 
-        await waitFor(() => {
-          expect(screen.getByText('Will says hi')).toBeInTheDocument();
-        });
+      await waitFor(() => {
+        expect(screen.getByText('Will says hi')).toBeInTheDocument();
+      });
 
-        act(() => {
-          fireEvent.click(screen.getByText('Update Context'));
-        });
-        await waitFor(() => {
-          expect(screen.getByText('Will says aloha')).toBeInTheDocument();
-        }, { timeout: DELAY * 4 });
+      act(() => {
+        fireEvent.click(screen.getByText('Update Context'));
       });
+      await waitFor(
+        () => {
+          expect(screen.getByText('Will says aloha')).toBeInTheDocument();
+        },
+        { timeout: DELAY * 4 },
+      );
+    });
 
-      it('should update nested contexts', async () => {
-        const DOMAIN1 = 'Wills Domain';
-        const DOMAIN2 = 'Todds Domain';
-        OpenFeature.setProvider(DOMAIN1, suspendingProvider());
-        OpenFeature.setProvider(DOMAIN2, suspendingProvider());
-        render(<OpenFeatureProvider domain={DOMAIN1}>
+    it('should update nested contexts', async () => {
+      const DOMAIN1 = 'Wills Domain';
+      const DOMAIN2 = 'Todds Domain';
+      OpenFeature.setProvider(DOMAIN1, suspendingProvider());
+      OpenFeature.setProvider(DOMAIN2, suspendingProvider());
+      render(
+        <OpenFeatureProvider domain={DOMAIN1}>
           <React.Suspense fallback={<div>{FALLBACK}</div>}>
-            <TestComponent name="Will"/>
+            <TestComponent name="Will" />
             <OpenFeatureProvider domain={DOMAIN2}>
               <React.Suspense fallback={<div>{FALLBACK}</div>}>
-                <TestComponent name="Todd"/>
+                <TestComponent name="Todd" />
               </React.Suspense>
             </OpenFeatureProvider>
           </React.Suspense>
-        </OpenFeatureProvider>,);
+        </OpenFeatureProvider>,
+      );
 
-        await waitFor(() => {
-          expect(screen.getByText('Todd says hi')).toBeInTheDocument();
-        });
+      await waitFor(() => {
+        expect(screen.getByText('Todd says hi')).toBeInTheDocument();
+      });
 
-        act(() => {
-          // Click the Update context button in Todds domain
-          fireEvent.click(screen.getAllByText('Update Context')[1]);
-        });
-        await waitFor(() => {
+      act(() => {
+        // Click the Update context button in Todds domain
+        fireEvent.click(screen.getAllByText('Update Context')[1]);
+      });
+      await waitFor(
+        () => {
           expect(screen.getByText('Todd says aloha')).toBeInTheDocument();
-        }, { timeout: DELAY * 4 });
-        await waitFor(() => {
+        },
+        { timeout: DELAY * 4 },
+      );
+      await waitFor(
+        () => {
           expect(screen.getByText('Will says hi')).toBeInTheDocument();
-        }, { timeout: DELAY * 4 });
+        },
+        { timeout: DELAY * 4 },
+      );
+    });
+
+    it('should update nested global contexts', async () => {
+      const DOMAIN1 = 'Wills Domain';
+      OpenFeature.setProvider(DOMAIN1, suspendingProvider());
+      OpenFeature.setProvider(new InMemoryProvider({
+        globalFlagsHere: {
+          defaultVariant: 'a',
+          variants: {
+            a: 'Smile',
+            b: 'Frown',
+          },
+          disabled: false,
+          contextEvaluator: (ctx: EvaluationContext) => {
+            if (ctx.user === '[email protected]') {
+              return 'b';
+            }
+
+            return 'a';
+          },
+        }
+      }));
+      const GlobalComponent = ({ name }: { name: string }) => {
+        const flagValue = useStringFlagValue<'b' | 'a'>('globalFlagsHere', 'a');
+  
+        return (
+          <div>
+            <MutateButton />
+            <div>{`${name} likes to ${flagValue}`}</div>
+          </div>
+        );
+      };
+      render(
+        <OpenFeatureProvider domain={DOMAIN1}>
+          <React.Suspense fallback={<div>{FALLBACK}</div>}>
+            <TestComponent name="Will" />
+            <OpenFeatureProvider>
+              <React.Suspense fallback={<div>{FALLBACK}</div>}>
+                <GlobalComponent name="Todd" />
+              </React.Suspense>
+            </OpenFeatureProvider>
+          </React.Suspense>
+        </OpenFeatureProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Todd likes to Smile')).toBeInTheDocument();
       });
+
+      act(() => {
+        // Click the Update context button in Todds domain
+        fireEvent.click(screen.getAllByText('Update Context')[1]);
+      });
+      await waitFor(
+        () => {
+          expect(screen.getByText('Todd likes to Frown')).toBeInTheDocument();
+        },
+        { timeout: DELAY * 4 },
+      );
+
+      expect(screen.getByText('Will says hi')).toBeInTheDocument();
     });
   });
 });