use client ready state

Author: Tymek

src/FlagProvider.tsx

@@ -39,11 +39,11 @@ const FlagProvider: FC<PropsWithChildren<IFlagProvider>> = ({
   const [flagsReady, setFlagsReady] = React.useState(
     Boolean(
       unleashClient
-        ? (customConfig?.bootstrap && customConfig?.bootstrapOverride !== false) || unleashClient.isReady()
+        ? (customConfig?.bootstrap && customConfig?.bootstrapOverride !== false) || unleashClient.isReady?.()
         : config.bootstrap && config.bootstrapOverride !== false
     )
   );
-  const [flagsError, setFlagsError] = useState(null);
+  const [flagsError, setFlagsError] = useState(client?.getError?.() || null);
 
   useEffect(() => {
     if (!config && !unleashClient) {

src/useFlagStatus.test.tsx

@@ -1,70 +1,80 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import useFlagsStatus from "./useFlagsStatus";
+import useFlagsStatus from './useFlagsStatus';
 import FlagProvider from './FlagProvider';
-import { EVENTS, type UnleashClient } from 'unleash-proxy-client';
+import { EVENTS, UnleashClient } from 'unleash-proxy-client';
 
 const TestComponent = () => {
-    const { flagsReady } = useFlagsStatus();
+  const { flagsReady } = useFlagsStatus();
 
-    return <div>{flagsReady ? 'flagsReady' : 'loading'}</div>;
-}
+  return <div>{flagsReady ? 'flagsReady' : 'loading'}</div>;
+};
 
 const mockClient = {
-    on: vi.fn(),
-    off: vi.fn(),
-    start: vi.fn(),
-    stop: vi.fn(),
-    updateContext: vi.fn(),
-    isEnabled: vi.fn(),
-    getVariant: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
+  start: vi.fn(),
+  stop: vi.fn(),
+  updateContext: vi.fn(),
+  isEnabled: vi.fn(),
+  getVariant: vi.fn(),
+  isReady: vi.fn(),
 } as unknown as UnleashClient;
 
 test('should initialize', async () => {
-    const onEventHandler = (event: string, callback: () => void) => {
-        if (event === 'ready') {
-            callback();
-        }
+  const onEventHandler = (event: string, callback: () => void) => {
+    if (event === 'ready') {
+      callback();
     }
+  };
 
-    mockClient.on = onEventHandler as typeof mockClient.on;
+  mockClient.on = onEventHandler as typeof mockClient.on;
 
-    const ui = (
-        <FlagProvider unleashClient={mockClient}>
-            <TestComponent />
-        </FlagProvider>
-    )
+  const ui = (
+    <FlagProvider unleashClient={mockClient}>
+      <TestComponent />
+    </FlagProvider>
+  );
 
-    render(ui);
+  render(ui);
 
-    await waitFor(() => {
-        expect(screen.queryByText('flagsReady')).toBeInTheDocument();
-    });
+  await waitFor(() => {
+    expect(screen.queryByText('flagsReady')).toBeInTheDocument();
+  });
 });
 
 // https://github.com/Unleash/proxy-client-react/issues/168
 test('should start when already initialized client is passed', async () => {
-    let initialized = false;
-    const onEventHandler = (event: string, callback: () => void) => {
-        if (event === EVENTS.READY && !initialized) {
-            initialized = true;
-            callback();
-        }
-    }
-
-    mockClient.on = onEventHandler as typeof mockClient.on;
-
-    await new Promise((resolve) => mockClient.on(EVENTS.READY, () => resolve));
+  const client = new UnleashClient({
+    url: 'http://localhost:4242/api',
+    fetch: async () =>
+      new Promise((resolve) => {
+        setTimeout(() =>
+          resolve({
+            status: 200,
+            ok: true,
+            json: async () => ({
+              toggles: [],
+            }),
+            headers: new Headers(),
+          })
+        );
+      }),
+    clientKey: '123',
+    appName: 'test',
+  });
+  await client.start();
+  expect(client.isReady()).toBe(true);
 
-    const ui = (
-        <FlagProvider unleashClient={mockClient}>
-            <TestComponent />
-        </FlagProvider>
-    )
+  const ui = (
+    <FlagProvider unleashClient={client}>
+      <TestComponent />
+    </FlagProvider>
+  );
 
-    render(ui);
+  render(ui);
 
-    await waitFor(() => {
-        expect(screen.queryByText('flagsReady')).toBeInTheDocument();
-    });
+  await waitFor(() => {
+    expect(screen.queryByText('flagsReady')).toBeInTheDocument();
+  });
 });