fix: update flags on context update (#107)

package.json

@@ -18,7 +18,7 @@
     "build-watch": "webpack --watch",
     "prepare": "yarn run build",
     "test": "jest --watch",
-    "test:ci": "CI=true jest --watch=false --watchAll=false --coverage --ci --reporters=default"
+    "test:ci": "CI=true jest --watch=false --watchAll=false --coverage --ci --reporters=default --collectCoverageFrom=src/**/*"
   },
   "keywords": [],
   "author": "",

src/useFlags.test.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks/native';
+import useFlags from './useFlags';
+import type { IToggle } from 'unleash-proxy-client';
+import { act } from 'react-dom/test-utils';
+
+const toggles = [
+  {
+    name: 'string',
+    enabled: true,
+    variant: {
+      name: 'string',
+      enabled: false,
+    },
+    impressionData: false,
+  },
+  {
+    name: 'string',
+    enabled: true,
+    variant: {
+      name: 'string',
+      enabled: false,
+    },
+    impressionData: false,
+  },
+];
+test('should return flags', () => {
+  jest.spyOn(React, 'useContext').mockImplementation(() => ({
+    client: {
+      getAllToggles: () => toggles,
+      on: jest.fn(),
+    },
+  }));
+
+  const { result } = renderHook(() => useFlags());
+  expect(result.current).toEqual(toggles);
+});
+
+test('should update flags on update event', async () => {
+  const updatedToggles: IToggle[] = [];
+  const client = {
+    getAllToggles: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+  };
+  client.getAllToggles.mockReturnValue(toggles);
+
+  jest.spyOn(React, 'useContext').mockImplementation(() => ({
+    client,
+  }));
+
+  const { result } = renderHook(() => useFlags());
+  expect(result.current).toEqual(toggles);
+  client.getAllToggles.mockReturnValue(updatedToggles);
+  await act(async () => {
+    client.on.mock.calls[0][1]();
+  });
+  expect(result.current).toEqual(updatedToggles);
+});

src/useFlags.ts

@@ -1,10 +1,23 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import FlagContext from './FlagContext';
 
 const useFlags = () => {
   const { client } = useContext(FlagContext);
+  const [flags, setFlags] = useState(client.getAllToggles());
 
-  return client.getAllToggles();
+  useEffect(() => {
+    const onUpdate = () => {
+      setFlags(client.getAllToggles());
+    };
+
+    client.on('update', onUpdate);
+
+    return () => {
+      client.off('update', onUpdate);
+    };
+  }, []);
+
+  return flags;
 };
 
 export default useFlags;

src/useUnleashContext.test.ts

@@ -6,8 +6,8 @@ const useContextSpy = jest.spyOn(React, 'useContext');
 const updateContextMock = jest.fn().mockName('updateContext');
 
 test('should return the updateContext function from context', () => {
-  useContextSpy.mockReturnValue({ updateContext : updateContextMock});
+  useContextSpy.mockReturnValue({ updateContext: updateContextMock });
   const { result } = renderHook(() => useUnleashContext());
 
   expect(result.current).toBe(updateContextMock);
-});
+});