Allow Localized with no children (#230)

Author: blushingpenguin

fluent-react/src/localized.js

@@ -1,4 +1,4 @@
-import { isValidElement, cloneElement, Component, Children } from "react";
+import { isValidElement, cloneElement, Component } from "react";
 import PropTypes from "prop-types";
 import { isReactLocalization } from "./localization";
 import VOID_ELEMENTS from "../vendor/voidElementTags";
@@ -79,8 +79,13 @@ export default class Localized extends Component {
 
   render() {
     const { l10n, parseMarkup } = this.context;
-    const { id, attrs, children } = this.props;
-    const elem = Children.only(children);
+    const { id, attrs, children: elem } = this.props;
+
+    // Validate that the child element isn't an array
+    if (Array.isArray(elem)) {
+      throw new Error("<Localized/> expected to receive a single " +
+        "React node child");
+    }
 
     if (!l10n) {
       // Use the wrapped component as fallback.
@@ -101,6 +106,13 @@ export default class Localized extends Component {
       attrs: messageAttrs
     } = l10n.formatCompound(bundle, msg, args);
 
+    // Check if the fallback is a valid element -- if not then it's not
+    // markup (e.g. nothing or a fallback string) so just use the
+    // formatted message value
+    if (!isValidElement(elem)) {
+      return messageValue;
+    }
+
     // The default is to forbid all message attributes. If the attrs prop exists
     // on the Localized instance, only set message attributes which have been
     // explicitly allowed by the developer.
@@ -175,5 +187,5 @@ Localized.contextTypes = {
 };
 
 Localized.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node
 };

fluent-react/test/localized_render_test.js

@@ -262,4 +262,65 @@ foo = { $arg }
     const { args } = format.getCall(0);
     assert.deepEqual(args[1], { arg: 'ARG' });
   });
+
+  test('render with a string fallback and no message returns the fallback',
+  function() {
+    const mcx = new FluentBundle();
+    const l10n = new ReactLocalization([mcx]);
+
+    const wrapper = shallow(
+      <Localized id="foo">
+        String fallback
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'String fallback');
+  });
+
+  test('render with a string fallback returns the message', function() {
+    const mcx = new FluentBundle();
+    const l10n = new ReactLocalization([mcx]);
+    mcx.addMessages(`
+foo = Test message
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo">
+        String fallback
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'Test message');
+  });
+
+  test('render without a fallback returns the message', function() {
+    const mcx = new FluentBundle();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+foo = Message
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo" />,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'Message');
+  });
+
+  test('render without a fallback and no message returns nothing',
+  function() {
+    const mcx = new FluentBundle();
+    const l10n = new ReactLocalization([mcx]);
+
+    const wrapper = shallow(
+      <Localized id="foo" />,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), '');
+  });
 });

fluent-react/test/localized_valid_test.js

@@ -45,13 +45,11 @@ suite('Localized - validation', function() {
   });
 
   test('without a child', function() {
-    function render() {
-      shallow(
-        <Localized />,
-        { context: { l10n: new ReactLocalization([]) } }
-      );
-    }
-    assert.throws(render, /a single React element child/);
+    const wrapper = shallow(
+      <Localized />,
+      { context: { l10n: new ReactLocalization([]) } }
+    );
+    assert.equal(wrapper.length, 1);
   });
 
   test('with multiple children', function() {
@@ -64,7 +62,7 @@ suite('Localized - validation', function() {
         { context: { l10n: new ReactLocalization([]) } }
       );
     }
-    assert.throws(render, /a single React element child/);
+    assert.throws(render, /a single React node child/);
   });
 
   test('without id', function() {