add stub flags prop

Author: Brianzchen

src/LdProvider.js

@@ -11,25 +11,41 @@ type SettingsT = {|
 |};
 
 type Props = {|
+  /**
+   * Children to render
+   */
   children?: React.Node,
+  /**
+   * Instance of a Launch Darkly client
+   */
   client?: {
     on: (string, Function) => void,
     allFlags: () => FlagsT,
     waitForInitialization: () => Promise<void>,
     ...
   },
+  /**
+   * Whether the children should render before the client has returns the list of flags
+   */
   async?: boolean,
+  /**
+   * An object list of flags and their respective return value, useful for mock testing
+   */
+  stubbedFlags?: {
+    [key: string]: any,
+  },
 |};
 
 const LdProvider = ({
   children = null,
   client,
   async = false,
+  stubbedFlags,
 }: Props): React.Node => {
-  const [flags, setFlags] = React.useState<FlagsT | void>();
+  const [flags, setFlags] = React.useState<FlagsT | void>(stubbedFlags);
 
   React.useEffect(() => {
-    if (!client) return;
+    if (!client || stubbedFlags) return;
 
     const mapToCurrentFlags = (
       settings: SettingsT,
@@ -50,7 +66,7 @@ const LdProvider = ({
         ...mapToCurrentFlags(settings),
       }));
     });
-  }, [client]);
+  }, [client, stubbedFlags]);
 
   if (!flags && !async) return null;
 

src/LdProvider.spec.js

@@ -112,4 +112,59 @@ describe('useLdFlag', () => {
 
     expect(container.textContent).toBe('');
   });
+
+  it('returns a list of mock flags', () => {
+    const App = () => {
+      const enableTest = useLdFlag('enableTest');
+
+      return (
+        <div data-testid="test">
+          {enableTest ? 'true' : 'false'}
+        </div>
+      );
+    };
+
+    const flags = {
+      enableTest: true,
+      notEnabledTest: false,
+    };
+
+    const { getByTestId } = render(
+      <LdProvider
+        stubbedFlags={flags}
+      >
+        <App />
+      </LdProvider>,
+    );
+
+    expect(getByTestId('test').textContent).toBe('true');
+  });
+
+  it('ignores client when mock flags are passed', () => {
+    const App = () => {
+      const enableTest = useLdFlag('enableTest');
+
+      return (
+        <div data-testid="test">
+          {enableTest ? 'true' : 'false'}
+        </div>
+      );
+    };
+
+    const flags = {
+      enableTest: true,
+      notEnabledTest: false,
+    };
+
+    const { getByTestId } = render(
+      <LdProvider
+        stubbedFlags={flags}
+        client={({}: any)}
+      >
+        <App />
+      </LdProvider>,
+    );
+
+    expect(getByTestId('test').textContent).toBe('true');
+  });
 });