fix(reduxProvider): dependency array had bad entry (#73)

* fix(reduxProvider): dependency array had bad entry * test(reduxProvider): add unit tests
americanexpress · Apr 5, 2023 · 69ae888 · 69ae888
1 parent 1ee5942
commit 69ae888
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 2 deletions.
diff --git a/packages/fetchye-redux-provider/__tests__/FetchyeReduxProvider.spec.jsx b/packages/fetchye-redux-provider/__tests__/FetchyeReduxProvider.spec.jsx
@@ -131,4 +131,54 @@ describe('FetchyeReduxProvider', () => {
     // The effect causes a third render that captures val2 as expected
     expect(captureValue).toMatchSnapshot();
   });
+  it('should have loading state change when data is populated', () => {
+    const fakeCacheSelector = jest.fn()
+      .mockReturnValueOnce({
+        data: {},
+        loading: {
+          key1: 'val1',
+        },
+        errors: {},
+      })
+      .mockReturnValueOnce({
+        data: {
+          key1: 'val1',
+        },
+        loading: {},
+        errors: {},
+      });
+    const cache = SimpleCache({ cacheSelector: fakeCacheSelector });
+    const captureValue = jest.fn();
+
+    const Component = ({ id }) => {
+      const { useFetchyeSelector } = useContext(FetchyeContext);
+      const selectedRef = useFetchyeSelector(id);
+      captureValue(selectedRef.current);
+      return <fake-element />;
+    };
+
+    Component.propTypes = {
+      id: PropTypes.string.isRequired,
+    };
+
+    const { rerender } = render(
+      <Provider store={store}>
+        <FetchyeReduxProvider cache={cache}>
+          <Component id="key1" />
+        </FetchyeReduxProvider>
+      </Provider>
+    );
+
+    act(() => {
+      rerender(
+        <Provider store={store}>
+          <FetchyeReduxProvider cache={cache}>
+            <Component id="key1" />
+          </FetchyeReduxProvider>
+        </Provider>
+      );
+    });
+
+    expect(captureValue).toMatchSnapshot();
+  });
 });
diff --git a/packages/fetchye-redux-provider/__tests__/__snapshots__/FetchyeReduxProvider.spec.jsx.snap b/packages/fetchye-redux-provider/__tests__/__snapshots__/FetchyeReduxProvider.spec.jsx.snap
@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`FetchyeReduxProvider should have loading state change when data is populated 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      Object {
+        "data": undefined,
+        "error": undefined,
+        "loading": true,
+      },
+    ],
+    Array [
+      Object {
+        "data": "val1",
+        "error": undefined,
+        "loading": false,
+      },
+    ],
+    Array [
+      Object {
+        "data": undefined,
+        "error": undefined,
+        "loading": false,
+      },
+    ],
+    Array [
+      Object {
+        "data": undefined,
+        "error": undefined,
+        "loading": false,
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
 exports[`FetchyeReduxProvider should return a stable response from useFetchyeSelector that changes properly with a changed input 1`] = `
 [MockFunction] {
   "calls": Array [

diff --git a/packages/fetchye-redux-provider/src/FetchyeReduxProvider.jsx b/packages/fetchye-redux-provider/src/FetchyeReduxProvider.jsx
@@ -31,7 +31,6 @@ const makeUseFetchyeSelector = ({
   const store = useStore();
   const selector = useCallback((state) => getCacheByKey(cacheSelector(state), key), [key]);
   const initialValue = selector(store.getState());
-
   const lastSelectorValue = useRef(initialValue);
   const selectorValue = useRef(initialValue);
 
@@ -47,7 +46,7 @@ const makeUseFetchyeSelector = ({
     }
     checkForUpdates();
     return subscribe(checkForUpdates);
-  }, [selector, store]);
+  }, [selector, store, initialValue]);
 
   return selectorValue;
 };