[feature] add FetchingProvider

- gracefully fetch text resources from remote endpoint

Author: oliverlaz

package.json

@@ -46,6 +46,7 @@
     "react-dom": "^16.8.2",
     "react-scripts": "2.1.5",
     "react-test-renderer": "^16.8.2",
+    "react-testing-library": "^6.0.0",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",

src/index.js

@@ -1,4 +1,5 @@
 /**
  * The Public API.
  */
-export * from './lib/messageSource';
+export { Provider, withMessages, propTypes } from './lib/messageSource';
+export { FetchingProvider } from './lib/FetchingProvider';

src/lib/FetchingProvider.js

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { Provider } from './messageSource';
+
+const identity = x => x;
+
+export class FetchingProvider extends Component {
+  state = {
+    translations: {},
+    fetching: false,
+  };
+
+  mounted = false;
+
+  static propTypes = {
+    /**
+     * The URL which serves the text messages.
+     * Required.
+     */
+    url: PropTypes.string.isRequired,
+
+    /**
+     * Makes the rendering of the sub-tree synchronous.
+     * The components will not render until fetching of the text messages finish.
+     *
+     * Defaults to true.
+     */
+    blocking: PropTypes.bool,
+
+    /**
+     * A function which can transform the response received from GET /props.url
+     * to a suitable format:
+     *
+     * Example:
+     * function transform(response) {
+     *   return response.textMessages;
+     * }
+     */
+    transform: PropTypes.func,
+
+    /**
+     * Invoked when fetching of text messages starts.
+     */
+    onFetchingStart: PropTypes.func,
+
+    /**
+     * Invoked when fetching of text messages finishes.
+     */
+    onFetchingEnd: PropTypes.func,
+
+    /**
+     * Invoked when fetching fails.
+     */
+    onFetchingError: PropTypes.func,
+
+    /**
+     * Children.
+     */
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    blocking: true,
+    transform: identity,
+    onFetchingStart: identity,
+    onFetchingEnd: identity,
+    onFetchingError: identity,
+  };
+
+  componentDidMount() {
+    this.mounted = true;
+    this.fetchResources();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.fetchResources();
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  fetchResources = () => {
+    const { url, transform, onFetchingStart, onFetchingEnd, onFetchingError } = this.props;
+
+    this.setState({ fetching: true }, onFetchingStart);
+    fetch(url)
+      .then(r => r.json())
+      .then(response => {
+        if (this.mounted) {
+          this.setState(
+            {
+              translations: transform(response),
+              fetching: false,
+            },
+            onFetchingEnd,
+          );
+        }
+      })
+      .catch(onFetchingError);
+  };
+
+  render() {
+    const { blocking, children } = this.props;
+    const { translations, fetching } = this.state;
+    const shouldRenderSubtree = !blocking || (blocking && !fetching);
+    return <Provider value={translations}>{shouldRenderSubtree ? children : null}</Provider>;
+  }
+}

src/lib/FetchingProvider.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import * as RTL from 'react-testing-library';
+import { FetchingProvider } from './FetchingProvider';
+import { withMessages } from './messageSource';
+
+describe('FetchingProvider', () => {
+  const Spy = withMessages(props => props.getMessage('hello.world'));
+
+  beforeEach(() => {
+    // mock impl of fetch() API
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            'hello.world': 'Hello world',
+          }),
+      }),
+    );
+  });
+
+  it('fetches text resources and invokes all lifecycles', async () => {
+    const transform = jest.fn(x => x);
+    const onFetchingStart = jest.fn();
+    const onFetchingEnd = jest.fn();
+
+    function TestComponent() {
+      return (
+        <FetchingProvider
+          url="http://any.uri/texts?lang=en"
+          transform={transform}
+          onFetchingStart={onFetchingStart}
+          onFetchingEnd={onFetchingEnd}
+        >
+          <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(transform).toHaveBeenCalled();
+    expect(onFetchingStart).toHaveBeenCalled();
+    expect(onFetchingEnd).toHaveBeenCalled();
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('fetches text resources when url prop changes', async () => {
+    function TestComponent(props) {
+      return (
+        // eslint-disable-next-line react/prop-types
+        <FetchingProvider url={props.url}>
+          <Spy />
+        </FetchingProvider>
+      );
+    }
+
+    const { getByText, rerender } = RTL.render(<TestComponent url="http://any.uri/texts?lang=en" />);
+    await RTL.waitForElement(() => getByText('Hello world'));
+
+    rerender(<TestComponent url="http://any.uri/texts?lang=de" />);
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('invokes onFetchingError lifecycle on network failure', async () => {
+    const onFetchingError = jest.fn();
+    const faultyFetch = jest.fn(() => Promise.reject(new Error('Failure')));
+    global.fetch = faultyFetch;
+
+    RTL.render(<FetchingProvider url="http://any.uri/texts" onFetchingError={onFetchingError} />);
+    await RTL.wait(); // until fetch() rejects
+
+    expect(faultyFetch).toHaveBeenCalledTimes(1);
+    expect(onFetchingError).toHaveBeenCalledTimes(1);
+  });
+});

yarn.lock

@@ -722,6 +722,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.1.5", "@babel/runtime@^7.3.1":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
+  integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -773,6 +780,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@sheerun/mutationobserver-shim@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
+  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.0.0.tgz#5acf239cd2747b1a36ec7e708de05d914cb9b948"
@@ -3047,6 +3059,16 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-testing-library@^3.13.1:
+  version "3.16.8"
+  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.16.8.tgz#26549b249f131a25e4339ebec9fcaa2e7642527f"
+  integrity sha512-VGn2piehGoN9lmZDYd+xoTZwwcS+FoXebvZMw631UhS5LshiLTFNJs9bxRa9W7fVb1cAn9AYKAKZXh67rCDaqw==
+  dependencies:
+    "@babel/runtime" "^7.1.5"
+    "@sheerun/mutationobserver-shim" "^0.3.2"
+    pretty-format "^24.0.0"
+    wait-for-expect "^1.1.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -7729,6 +7751,14 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^24.0.0:
+  version "24.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.0.0.tgz#cb6599fd73ac088e37ed682f61291e4678f48591"
+  integrity sha512-LszZaKG665djUcqg5ZQq+XzezHLKrxsA86ZABTozp+oNhkdqa+tG2dX4qa6ERl5c/sRDrAa3lHmwnvKoP+OG/g==
+  dependencies:
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+
 private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -8067,6 +8097,14 @@ react-test-renderer@^16.8.2:
     react-is "^16.8.2"
     scheduler "^0.13.2"
 
+react-testing-library@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-6.0.0.tgz#81edfcfae8a795525f48685be9bf561df45bb35d"
+  integrity sha512-h0h+YLe4KWptK6HxOMnoNN4ngu3W8isrwDmHjPC5gxc+nOZOCurOvbKVYCvvuAw91jdO7VZSm/5KR7TxKnz0qA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    dom-testing-library "^3.13.1"
+
 react@^16.8.2:
   version "16.8.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.2.tgz#83064596feaa98d9c2857c4deae1848b542c9c0c"
@@ -9750,6 +9788,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+wait-for-expect@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.1.0.tgz#6607375c3f79d32add35cd2c87ce13f351a3d453"
+  integrity sha512-vQDokqxyMyknfX3luCDn16bSaRcOyH6gGuUXMIbxBLeTo6nWuEWYqMTT9a+44FmW8c2m6TRWBdNvBBjA1hwEKg==
+
 walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"