fix crash or not rendering when translations not available (#26)

* Default to previous translations in case a faulty translation is fetched or fetching fails.
* Rename tests to reflect current code logic and squash one network failure tests into one that covers everything.

Co-authored-by: Andrej Gjeorgiev <[email protected]>

Author: AndrejGeorgiev

src/lib/FetchingProvider.test.tsx

@@ -64,6 +64,31 @@ describe('FetchingProvider', () => {
     expect(global.fetch).toHaveBeenCalledTimes(1);
   });
 
+  it('fetches text resources and defaults to previous state if result is undefined', async () => {
+    // @ts-ignore
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(undefined),
+      }),
+    );
+
+    function TestComponent() {
+      return (
+        <FetchingProvider url="http://any.uri/texts?lang=en">
+          <Spy />
+        </FetchingProvider>
+      );
+    }
+
+    const { getByText } = RTL.render(<TestComponent />);
+    const spyNode = await RTL.waitForElement(() => getByText('hello.world'));
+
+    expect(spyNode).toBeDefined();
+    expect(spyNode.innerHTML).toBe('hello.world');
+    // @ts-ignore
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+
   it('fetches text resources when url prop changes', async () => {
     const transform = jest.fn(x => x);
     const onFetchingStart = jest.fn();
@@ -98,15 +123,25 @@ describe('FetchingProvider', () => {
     expect(global.fetch).toHaveBeenCalledTimes(2);
   });
 
-  it('invokes onFetchingError lifecycle on network failure', async () => {
+  it('invokes onFetchingError lifecycle and defaults to previous state on network failure', async () => {
     const onFetchingError = jest.fn();
     const faultyFetch = jest.fn(() => Promise.reject(new Error('Failure')));
     // @ts-ignore
     global.fetch = faultyFetch;
 
-    RTL.render(<FetchingProvider url="http://any.uri/texts" onFetchingError={onFetchingError} children={null} />);
-    await RTL.wait(); // until fetch() rejects
+    function TestComponent() {
+      return (
+        <FetchingProvider url="http://your.website.uri/texts?lang=en" onFetchingError={onFetchingError}>
+          <Spy />
+        </FetchingProvider>
+      );
+    }
+
+    const { getByText } = RTL.render(<TestComponent />);
+    const spyNode = await RTL.waitForElement(() => getByText('hello.world'));
 
+    expect(spyNode).toBeDefined();
+    expect(spyNode.innerHTML).toBe('hello.world');
     expect(faultyFetch).toHaveBeenCalledTimes(1);
     expect(onFetchingError).toHaveBeenCalledTimes(1);
   });

src/lib/FetchingProvider.tsx

@@ -39,6 +39,7 @@ export interface FetchingProviderApi {
 
   /**
    * Invoked when fetching fails.
+   * Note that the previous translations or an empty translation map will be used in case translations fails by default.
    */
   onFetchingError?: (e: Error) => void;
 
@@ -85,14 +86,17 @@ export function FetchingProvider(props: FetchingProviderApi) {
       .then(r => r.json())
       .then(response => {
         if (isStillMounted) {
-          setState({
-            translations: transform(response),
+          setState(prevState => ({
+            translations: transform(response) || prevState.translations,
             isFetched: true,
-          });
+          }));
           onFetchingEnd();
         }
       })
-      .catch(onFetchingError);
+      .catch(e => {
+        onFetchingError(e);
+        setState(prevState => ({ ...prevState, isFetched: true }));
+      });
 
     return () => {
       isStillMounted = false;