Merge pull request #289 from /issues/286

fix: Remove unexpected comma in server-rendered title
nfl · Jun 19, 2017 · 1af6e44 · 1af6e44
2 parents 312229e + 66b8212
commit 1af6e44
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/HelmetUtils.js b/src/HelmetUtils.js
@@ -300,9 +300,13 @@ const handleClientStateChange = (newState) => {
     });
 };
 
+const flattenArray = (possibleArray) => {
+    return Array.isArray(possibleArray) ? possibleArray.join("") : possibleArray;
+};
+
 const updateTitle = (title, attributes) => {
     if (typeof title !== "undefined" && document.title !== title) {
-        document.title = Array.isArray(title) ? title.join("") : title;
+        document.title = flattenArray(title);
     }
 
     updateAttributes(TAG_NAMES.TITLE, attributes);
@@ -410,9 +414,10 @@ const generateElementAttributesAsString = (attributes) => Object.keys(attributes
 
 const generateTitleAsString = (type, title, attributes, encode) => {
     const attributeString = generateElementAttributesAsString(attributes);
+    const flattenedTitle = flattenArray(title);
     return attributeString
-        ? `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeString}>${encodeSpecialCharacters(title, encode)}</${type}>`
-        : `<${type} ${HELMET_ATTRIBUTE}="true">${encodeSpecialCharacters(title, encode)}</${type}>`;
+        ? `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeString}>${encodeSpecialCharacters(flattenedTitle, encode)}</${type}>`
+        : `<${type} ${HELMET_ATTRIBUTE}="true">${encodeSpecialCharacters(flattenedTitle, encode)}</${type}>`;
 };
 
 const generateTagsAsString = (type, tags, encode) => tags.reduce((str, tag) => {

diff --git a/test/HelmetDeclarativeTest.js b/test/HelmetDeclarativeTest.js
@@ -2167,6 +2167,7 @@ describe("Helmet - Declarative API", () => {
         const stringifiedTitle = `<title ${HELMET_ATTRIBUTE}="true">Dangerous &lt;script&gt; include</title>`;
         const unEncodedStringifiedTitle = `<title ${HELMET_ATTRIBUTE}="true">This is text and & and '.</title>`;
         const stringifiedTitleWithItemprop = `<title ${HELMET_ATTRIBUTE}="true" itemprop="name">Title with Itemprop</title>`;
+        const stringifiedTitleWithTitleExpression = `<title ${HELMET_ATTRIBUTE}="true">Title: Some Great Title</title>`;
         const stringifiedBaseTag = `<base ${HELMET_ATTRIBUTE}="true" target="_blank" href="http://localhost/"/>`;
 
         const stringifiedMetaTags = [
@@ -2568,6 +2569,30 @@ describe("Helmet - Declarative API", () => {
                 .that.equals(stringifiedTitle);
         });
 
+        it("renders title and allows children containing expressions", (done) => {
+            const someValue = "Some Great Title";
+
+            ReactDOM.render(
+                <Helmet>
+                    <title>Title: {someValue}</title>
+                </Helmet>,
+                container
+            );
+
+            const head = Helmet.rewind();
+
+            expect(head.title).to.exist;
+            expect(head.title).to.respondTo("toString");
+
+            requestIdleCallback(() => {
+                expect(head.title.toString())
+                    .to.be.a("string")
+                    .that.equals(stringifiedTitleWithTitleExpression);
+
+                done();
+            });
+        });
+
         it("renders title with itemprop name as string", () => {
             ReactDOM.render(
                 <Helmet>