Message: Ensure spread value is always an array (bugfix)

or else simple FormattedText was output as individual characters
(`“t””h””i””s”`). Added some test to prevent this as well as ensuring
the proper structure of Replaced Elements.

Borrowed alwaysArray from Globalizejs.

Ref globalizejs#76

Signed-off-by: Frédéric Miserey <[email protected]>

Author: Frédéric Miserey

src/generator.js

@@ -1,6 +1,7 @@
 import reactCreateClass from "./react-create-class";
 import React from "react";
 import Globalize from "globalize";
+import alwaysArray from "./util/always-array";
 
 var commonPropNames = ["elements", "locale"];
 
@@ -45,7 +46,7 @@ function generator(fn, localPropNames, options) {
 
             beforeFormat.call(this, props);
             var formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues);
-            this.value = afterFormat.call(this, formattedValue);
+            this.value = alwaysArray(afterFormat.call(this, formattedValue));
         },
         render: function() {
             return React.DOM.span(this.domProps, this.value);

src/util/always-array.js

@@ -0,0 +1,3 @@
+export default function alwaysArray(stringOrArray) {
+    return Array.isArray(stringOrArray) ? stringOrArray : stringOrArray ? [stringOrArray] : [];
+}

test/formatMessage.spec.js

@@ -51,6 +51,11 @@ Globalize.loadMessages({
             expect(wrapper.text()).to.equal("Hi");
         });
 
+        it("outputs strings not as an array of characters", () => {
+            const wrapper = shallow(<FormatMessage>Hi</FormatMessage>);
+            expect(wrapper.children().getElements().length).to.equal(1);
+        });
+
         it("resolves path and prints 'Hi'", () => {
             const wrapper = shallow(<FormatMessage path="salutations/hi" />);
             expect(wrapper.text()).to.equal("Hi");
@@ -64,10 +69,12 @@ Globalize.loadMessages({
         it("properly replaces elements", () => {
             const wrapper = shallow(<FormatMessage path="elements/rglink" elements={{reactGlobalizeLink: <a href="https://github.com/jquery-support/react-globalize"></a>}} />);
             expect(wrapper.html()).to.equal("<span>For more information, see <a href=\"https://github.com/jquery-support/react-globalize\">React Globalize</a></span>");
+            expect(wrapper.children().getElements().length).to.equal(2);
+            expect(wrapper.children().get(1).type).to.equal("a");
         });
 
         it("uses proper gender inflection", () => {
-            const wrapper = shallow(<FormatMessage path="party" variables={{guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"other"}} />);
+            const wrapper = shallow(<FormatMessage path="party" variables={{guest: "Mozart", guestGender: "male", host: "Beethoven", hostGender: "other"}} />);
             expect(wrapper.text()).to.equal("Beethoven invites Mozart to their party");
         });