use new context API in withLocalization and update its tests

Author: Gregoor

fluent-react/src/provider.js

@@ -87,6 +87,12 @@ LocalizationProvider.propTypes = {
 function isIterable(props, propName, componentName) {
   const prop = props[propName];
 
+  if (!prop) {
+    return new Error(
+      `The ${propName} prop supplied to ${componentName} is required.`
+    )
+  }
+
   if (Symbol.iterator in Object(prop)) {
     return null;
   }

fluent-react/src/with_localization.js

@@ -1,35 +1,26 @@
-import { createElement, Component } from "react";
+import { createElement, useContext } from "react";
+import FluentContext from "./context";
 
 export default function withLocalization(Inner) {
-  class WithLocalization extends Component {
-    /*
-     * Find a translation by `id` and format it to a string using `args`.
-     */
-    getString(id, args, fallback) {
-      const { l10n } = this.context;
-
-      if (!l10n) {
-        return fallback || id;
-      }
-
-      return l10n.getString(id, args, fallback);
-    }
-
-    render() {
-      return createElement(
-        Inner,
-        Object.assign(
-          // getString needs to be re-bound on updates to trigger a re-render
-          { getString: (...args) => this.getString(...args) },
-          this.props
-        )
-      );
-    }
+  function WithDisplay(props) {
+    const { l10n } = useContext(FluentContext);
+    return createElement(
+      Inner,
+      // getString needs to be re-bound on updates to trigger a re-render
+      {
+        getString: (id, args, fallback) => (
+          l10n
+            ? l10n.getString(id, args, fallback)
+            : fallback || id
+        ),
+        ...props
+      },
+    );
   }
 
-  WithLocalization.displayName = `WithLocalization(${displayName(Inner)})`;
+  WithDisplay.displayName = `WithLocalization(${displayName(Inner)})`;
 
-  return WithLocalization;
+  return WithDisplay;
 }
 
 function displayName(component) {

fluent-react/test/exports.test.js

@@ -0,0 +1,18 @@
+import * as FluentReact from '../src/index';
+import LocalizationProvider from '../src/provider';
+import Localized from '../src/localized';
+import withLocalization from '../src/with_localization';
+
+describe('Exports', () => {
+  test('LocalizationProvider', () => {
+    expect(FluentReact.LocalizationProvider).toBe(LocalizationProvider);
+  });
+
+  test('Localized', () => {
+    expect(FluentReact.Localized).toBe(Localized);
+  });
+
+  test('withLocalization', () => {
+    expect(FluentReact.withLocalization).toBe(withLocalization);
+  });
+});

fluent-react/test/exports_test.js

@@ -0,0 +1,46 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { LocalizationProvider } from "../src/index";
+
+describe("LocalizationProvider - validation", () => {
+  let consoleError = console.error;
+
+  beforeAll(() => {
+    console.error = (message) => {
+      if (/(Failed prop type)/.test(message)) {
+        throw new Error(message);
+      }
+    };
+  });
+
+  afterAll(() => {
+    console.error = consoleError;
+  });
+
+  test("valid use", () => {
+    const renderer = TestRenderer.create(
+      <LocalizationProvider bundles={[]}>
+        <div />
+      </LocalizationProvider>
+    );
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`<div />`);
+  });
+
+  test("without a child", () => {
+    expect(() => {
+      TestRenderer.create(<LocalizationProvider bundles={[]} />);
+    }).toThrow(/required/);
+  });
+
+  test("without bundles", () => {
+    expect(() => {
+      TestRenderer.create(<LocalizationProvider />);
+    }).toThrow(/is required/);
+  });
+
+  test("without iterable bundles", () => {
+    expect(() => {
+      TestRenderer.create(<LocalizationProvider bundles={0} />);
+    }).toThrow(/must be an iterable/);
+  });
+});