diff --git a/.eslintrc b/.eslintrc index 76b8a957..dce14a12 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": "nfl", + "extends": ["nfl", "prettier"], "env": { "browser": true, "mocha": true, @@ -8,5 +8,22 @@ "globals": { "expect": false, "sinon": false + }, + "plugins": [ + "prettier" + ], + "rules": { + "prettier/prettier": ["error", { + "printWidth": 80, + "tabWidth": 4, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": false, + "semi": true, + "useTabs": false, + "parser": "babylon", + "jsxBracketSameLine": false + } + ] } } diff --git a/README.md b/README.md index b2e08d8e..fd305078 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ import React from "react"; import {Helmet} from "react-helmet"; class Application extends React.Component { + render () { return (
@@ -28,6 +29,7 @@ class Application extends React.Component { ...
); + } }; ``` @@ -212,6 +214,9 @@ function HTML () { + {locales.map((locale) => { + + })} {/* multiple script elements */} `); + expect(addedTags.scriptTags[0].outerHTML).to.equal( + `` + ); expect(removedTags).to.be.empty; @@ -943,7 +1038,7 @@ describe("Helmet - Declarative API", () => { }); }); - it("calls the deepest defined callback with the deepest state", (done) => { + it("calls the deepest defined callback with the deepest state", done => { const spy = sinon.spy(); ReactDOM.render(
@@ -959,7 +1054,9 @@ describe("Helmet - Declarative API", () => { requestIdleCallback(() => { expect(spy.callCount).to.equal(1); - expect(spy.getCall(0).args[0]).to.contain({title: "Deeper Title"}); + expect(spy.getCall(0).args[0]).to.contain({ + title: "Deeper Title" + }); done(); }); @@ -967,24 +1064,29 @@ describe("Helmet - Declarative API", () => { }); describe("base tag", () => { - it("updates base tag", (done) => { + it("updates base tag", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return tag.getAttribute("href") === "http://mysite.com/"; - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + tag.getAttribute("href") === + "http://mysite.com/" + ); + }); expect(filteredTags.length).to.equal(1); @@ -992,22 +1094,19 @@ describe("Helmet - Declarative API", () => { }); }); - it("clears the base tag if one is not specified", (done) => { + it("clears the base tag if one is not specified", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1017,18 +1116,18 @@ describe("Helmet - Declarative API", () => { }); }); - it("tags without 'href' are not accepted", (done) => { + it("tags without 'href' are not accepted", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1037,54 +1136,58 @@ describe("Helmet - Declarative API", () => { }); }); - it("sets base tag based on deepest nested component", (done) => { + it("sets base tag based on deepest nested component", done => { ReactDOM.render(
- + - +
, container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); - const firstTag = Array.prototype.slice.call(existingTags)[0]; + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); + const firstTag = Array.prototype.slice.call( + existingTags + )[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://mysite.com/public"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://mysite.com/public" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1094,42 +1197,43 @@ describe("Helmet - Declarative API", () => { }); describe("meta tags", () => { - it("updates meta tags", (done) => { + it("updates meta tags", done => { ReactDOM.render( - - - - + + + + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return tag.getAttribute("charset") === "utf-8" || - (tag.getAttribute("name") === "description" && tag.getAttribute("content") === "Test description") || - (tag.getAttribute("http-equiv") === "content-type" && tag.getAttribute("content") === "text/html") || - (tag.getAttribute("itemprop") === "name" && tag.getAttribute("content") === "Test name itemprop"); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + tag.getAttribute("charset") === "utf-8" || + (tag.getAttribute("name") === "description" && + tag.getAttribute("content") === + "Test description") || + (tag.getAttribute("http-equiv") === + "content-type" && + tag.getAttribute("content") === + "text/html") || + (tag.getAttribute("itemprop") === "name" && + tag.getAttribute("content") === + "Test name itemprop") + ); + }); expect(filteredTags.length).to.be.at.least(4); @@ -1137,25 +1241,21 @@ describe("Helmet - Declarative API", () => { }); }); - it("clears all meta tags if none are specified", (done) => { + it("clears all meta tags if none are specified", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1165,7 +1265,7 @@ describe("Helmet - Declarative API", () => { }); }); - it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' are not accepted", (done) => { + it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' are not accepted", done => { ReactDOM.render( @@ -1174,7 +1274,9 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1183,7 +1285,7 @@ describe("Helmet - Declarative API", () => { }); }); - it("sets meta tags based on deepest nested component", (done) => { + it("sets meta tags based on deepest nested component", done => { ReactDOM.render(
@@ -1198,17 +1300,16 @@ describe("Helmet - Declarative API", () => { name="description" content="Inner description" /> - +
, container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1219,40 +1320,49 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.be.equal(3); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("charset")).to.equal("utf-8"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Inner description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[2]") + expect(existingTags).to.have.deep + .property("[2]") .that.is.an.instanceof(Element); expect(thirdTag).to.have.property("getAttribute"); expect(thirdTag.getAttribute("name")).to.equal("keywords"); - expect(thirdTag.getAttribute("content")).to.equal("test,meta,tags"); - expect(thirdTag.outerHTML).to.equal(``); + expect(thirdTag.getAttribute("content")).to.equal( + "test,meta,tags" + ); + expect(thirdTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("allows duplicate meta tags if specified in the same component", (done) => { + it("allows duplicate meta tags if specified in the same component", done => { ReactDOM.render( - + { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1271,27 +1383,39 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Test description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Test description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Duplicate description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Duplicate description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides duplicate meta tags with single meta tag in a nested component", (done) => { + it("overrides duplicate meta tags with single meta tag in a nested component", done => { ReactDOM.render(
@@ -1315,7 +1439,9 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1323,19 +1449,25 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Inner description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides single meta tag with duplicate meta tags in a nested component", (done) => { + it("overrides single meta tag with duplicate meta tags in a nested component", done => { ReactDOM.render(
@@ -1359,7 +1491,9 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1368,27 +1502,39 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Inner description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Inner duplicate description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Inner duplicate description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1410,25 +1558,40 @@ describe("Helmet - Declarative API", () => { }); describe("link tags", () => { - it("updates link tags", (done) => { + it("updates link tags", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return (tag.getAttribute("href") === "http://localhost/style.css" && tag.getAttribute("rel") === "stylesheet" && tag.getAttribute("type") === "text/css") || - (tag.getAttribute("href") === "http://localhost/helmet" && tag.getAttribute("rel") === "canonical"); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + (tag.getAttribute("href") === + "http://localhost/style.css" && + tag.getAttribute("rel") === "stylesheet" && + tag.getAttribute("type") === "text/css") || + (tag.getAttribute("href") === + "http://localhost/helmet" && + tag.getAttribute("rel") === "canonical") + ); + }); expect(filteredTags.length).to.be.at.least(2); @@ -1436,7 +1599,7 @@ describe("Helmet - Declarative API", () => { }); }); - it("clears all link tags if none are specified", (done) => { + it("clears all link tags if none are specified", done => { ReactDOM.render( @@ -1445,14 +1608,15 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); - const existingTags = Array.prototype.slice.call(tagNodes); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); + const existingTags = Array.prototype.slice.call( + tagNodes + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1462,7 +1626,7 @@ describe("Helmet - Declarative API", () => { }); }); - it("tags without 'href' or 'rel' are not accepted, even if they are valid for other tags", (done) => { + it("tags without 'href' or 'rel' are not accepted, even if they are valid for other tags", done => { ReactDOM.render( @@ -1471,7 +1635,9 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); @@ -1481,24 +1647,35 @@ describe("Helmet - Declarative API", () => { }); }); - it("tags 'rel' and 'href' properly use 'rel' as the primary identification for this tag, regardless of ordering", (done) => { + it("tags 'rel' and 'href' properly use 'rel' as the primary identification for this tag, regardless of ordering", done => { ReactDOM.render(
- + - + - +
, container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1506,19 +1683,23 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/newest"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/newest" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("tags with rel='stylesheet' uses the href as the primary identification of the tag, regardless of ordering", (done) => { + it("tags with rel='stylesheet' uses the href as the primary identification of the tag, regardless of ordering", done => { ReactDOM.render(
@@ -1542,7 +1723,9 @@ describe("Helmet - Declarative API", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1551,35 +1734,48 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css"); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/style.css" + ); expect(firstTag.getAttribute("rel")).to.equal("stylesheet"); expect(firstTag.getAttribute("type")).to.equal("text/css"); expect(firstTag.getAttribute("media")).to.equal("all"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("rel")).to.equal("stylesheet"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/inner.css"); + expect(secondTag.getAttribute("rel")).to.equal( + "stylesheet" + ); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/inner.css" + ); expect(secondTag.getAttribute("type")).to.equal("text/css"); expect(secondTag.getAttribute("media")).to.equal("all"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("sets link tags based on deepest nested component", (done) => { + it("sets link tags based on deepest nested component", done => { ReactDOM.render(
- + { /> - + { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1611,49 +1812,66 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.be.at.least(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css"); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/style.css" + ); expect(firstTag.getAttribute("rel")).to.equal("stylesheet"); expect(firstTag.getAttribute("type")).to.equal("text/css"); expect(firstTag.getAttribute("media")).to.equal("all"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[2]") + expect(existingTags).to.have.deep + .property("[2]") .that.is.an.instanceof(Element); expect(thirdTag).to.have.property("getAttribute"); - expect(thirdTag.getAttribute("href")).to.equal("http://localhost/inner.css"); + expect(thirdTag.getAttribute("href")).to.equal( + "http://localhost/inner.css" + ); expect(thirdTag.getAttribute("rel")).to.equal("stylesheet"); expect(thirdTag.getAttribute("type")).to.equal("text/css"); expect(thirdTag.getAttribute("media")).to.equal("all"); - expect(thirdTag.outerHTML).to.equal(``); + expect(thirdTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("allows duplicate link tags if specified in the same component", (done) => { + it("allows duplicate link tags if specified in the same component", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1662,42 +1880,61 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.be.at.least(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides duplicate link tags with a single link tag in a nested component", (done) => { + it("overrides duplicate link tags with a single link tag in a nested component", done => { ReactDOM.render(
- - + + - +
, container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1705,34 +1942,49 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides single link tag with duplicate link tags in a nested component", (done) => { + it("overrides single link tag with duplicate link tags in a nested component", done => { ReactDOM.render(
- + - - + +
, container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1741,50 +1993,67 @@ describe("Helmet - Declarative API", () => { expect(existingTags.length).to.be.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); @@ -1837,7 +2106,7 @@ describe("Helmet - Declarative API", () => { }); describe("script tags", () => { - it("updates script tags", (done) => { + it("updates script tags", done => { const scriptInnerHTML = ` { "@context": "http://schema.org", @@ -1847,23 +2116,45 @@ describe("Helmet - Declarative API", () => { `; ReactDOM.render( - + , container ); requestIdleCallback(() => { - const existingTags = headElement.getElementsByTagName("script"); + const existingTags = headElement.getElementsByTagName( + "script" + ); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return (tag.getAttribute("src") === "http://localhost/test.js" && tag.getAttribute("type") === "text/javascript") || - (tag.getAttribute("src") === "http://localhost/test2.js" && tag.getAttribute("type") === "text/javascript") || - (tag.getAttribute("type") === "application/ld+json" && tag.innerHTML === scriptInnerHTML); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + (tag.getAttribute("src") === + "http://localhost/test.js" && + tag.getAttribute("type") === + "text/javascript") || + (tag.getAttribute("src") === + "http://localhost/test2.js" && + tag.getAttribute("type") === + "text/javascript") || + (tag.getAttribute("type") === + "application/ld+json" && + tag.innerHTML === scriptInnerHTML) + ); + }); expect(filteredTags.length).to.be.at.least(3); @@ -1871,22 +2162,24 @@ describe("Helmet - Declarative API", () => { }); }); - it("clears all scripts tags if none are specified", (done) => { + it("clears all scripts tags if none are specified", done => { ReactDOM.render( - `); + expect(firstTag.getAttribute("src")).to.equal( + "http://localhost/test.js" + ); + expect(firstTag.getAttribute("type")).to.equal( + "text/javascript" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("src")).to.equal("http://localhost/test2.js"); - expect(secondTag.getAttribute("type")).to.equal("text/javascript"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("src")).to.equal( + "http://localhost/test2.js" + ); + expect(secondTag.getAttribute("type")).to.equal( + "text/javascript" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("sets undefined attribute values to empty strings", (done) => { + it("sets undefined attribute values to empty strings", done => { ReactDOM.render( `); + expect(existingTag.outerHTML).to.be + .a("string") + .that.equals( + `` + ); done(); }); }); - it("does not render tag when primary attribute (src) is null", (done) => { + it("does not render tag when primary attribute (src) is null", done => { ReactDOM.render( `); + expect(stringifiedScriptTag).to.be + .a("string") + .that.equals( + `` + ); }); context("renderStatic", () => { @@ -2953,13 +3309,11 @@ describe("Helmet - Declarative API", () => { const titleComponent = head.title.toComponent(); - expect(titleComponent) - .to.be.an("array") - .that.has.length.of(1); + expect(titleComponent).to.be.an("array").that.has.length.of(1); titleComponent.forEach(title => { - expect(title) - .to.be.an("object") + expect(title).to.be + .an("object") .that.contains.property("type", "title"); }); @@ -2969,11 +3323,9 @@ describe("Helmet - Declarative API", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedTitle - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedTitle}
`); }); }); @@ -2996,7 +3348,7 @@ describe("Helmet - Declarative API", () => { ); }); - it("lets you read current state in peek() whether or not a DOM is present", (done) => { + it("lets you read current state in peek() whether or not a DOM is present", done => { ReactDOM.render( Fancy title @@ -3014,42 +3366,50 @@ describe("Helmet - Declarative API", () => { }); }); - it("encodes special characters", (done) => { + it("encodes special characters", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTag = existingTags[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(existingTag).to.have.property("getAttribute"); - expect(existingTag.getAttribute("name")).to.equal("description"); - expect(existingTag.getAttribute("content")).to.equal("This is \"quoted\" text and & and '."); - expect(existingTag.outerHTML).to.equal(``); + expect(existingTag.getAttribute("name")).to.equal( + "description" + ); + expect(existingTag.getAttribute("content")).to.equal( + 'This is "quoted" text and & and \'.' + ); + expect(existingTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not change the DOM if it recevies identical props", (done) => { + it("does not change the DOM if it recevies identical props", done => { const spy = sinon.spy(); ReactDOM.render( - + Test Title , container @@ -3058,13 +3418,8 @@ describe("Helmet - Declarative API", () => { requestIdleCallback(() => { // Re-rendering will pass new props to an already mounted Helmet ReactDOM.render( - - + + Test Title , container @@ -3078,13 +3433,16 @@ describe("Helmet - Declarative API", () => { }); }); - it("does not write the DOM if the client and server are identical", (done) => { + it("does not write the DOM if the client and server are identical", done => { headElement.innerHTML = ` , container - ) - ); + ); - expect(renderInvalid).to.throw(Error, "Helmet expects a string as a child of ) Refer to our API for more information."); + expect(renderInvalid).to.throw( + Error, + "Helmet expects a string as a child of ) Refer to our API for more information." + ); }); - it("handles undefined children", (done) => { + it("handles undefined children", done => { const charSet = undefined; ReactDOM.render( @@ -3297,48 +3672,53 @@ describe("Helmet - Declarative API", () => { }); }); - it("recognizes valid tags regardless of attribute ordering", (done) => { + it("recognizes valid tags regardless of attribute ordering", done => { ReactDOM.render( - + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTag = existingTags[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(existingTag).to.have.property("getAttribute"); - expect(existingTag.getAttribute("name")).to.equal("description"); - expect(existingTag.getAttribute("content")).to.equal("Test Description"); - expect(existingTag.outerHTML).to.equal(``); + expect(existingTag.getAttribute("name")).to.equal( + "description" + ); + expect(existingTag.getAttribute("content")).to.equal( + "Test Description" + ); + expect(existingTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("requestIdleCallback works as expected", (done) => { - requestIdleCallback((cb) => { + it("requestIdleCallback works as expected", done => { + requestIdleCallback(cb => { expect(cb).to.exist; - expect(cb) - .to.have.property("didTimeout") + expect(cb).to.have + .property("didTimeout") .that.is.a("boolean") .that.equals(false); - expect(cb) - .to.have.property("timeRemaining") + expect(cb).to.have + .property("timeRemaining") .that.is.a("function"); const time = cb.timeRemaining(); diff --git a/test/HelmetTest.js b/test/HelmetTest.js index d3b82874..43d02ff2 100644 --- a/test/HelmetTest.js +++ b/test/HelmetTest.js @@ -15,7 +15,8 @@ describe("Helmet", () => { const container = document.createElement("div"); beforeEach(() => { - headElement = headElement || document.head || document.querySelector("head"); + headElement = + headElement || document.head || document.querySelector("head"); // resets DOM after each run headElement.innerHTML = ""; @@ -27,12 +28,9 @@ describe("Helmet", () => { describe("api", () => { describe("title", () => { - it("updates page title", (done) => { + it("updates page title", done => { ReactDOM.render( - , + , container ); @@ -43,7 +41,7 @@ describe("Helmet", () => { }); }); - it("updates page title with multiple children", (done) => { + it("updates page title with multiple children", done => { ReactDOM.render(
@@ -60,7 +58,7 @@ describe("Helmet", () => { }); }); - it("sets title based on deepest nested component", (done) => { + it("sets title based on deepest nested component", done => { ReactDOM.render(
@@ -76,7 +74,7 @@ describe("Helmet", () => { }); }); - it("sets title using deepest nested component with a defined title", (done) => { + it("sets title using deepest nested component with a defined title", done => { ReactDOM.render(
@@ -92,12 +90,14 @@ describe("Helmet", () => { }); }); - it("uses defaultTitle if no title is defined", (done) => { + it("uses defaultTitle if no title is defined", done => { ReactDOM.render( , container ); @@ -109,67 +109,83 @@ describe("Helmet", () => { }); }); - it("uses a titleTemplate if defined", (done) => { + it("uses a titleTemplate if defined", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - expect(document.title).to.equal("This is a Test of the titleTemplate feature"); + expect(document.title).to.equal( + "This is a Test of the titleTemplate feature" + ); done(); }); }); - it("replaces multiple title strings in titleTemplate", (done) => { + it("replaces multiple title strings in titleTemplate", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - expect(document.title).to.equal("This is a Test of the titleTemplate feature. Another Test."); + expect(document.title).to.equal( + "This is a Test of the titleTemplate feature. Another Test." + ); done(); }); }); - it("uses a titleTemplate based on deepest nested component", (done) => { + it("uses a titleTemplate based on deepest nested component", done => { ReactDOM.render(
, container ); requestIdleCallback(() => { - expect(document.title).to.equal("A Second Test using nested titleTemplate attributes"); + expect(document.title).to.equal( + "A Second Test using nested titleTemplate attributes" + ); done(); }); }); - it("merges deepest component title with nearest upstream titleTemplate", (done) => { + it("merges deepest component title with nearest upstream titleTemplate", done => { ReactDOM.render(
, @@ -177,30 +193,35 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - expect(document.title).to.equal("This is a Second Test of the titleTemplate feature"); + expect(document.title).to.equal( + "This is a Second Test of the titleTemplate feature" + ); done(); }); }); - it("renders dollar characters in a title correctly when titleTemplate present", (done) => { + it("renders dollar characters in a title correctly when titleTemplate present", done => { const dollarTitle = "te$t te$$t te$$$t te$$$$t"; ReactDOM.render( - , container ); requestIdleCallback(() => { - expect(document.title).to.equal("This is a te$t te$$t te$$$t te$$$$t"); + expect(document.title).to.equal( + "This is a te$t te$$t te$$$t te$$$$t" + ); done(); }); }); - it("does not encode all characters with HTML character entity equivalents", (done) => { + it("does not encode all characters with HTML character entity equivalents", done => { const chineseTitle = "膣膗 鍆錌雔"; ReactDOM.render( @@ -217,7 +238,7 @@ describe("Helmet", () => { }); }); - it("page title with prop itemprop", (done) => { + it("page title with prop itemprop", done => { ReactDOM.render( { headElement.innerHTML = `Test Title`; }); - it("update title attributes", (done) => { + it("update title attributes", done => { ReactDOM.render( { requestIdleCallback(() => { const titleTag = document.getElementsByTagName("title")[0]; expect(titleTag.getAttribute("itemprop")).to.equal("name"); - expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("itemprop"); + expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "itemprop" + ); done(); }); }); - it("sets attributes based on the deepest nested component", (done) => { + it("sets attributes based on the deepest nested component", done => { ReactDOM.render(
, @@ -283,17 +306,19 @@ describe("Helmet", () => { const titleTag = document.getElementsByTagName("title")[0]; expect(titleTag.getAttribute("lang")).to.equal("ja"); expect(titleTag.getAttribute("hidden")).to.equal(""); - expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang,hidden"); + expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "lang,hidden" + ); done(); }); }); - it("handles valueless attributes", (done) => { + it("handles valueless attributes", done => { ReactDOM.render( , container @@ -302,34 +327,37 @@ describe("Helmet", () => { requestIdleCallback(() => { const titleTag = document.getElementsByTagName("title")[0]; expect(titleTag.getAttribute("hidden")).to.equal(""); - expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("hidden"); + expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "hidden" + ); done(); }); }); - it("clears title attributes that are handled within helmet", (done) => { + it("clears title attributes that are handled within helmet", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const titleTag = document.getElementsByTagName("title")[0]; + const titleTag = document.getElementsByTagName( + "title" + )[0]; expect(titleTag.getAttribute("lang")).to.be.null; expect(titleTag.getAttribute("hidden")).to.be.null; - expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null); + expect( + titleTag.getAttribute(HELMET_ATTRIBUTE) + ).to.equal(null); done(); }); @@ -338,12 +366,12 @@ describe("Helmet", () => { }); describe("html attributes", () => { - it("updates html attributes", (done) => { + it("updates html attributes", done => { ReactDOM.render( , @@ -352,25 +380,29 @@ describe("Helmet", () => { requestIdleCallback(() => { const htmlTag = document.getElementsByTagName("html")[0]; - expect(htmlTag.getAttribute("class")).to.equal("myClassName"); + expect(htmlTag.getAttribute("class")).to.equal( + "myClassName" + ); expect(htmlTag.getAttribute("lang")).to.equal("en"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("class,lang"); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "class,lang" + ); done(); }); }); - it("sets attributes based on the deepest nested component", (done) => { + it("sets attributes based on the deepest nested component", done => { ReactDOM.render(
, @@ -380,17 +412,19 @@ describe("Helmet", () => { requestIdleCallback(() => { const htmlTag = document.getElementsByTagName("html")[0]; expect(htmlTag.getAttribute("lang")).to.equal("ja"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang"); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "lang" + ); done(); }); }); - it("handles valueless attributes", (done) => { + it("handles valueless attributes", done => { ReactDOM.render( , container @@ -399,46 +433,49 @@ describe("Helmet", () => { requestIdleCallback(() => { const htmlTag = document.getElementsByTagName("html")[0]; expect(htmlTag.getAttribute("amp")).to.equal(""); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("amp"); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "amp" + ); done(); }); }); - it("clears html attributes that are handled within helmet", (done) => { + it("clears html attributes that are handled within helmet", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; + const htmlTag = document.getElementsByTagName( + "html" + )[0]; expect(htmlTag.getAttribute("lang")).to.be.null; expect(htmlTag.getAttribute("amp")).to.be.null; - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + null + ); done(); }); }); }); - it("updates with multiple additions and removals - overwrite and new", (done) => { + it("updates with multiple additions and removals - overwrite and new", done => { ReactDOM.render( , container @@ -448,33 +485,39 @@ describe("Helmet", () => { ReactDOM.render( , container ); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; + const htmlTag = document.getElementsByTagName( + "html" + )[0]; expect(htmlTag.getAttribute("amp")).to.equal(null); expect(htmlTag.getAttribute("lang")).to.equal("ja"); expect(htmlTag.getAttribute("id")).to.equal("html-tag"); - expect(htmlTag.getAttribute("title")).to.equal("html tag"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang,id,title"); + expect(htmlTag.getAttribute("title")).to.equal( + "html tag" + ); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "lang,id,title" + ); done(); }); }); }); - it("updates with multiple additions and removals - all new", (done) => { + it("updates with multiple additions and removals - all new", done => { ReactDOM.render( , container @@ -484,20 +527,26 @@ describe("Helmet", () => { ReactDOM.render( , container ); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; + const htmlTag = document.getElementsByTagName( + "html" + )[0]; expect(htmlTag.getAttribute("amp")).to.equal(null); expect(htmlTag.getAttribute("lang")).to.equal(null); expect(htmlTag.getAttribute("id")).to.equal("html-tag"); - expect(htmlTag.getAttribute("title")).to.equal("html tag"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("id,title"); + expect(htmlTag.getAttribute("title")).to.equal( + "html tag" + ); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "id,title" + ); done(); }); @@ -510,60 +559,68 @@ describe("Helmet", () => { htmlTag.setAttribute("test", "test"); }); - it("attributes are not cleared", (done) => { - ReactDOM.render( - , - container - ); + it("attributes are not cleared", done => { + ReactDOM.render(, container); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; + const htmlTag = document.getElementsByTagName( + "html" + )[0]; expect(htmlTag.getAttribute("test")).to.equal("test"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + null + ); done(); }); }); - it("attributes are overwritten if specified in helmet", (done) => { + it("attributes are overwritten if specified in helmet", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; - expect(htmlTag.getAttribute("test")).to.equal("helmet-attr"); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("test"); + const htmlTag = document.getElementsByTagName( + "html" + )[0]; + expect(htmlTag.getAttribute("test")).to.equal( + "helmet-attr" + ); + expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal( + "test" + ); done(); }); }); - it("attributes are cleared once managed in helmet", (done) => { + it("attributes are cleared once managed in helmet", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const htmlTag = document.getElementsByTagName("html")[0]; + const htmlTag = document.getElementsByTagName( + "html" + )[0]; expect(htmlTag.getAttribute("test")).to.equal(null); - expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null); + expect( + htmlTag.getAttribute(HELMET_ATTRIBUTE) + ).to.equal(null); done(); }); @@ -573,15 +630,25 @@ describe("Helmet", () => { }); describe("onChangeClientState", () => { - it("when handling client state change, calls the function with new state, addedTags and removedTags ", (done) => { + it("when handling client state change, calls the function with new state, addedTags and removedTags ", done => { const spy = sinon.spy(); ReactDOM.render(
@@ -596,26 +663,42 @@ describe("Helmet", () => { const removedTags = spy.getCall(0).args[2]; expect(newState).to.contain({title: "Main Title"}); - expect(newState.baseTag).to.contain({href: "http://mysite.com/"}); - expect(newState.metaTags).to.contain({"charset": "utf-8"}); - expect(newState.linkTags).to.contain({"href": "http://localhost/helmet", "rel": "canonical"}); - expect(newState.scriptTags).to.contain({"src": "http://localhost/test.js", "type": "text/javascript"}); + expect(newState.baseTag).to.contain({ + href: "http://mysite.com/" + }); + expect(newState.metaTags).to.contain({charset: "utf-8"}); + expect(newState.linkTags).to.contain({ + href: "http://localhost/helmet", + rel: "canonical" + }); + expect(newState.scriptTags).to.contain({ + src: "http://localhost/test.js", + type: "text/javascript" + }); expect(addedTags).to.have.property("baseTag"); expect(addedTags.baseTag).to.have.deep.property("[0]"); - expect(addedTags.baseTag[0].outerHTML).to.equal(``); + expect(addedTags.baseTag[0].outerHTML).to.equal( + `` + ); expect(addedTags).to.have.property("metaTags"); expect(addedTags.metaTags).to.have.deep.property("[0]"); - expect(addedTags.metaTags[0].outerHTML).to.equal(``); + expect(addedTags.metaTags[0].outerHTML).to.equal( + `` + ); expect(addedTags).to.have.property("linkTags"); expect(addedTags.linkTags).to.have.deep.property("[0]"); - expect(addedTags.linkTags[0].outerHTML).to.equal(``); + expect(addedTags.linkTags[0].outerHTML).to.equal( + `` + ); expect(addedTags).to.have.property("scriptTags"); expect(addedTags.scriptTags).to.have.deep.property("[0]"); - expect(addedTags.scriptTags[0].outerHTML).to.equal(``); + expect(addedTags.scriptTags[0].outerHTML).to.equal( + `` + ); expect(removedTags).to.be.empty; @@ -623,11 +706,14 @@ describe("Helmet", () => { }); }); - it("calls the deepest defined callback with the deepest state", (done) => { + it("calls the deepest defined callback with the deepest state", done => { const spy = sinon.spy(); ReactDOM.render(
- +
, container @@ -635,7 +721,9 @@ describe("Helmet", () => { requestIdleCallback(() => { expect(spy.callCount).to.equal(1); - expect(spy.getCall(0).args[0]).to.contain({title: "Deeper Title"}); + expect(spy.getCall(0).args[0]).to.contain({ + title: "Deeper Title" + }); done(); }); @@ -643,22 +731,27 @@ describe("Helmet", () => { }); describe("base tag", () => { - it("updates base tag", (done) => { + it("updates base tag", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return tag.getAttribute("href") === "http://mysite.com/"; - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + tag.getAttribute("href") === + "http://mysite.com/" + ); + }); expect(filteredTags.length).to.equal(1); @@ -666,22 +759,19 @@ describe("Helmet", () => { }); }); - it("clears the base tag if one is not specified", (done) => { + it("clears the base tag if one is not specified", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -691,16 +781,16 @@ describe("Helmet", () => { }); }); - it("tags without 'href' are not accepted", (done) => { + it("tags without 'href' are not accepted", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -709,48 +799,49 @@ describe("Helmet", () => { }); }); - it("sets base tag based on deepest nested component", (done) => { + it("sets base tag based on deepest nested component", done => { ReactDOM.render(
- - + +
, container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); - const firstTag = Array.prototype.slice.call(existingTags)[0]; + const existingTags = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); + const firstTag = Array.prototype.slice.call( + existingTags + )[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://mysite.com/public"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://mysite.com/public" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { - ReactDOM.render( - , - container - ); + it("does not render tag when primary attribute is null", done => { + ReactDOM.render(, container); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `base[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -760,32 +851,48 @@ describe("Helmet", () => { }); describe("meta tags", () => { - it("updates meta tags", (done) => { + it("updates meta tags", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return tag.getAttribute("charset") === "utf-8" || - (tag.getAttribute("name") === "description" && tag.getAttribute("content") === "Test description") || - (tag.getAttribute("http-equiv") === "content-type" && tag.getAttribute("content") === "text/html") || - (tag.getAttribute("itemprop") === "name" && tag.getAttribute("content") === "Test name itemprop"); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + tag.getAttribute("charset") === "utf-8" || + (tag.getAttribute("name") === "description" && + tag.getAttribute("content") === + "Test description") || + (tag.getAttribute("http-equiv") === + "content-type" && + tag.getAttribute("content") === + "text/html") || + (tag.getAttribute("itemprop") === "name" && + tag.getAttribute("content") === + "Test name itemprop") + ); + }); expect(filteredTags.length).to.be.at.least(4); @@ -793,22 +900,23 @@ describe("Helmet", () => { }); }); - it("clears all meta tags if none are specified", (done) => { + it("clears all meta tags if none are specified", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -818,16 +926,16 @@ describe("Helmet", () => { }); }); - it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' are not accepted", (done) => { + it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' are not accepted", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -836,19 +944,25 @@ describe("Helmet", () => { }); }); - it("sets meta tags based on deepest nested component", (done) => { + it("sets meta tags based on deepest nested component", done => { ReactDOM.render(
, @@ -856,7 +970,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -867,46 +983,63 @@ describe("Helmet", () => { expect(existingTags.length).to.be.equal(3); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("charset")).to.equal("utf-8"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Inner description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[2]") + expect(existingTags).to.have.deep + .property("[2]") .that.is.an.instanceof(Element); expect(thirdTag).to.have.property("getAttribute"); expect(thirdTag.getAttribute("name")).to.equal("keywords"); - expect(thirdTag.getAttribute("content")).to.equal("test,meta,tags"); - expect(thirdTag.outerHTML).to.equal(``); + expect(thirdTag.getAttribute("content")).to.equal( + "test,meta,tags" + ); + expect(thirdTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("allows duplicate meta tags if specified in the same component", (done) => { + it("allows duplicate meta tags if specified in the same component", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -915,38 +1048,59 @@ describe("Helmet", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Test description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Test description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Duplicate description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Duplicate description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides duplicate meta tags with single meta tag in a nested component", (done) => { + it("overrides duplicate meta tags with single meta tag in a nested component", done => { ReactDOM.render(
, @@ -954,7 +1108,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -962,30 +1118,45 @@ describe("Helmet", () => { expect(existingTags.length).to.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Inner description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides single meta tag with duplicate meta tags in a nested component", (done) => { + it("overrides single meta tag with duplicate meta tags in a nested component", done => { ReactDOM.render(
, @@ -993,7 +1164,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1002,38 +1175,55 @@ describe("Helmet", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("name")).to.equal("description"); - expect(firstTag.getAttribute("content")).to.equal("Inner description"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("name")).to.equal( + "description" + ); + expect(firstTag.getAttribute("content")).to.equal( + "Inner description" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("name")).to.equal("description"); - expect(secondTag.getAttribute("content")).to.equal("Inner duplicate description"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("name")).to.equal( + "description" + ); + expect(secondTag.getAttribute("content")).to.equal( + "Inner duplicate description" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1041,19 +1231,19 @@ describe("Helmet", () => { }); }); - it("fails gracefully when meta is wrong shape", (done) => { + it("fails gracefully when meta is wrong shape", done => { const error = sinon.stub(console, "error"); const warn = sinon.stub(console, "warn"); ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1061,7 +1251,9 @@ describe("Helmet", () => { expect(warn.called).to.be.true; const [warning] = warn.getCall(0).args; - expect(warning).to.equal(`Helmet: meta should be of type "Array". Instead found type "object"`); + expect(warning).to.equal( + `Helmet: meta should be of type "Array". Instead found type "object"` + ); error.restore(); warn.restore(); @@ -1072,27 +1264,42 @@ describe("Helmet", () => { }); describe("link tags", () => { - it("updates link tags", (done) => { + it("updates link tags", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return (tag.getAttribute("href") === "http://localhost/style.css" && tag.getAttribute("rel") === "stylesheet" && tag.getAttribute("type") === "text/css") || - (tag.getAttribute("href") === "http://localhost/helmet" && tag.getAttribute("rel") === "canonical"); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + (tag.getAttribute("href") === + "http://localhost/style.css" && + tag.getAttribute("rel") === "stylesheet" && + tag.getAttribute("type") === "text/css") || + (tag.getAttribute("href") === + "http://localhost/helmet" && + tag.getAttribute("rel") === "canonical") + ); + }); expect(filteredTags.length).to.be.at.least(2); @@ -1100,25 +1307,26 @@ describe("Helmet", () => { }); }); - it("clears all link tags if none are specified", (done) => { + it("clears all link tags if none are specified", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); - const existingTags = Array.prototype.slice.call(tagNodes); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); + const existingTags = Array.prototype.slice.call( + tagNodes + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1128,16 +1336,16 @@ describe("Helmet", () => { }); }); - it("tags without 'href' or 'rel' are not accepted, even if they are valid for other tags", (done) => { + it("tags without 'href' or 'rel' are not accepted, even if they are valid for other tags", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.not.equal(undefined); @@ -1147,24 +1355,41 @@ describe("Helmet", () => { }); }); - it("tags 'rel' and 'href' properly use 'rel' as the primary identification for this tag, regardless of ordering", (done) => { + it("tags 'rel' and 'href' properly use 'rel' as the primary identification for this tag, regardless of ordering", done => { ReactDOM.render(
, container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1172,29 +1397,43 @@ describe("Helmet", () => { expect(existingTags.length).to.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/newest"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/newest" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("tags with rel='stylesheet' uses the href as the primary identification of the tag, regardless of ordering", (done) => { + it("tags with rel='stylesheet' uses the href as the primary identification of the tag, regardless of ordering", done => { ReactDOM.render(
, @@ -1202,7 +1441,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1211,43 +1452,70 @@ describe("Helmet", () => { expect(existingTags.length).to.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css"); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/style.css" + ); expect(firstTag.getAttribute("rel")).to.equal("stylesheet"); expect(firstTag.getAttribute("type")).to.equal("text/css"); expect(firstTag.getAttribute("media")).to.equal("all"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("rel")).to.equal("stylesheet"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/inner.css"); + expect(secondTag.getAttribute("rel")).to.equal( + "stylesheet" + ); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/inner.css" + ); expect(secondTag.getAttribute("type")).to.equal("text/css"); expect(secondTag.getAttribute("media")).to.equal("all"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("sets link tags based on deepest nested component", (done) => { + it("sets link tags based on deepest nested component", done => { ReactDOM.render(
, @@ -1255,7 +1523,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1265,51 +1535,68 @@ describe("Helmet", () => { expect(existingTags.length).to.be.at.least(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css"); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/style.css" + ); expect(firstTag.getAttribute("rel")).to.equal("stylesheet"); expect(firstTag.getAttribute("type")).to.equal("text/css"); expect(firstTag.getAttribute("media")).to.equal("all"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[2]") + expect(existingTags).to.have.deep + .property("[2]") .that.is.an.instanceof(Element); expect(thirdTag).to.have.property("getAttribute"); - expect(thirdTag.getAttribute("href")).to.equal("http://localhost/inner.css"); + expect(thirdTag.getAttribute("href")).to.equal( + "http://localhost/inner.css" + ); expect(thirdTag.getAttribute("rel")).to.equal("stylesheet"); expect(thirdTag.getAttribute("type")).to.equal("text/css"); expect(thirdTag.getAttribute("media")).to.equal("all"); - expect(thirdTag.outerHTML).to.equal(``); + expect(thirdTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("allows duplicate link tags if specified in the same component", (done) => { + it("allows duplicate link tags if specified in the same component", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1318,38 +1605,56 @@ describe("Helmet", () => { expect(existingTags.length).to.be.at.least(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides duplicate link tags with a single link tag in a nested component", (done) => { + it("overrides duplicate link tags with a single link tag in a nested component", done => { ReactDOM.render(
, @@ -1357,7 +1662,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; @@ -1365,30 +1672,44 @@ describe("Helmet", () => { expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("overrides single link tag with duplicate link tags in a nested component", (done) => { + it("overrides single link tag with duplicate link tags in a nested component", done => { ReactDOM.render(
, @@ -1396,7 +1717,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1405,52 +1728,69 @@ describe("Helmet", () => { expect(existingTags.length).to.be.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); expect(secondTag.getAttribute("rel")).to.equal("canonical"); - expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("href")).to.equal( + "http://localhost/helmet/innercomponent" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `link[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("rel")).to.equal("canonical"); - expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("href")).to.equal( + "http://localhost/helmet/component" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); done(); }); @@ -1458,7 +1798,7 @@ describe("Helmet", () => { }); describe("script tags", () => { - it("updates script tags", (done) => { + it("updates script tags", done => { const scriptInnerHTML = ` { "@context": "http://schema.org", @@ -1469,8 +1809,14 @@ describe("Helmet", () => { ReactDOM.render( { ); requestIdleCallback(() => { - const existingTags = headElement.getElementsByTagName("script"); + const existingTags = headElement.getElementsByTagName( + "script" + ); expect(existingTags).to.not.equal(undefined); - const filteredTags = [].slice.call(existingTags).filter((tag) => { - return (tag.getAttribute("src") === "http://localhost/test.js" && tag.getAttribute("type") === "text/javascript") || - (tag.getAttribute("src") === "http://localhost/test2.js" && tag.getAttribute("type") === "text/javascript") || - (tag.getAttribute("type") === "application/ld+json" && tag.innerHTML === scriptInnerHTML); - }); + const filteredTags = [].slice + .call(existingTags) + .filter(tag => { + return ( + (tag.getAttribute("src") === + "http://localhost/test.js" && + tag.getAttribute("type") === + "text/javascript") || + (tag.getAttribute("src") === + "http://localhost/test2.js" && + tag.getAttribute("type") === + "text/javascript") || + (tag.getAttribute("type") === + "application/ld+json" && + tag.innerHTML === scriptInnerHTML) + ); + }); expect(filteredTags.length).to.be.at.least(3); @@ -1497,24 +1857,26 @@ describe("Helmet", () => { }); }); - it("clears all scripts tags if none are specified", (done) => { + it("clears all scripts tags if none are specified", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1524,16 +1886,16 @@ describe("Helmet", () => { }); }); - it("tags without 'src' are not accepted", (done) => { + it("tags without 'src' are not accepted", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1542,17 +1904,23 @@ describe("Helmet", () => { }); }); - it("sets script tags based on deepest nested component", (done) => { + it("sets script tags based on deepest nested component", done => { ReactDOM.render(
, @@ -1560,7 +1928,9 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); const firstTag = existingTags[0]; const secondTag = existingTags[1]; @@ -1569,27 +1939,39 @@ describe("Helmet", () => { expect(existingTags.length).to.be.at.least(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); - expect(firstTag.getAttribute("src")).to.equal("http://localhost/test.js"); - expect(firstTag.getAttribute("type")).to.equal("text/javascript"); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.getAttribute("src")).to.equal( + "http://localhost/test.js" + ); + expect(firstTag.getAttribute("type")).to.equal( + "text/javascript" + ); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag).to.have.property("getAttribute"); - expect(secondTag.getAttribute("src")).to.equal("http://localhost/test2.js"); - expect(secondTag.getAttribute("type")).to.equal("text/javascript"); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.getAttribute("src")).to.equal( + "http://localhost/test2.js" + ); + expect(secondTag.getAttribute("type")).to.equal( + "text/javascript" + ); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("sets undefined attribute values to empty strings", (done) => { + it("sets undefined attribute values to empty strings", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const existingTag = headElement.querySelector(`script[${HELMET_ATTRIBUTE}]`); + const existingTag = headElement.querySelector( + `script[${HELMET_ATTRIBUTE}]` + ); expect(existingTag).to.not.equal(undefined); - expect(existingTag.outerHTML) - .to.be.a("string") - .that.equals(``); + expect(existingTag.outerHTML).to.be + .a("string") + .that.equals( + `` + ); done(); }); }); - it("does not render tag when primary attribute (src) is null", (done) => { + it("does not render tag when primary attribute (src) is null", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1636,7 +2024,7 @@ describe("Helmet", () => { }); }); - it("does not render tag when primary attribute (innerHTML) is null", (done) => { + it("does not render tag when primary attribute (innerHTML) is null", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1659,32 +2049,41 @@ describe("Helmet", () => { }); describe("noscript tags", () => { - it("updates noscript tags", (done) => { + it("updates noscript tags", done => { const noscriptInnerHTML = ``; ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.getElementsByTagName("noscript"); + const existingTags = headElement.getElementsByTagName( + "noscript" + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(1); - expect(existingTags[0].innerHTML === noscriptInnerHTML && existingTags[0].id === "bar"); + expect( + existingTags[0].innerHTML === noscriptInnerHTML && + existingTags[0].id === "bar" + ); done(); }); }); - it("clears all noscripts tags if none are specified", (done) => { + it("clears all noscripts tags if none are specified", done => { ReactDOM.render(, container); requestIdleCallback(() => { ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `script[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1694,14 +2093,16 @@ describe("Helmet", () => { }); }); - it("tags without 'innerHTML' are not accepted", (done) => { + it("tags without 'innerHTML' are not accepted", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`noscript[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `noscript[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1710,7 +2111,7 @@ describe("Helmet", () => { }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`noscript[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `noscript[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1733,7 +2136,7 @@ describe("Helmet", () => { }); describe("style tags", () => { - it("updates style tags", (done) => { + it("updates style tags", done => { const cssText1 = ` body { background-color: green; @@ -1760,35 +2163,38 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `style[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); - const [ - firstTag, - secondTag - ] = existingTags; + const [firstTag, secondTag] = existingTags; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(2); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(firstTag).to.have.property("getAttribute"); expect(firstTag.getAttribute("type")).to.equal("text/css"); expect(firstTag.innerHTML).to.equal(cssText1); - expect(firstTag.outerHTML).to.equal(``); + expect(firstTag.outerHTML).to.equal( + `` + ); - expect(existingTags) - .to.have.deep.property("[1]") + expect(existingTags).to.have.deep + .property("[1]") .that.is.an.instanceof(Element); expect(secondTag.innerHTML).to.equal(cssText2); - expect(secondTag.outerHTML).to.equal(``); + expect(secondTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("clears all style tags if none are specified", (done) => { + it("clears all style tags if none are specified", done => { const cssText = ` body { background-color: green; @@ -1807,13 +2213,12 @@ describe("Helmet", () => { ); requestIdleCallback(() => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `style[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1823,16 +2228,16 @@ describe("Helmet", () => { }); }); - it("tags without 'cssText' are not accepted", (done) => { + it("tags without 'cssText' are not accepted", done => { ReactDOM.render( - , + , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `style[${HELMET_ATTRIBUTE}]` + ); expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.equal(0); @@ -1841,7 +2246,7 @@ describe("Helmet", () => { }); }); - it("does not render tag when primary attribute is null", (done) => { + it("does not render tag when primary attribute is null", done => { ReactDOM.render( { ); requestIdleCallback(() => { - const tagNodes = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`); + const tagNodes = headElement.querySelectorAll( + `style[${HELMET_ATTRIBUTE}]` + ); const existingTags = Array.prototype.slice.call(tagNodes); expect(existingTags).to.be.empty; @@ -1915,9 +2322,7 @@ describe("Helmet", () => { it("encodes special characters in title", () => { ReactDOM.render( - , + , container ); @@ -1947,9 +2352,7 @@ describe("Helmet", () => { it("renders title as React component", () => { ReactDOM.render( - include"} - />, + include"} />, container ); @@ -1960,13 +2363,11 @@ describe("Helmet", () => { const titleComponent = head.title.toComponent(); - expect(titleComponent) - .to.be.an("array") - .that.has.length.of(1); + expect(titleComponent).to.be.an("array").that.has.length.of(1); titleComponent.forEach(title => { - expect(title) - .to.be.an("object") + expect(title).to.be + .an("object") .that.contains.property("type", "title"); }); @@ -1976,11 +2377,9 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedTitle - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedTitle}
`); }); it("renders title with itemprop name as React component", () => { @@ -1999,13 +2398,11 @@ describe("Helmet", () => { const titleComponent = head.title.toComponent(); - expect(titleComponent) - .to.be.an("array") - .that.has.length.of(1); + expect(titleComponent).to.be.an("array").that.has.length.of(1); titleComponent.forEach(title => { - expect(title) - .to.be.an("object") + expect(title).to.be + .an("object") .that.contains.property("type", "title"); }); @@ -2015,18 +2412,14 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedTitleWithItemprop - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedTitleWithItemprop}
`); }); it("renders base tag as React component", () => { ReactDOM.render( - , + , container ); @@ -2037,13 +2430,11 @@ describe("Helmet", () => { const baseComponent = head.base.toComponent(); - expect(baseComponent) - .to.be.an("array") - .that.has.length.of(1); + expect(baseComponent).to.be.an("array").that.has.length.of(1); baseComponent.forEach(base => { - expect(base) - .to.be.an("object") + expect(base).to.be + .an("object") .that.contains.property("type", "base"); }); @@ -2053,22 +2444,24 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedBaseTag - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedBaseTag}
`); }); it("renders meta tags as React components", () => { ReactDOM.render( < `"}, - {"http-equiv": "content-type", "content": "text/html"}, - {"property": "og:type", "content": "article"}, - {"itemprop": "name", "content": "Test name itemprop"} + {charset: "utf-8"}, + { + name: "description", + content: + "Test description & encoding of special characters like ' \" > < `" + }, + {"http-equiv": "content-type", content: "text/html"}, + {property: "og:type", content: "article"}, + {itemprop: "name", content: "Test name itemprop"} ]} />, container @@ -2081,13 +2474,11 @@ describe("Helmet", () => { const metaComponent = head.meta.toComponent(); - expect(metaComponent) - .to.be.an("array") - .that.has.length.of(5); + expect(metaComponent).to.be.an("array").that.has.length.of(5); metaComponent.forEach(meta => { - expect(meta) - .to.be.an("object") + expect(meta).to.be + .an("object") .that.contains.property("type", "meta"); }); @@ -2097,19 +2488,21 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedMetaTags - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedMetaTags}
`); }); it("renders link tags as React components", () => { ReactDOM.render( , container @@ -2122,13 +2515,11 @@ describe("Helmet", () => { const linkComponent = head.link.toComponent(); - expect(linkComponent) - .to.be.an("array") - .that.has.length.of(2); + expect(linkComponent).to.be.an("array").that.has.length.of(2); linkComponent.forEach(link => { - expect(link) - .to.be.an("object") + expect(link).to.be + .an("object") .that.contains.property("type", "link"); }); @@ -2138,19 +2529,23 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedLinkTags - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedLinkTags}
`); }); it("renders script tags as React components", () => { ReactDOM.render( , container @@ -2163,13 +2558,11 @@ describe("Helmet", () => { const scriptComponent = head.script.toComponent(); - expect(scriptComponent) - .to.be.an("array") - .that.has.length.of(2); + expect(scriptComponent).to.be.an("array").that.has.length.of(2); scriptComponent.forEach(script => { - expect(script) - .to.be.an("object") + expect(script).to.be + .an("object") .that.contains.property("type", "script"); }); @@ -2179,20 +2572,26 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedScriptTags - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedScriptTags}
`); }); it("renders noscript tags as React components", () => { ReactDOM.render( '}, - {id: "bar", innerHTML: ''} - ]} + noscript={[ + { + id: "foo", + innerHTML: + '' + }, + { + id: "bar", + innerHTML: + '' + } + ]} />, container ); @@ -2204,13 +2603,11 @@ describe("Helmet", () => { const noscriptComponent = head.noscript.toComponent(); - expect(noscriptComponent) - .to.be.an("array") - .that.has.length.of(2); + expect(noscriptComponent).to.be.an("array").that.has.length.of(2); noscriptComponent.forEach(noscript => { - expect(noscript) - .to.be.an("object") + expect(noscript).to.be + .an("object") .that.contains.property("type", "noscript"); }); @@ -2220,11 +2617,9 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedNoscriptTags - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedNoscriptTags}
`); }); it("renders style tags as React components", () => { @@ -2232,12 +2627,12 @@ describe("Helmet", () => { , @@ -2251,9 +2646,7 @@ describe("Helmet", () => { const styleComponent = head.style.toComponent(); - expect(styleComponent) - .to.be.an("array") - .that.has.length.of(2); + expect(styleComponent).to.be.an("array").that.has.length.of(2); const markup = ReactServer.renderToStaticMarkup(
@@ -2261,18 +2654,14 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
${ - stringifiedStyleTags - }
`); + expect(markup).to.be + .a("string") + .that.equals(`
${stringifiedStyleTags}
`); }); it("renders title tag as string", () => { ReactDOM.render( - include"} - />, + include"} />, container ); @@ -2281,8 +2670,8 @@ describe("Helmet", () => { expect(head.title).to.exist; expect(head.title).to.respondTo("toString"); - expect(head.title.toString()) - .to.be.a("string") + expect(head.title.toString()).to.be + .a("string") .that.equals(stringifiedTitle); }); @@ -2301,16 +2690,14 @@ describe("Helmet", () => { expect(head.title).to.respondTo("toString"); const titleString = head.title.toString(); - expect(titleString) - .to.be.a("string") + expect(titleString).to.be + .a("string") .that.equals(stringifiedTitleWithItemprop); }); it("renders base tags as string", () => { ReactDOM.render( - , + , container ); @@ -2319,8 +2706,8 @@ describe("Helmet", () => { expect(head.base).to.exist; expect(head.base).to.respondTo("toString"); - expect(head.base.toString()) - .to.be.a("string") + expect(head.base.toString()).to.be + .a("string") .that.equals(stringifiedBaseTag); }); @@ -2328,11 +2715,15 @@ describe("Helmet", () => { ReactDOM.render( < `"}, - {"http-equiv": "content-type", "content": "text/html"}, - {"property": "og:type", "content": "article"}, - {"itemprop": "name", "content": "Test name itemprop"} + {charset: "utf-8"}, + { + name: "description", + content: + "Test description & encoding of special characters like ' \" > < `" + }, + {"http-equiv": "content-type", content: "text/html"}, + {property: "og:type", content: "article"}, + {itemprop: "name", content: "Test name itemprop"} ]} />, container @@ -2343,8 +2734,8 @@ describe("Helmet", () => { expect(head.meta).to.exist; expect(head.meta).to.respondTo("toString"); - expect(head.meta.toString()) - .to.be.a("string") + expect(head.meta.toString()).to.be + .a("string") .that.equals(stringifiedMetaTags); }); @@ -2352,8 +2743,12 @@ describe("Helmet", () => { ReactDOM.render( , container @@ -2364,8 +2759,8 @@ describe("Helmet", () => { expect(head.link).to.exist; expect(head.link).to.respondTo("toString"); - expect(head.link.toString()) - .to.be.a("string") + expect(head.link.toString()).to.be + .a("string") .that.equals(stringifiedLinkTags); }); @@ -2373,8 +2768,14 @@ describe("Helmet", () => { ReactDOM.render( , container @@ -2385,8 +2786,8 @@ describe("Helmet", () => { expect(head.script).to.exist; expect(head.script).to.respondTo("toString"); - expect(head.script.toString()) - .to.be.a("string") + expect(head.script.toString()).to.be + .a("string") .that.equals(stringifiedScriptTags); }); @@ -2395,12 +2796,12 @@ describe("Helmet", () => { , @@ -2412,8 +2813,8 @@ describe("Helmet", () => { expect(head.style).to.exist; expect(head.style).to.respondTo("toString"); - expect(head.style.toString()) - .to.be.a("string") + expect(head.style.toString()).to.be + .a("string") .that.equals(stringifiedStyleTags); }); @@ -2437,8 +2838,8 @@ describe("Helmet", () => { ); - expect(markup) - .to.be.a("string") + expect(markup).to.be + .a("string") .that.equals(``); }); @@ -2458,8 +2859,8 @@ describe("Helmet", () => { expect(head.htmlAttributes).to.exist; expect(head.htmlAttributes).to.respondTo("toString"); - expect(head.htmlAttributes.toString()) - .to.be.a("string") + expect(head.htmlAttributes.toString()).to.be + .a("string") .that.equals(stringifiedHtmlAttributes); }); @@ -2479,16 +2880,13 @@ describe("Helmet", () => { expect(head.title).to.exist; expect(head.title).to.respondTo("toString"); - expect(head.title.toString()) - .to.be.a("string") + expect(head.title.toString()).to.be + .a("string") .that.equals(stringifiedChineseTitle); }); it("rewind() provides a fallback object for empty Helmet state", () => { - ReactDOM.render( -
, - container - ); + ReactDOM.render(
, container); const head = Helmet.rewind(); @@ -2496,12 +2894,14 @@ describe("Helmet", () => { expect(head.htmlAttributes).to.respondTo("toString"); expect(head.htmlAttributes.toString()).to.equal(""); expect(head.htmlAttributes).to.respondTo("toComponent"); - expect(head.htmlAttributes.toComponent()).to.be.an("object") - .that.is.empty; + expect(head.htmlAttributes.toComponent()).to.be.an("object").that.is + .empty; expect(head.title).to.exist; expect(head.title).to.respondTo("toString"); - expect(head.title.toString()).to.equal(``); + expect(head.title.toString()).to.equal( + `` + ); expect(head.title).to.respondTo("toComponent"); const markup = ReactServer.renderToStaticMarkup( @@ -2510,51 +2910,47 @@ describe("Helmet", () => {
); - expect(markup) - .to.be.a("string") - .that.equals(`
`); + expect(markup).to.be + .a("string") + .that.equals( + `
` + ); expect(head.base).to.exist; expect(head.base).to.respondTo("toString"); expect(head.base.toString()).to.equal(""); expect(head.base).to.respondTo("toComponent"); - expect(head.base.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.base.toComponent()).to.be.an("array").that.is.empty; expect(head.meta).to.exist; expect(head.meta).to.respondTo("toString"); expect(head.meta.toString()).to.equal(""); expect(head.meta).to.respondTo("toComponent"); - expect(head.meta.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.meta.toComponent()).to.be.an("array").that.is.empty; expect(head.link).to.exist; expect(head.link).to.respondTo("toString"); expect(head.link.toString()).to.equal(""); expect(head.link).to.respondTo("toComponent"); - expect(head.link.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.link.toComponent()).to.be.an("array").that.is.empty; expect(head.script).to.exist; expect(head.script).to.respondTo("toString"); expect(head.script.toString()).to.equal(""); expect(head.script).to.respondTo("toComponent"); - expect(head.script.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.script.toComponent()).to.be.an("array").that.is.empty; expect(head.noscript).to.exist; expect(head.noscript).to.respondTo("toString"); expect(head.noscript.toString()).to.equal(""); expect(head.noscript).to.respondTo("toComponent"); - expect(head.noscript.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.noscript.toComponent()).to.be.an("array").that.is.empty; expect(head.style).to.exist; expect(head.style).to.respondTo("toString"); expect(head.style.toString()).to.equal(""); expect(head.style).to.respondTo("toComponent"); - expect(head.style.toComponent()).to.be.an("array") - .that.is.empty; + expect(head.style.toComponent()).to.be.an("array").that.is.empty; }); it("does not render undefined attribute values", () => { @@ -2573,9 +2969,11 @@ describe("Helmet", () => { const {script} = Helmet.rewind(); const stringifiedScriptTag = script.toString(); - expect(stringifiedScriptTag) - .to.be.a("string") - .that.equals(``); + expect(stringifiedScriptTag).to.be + .a("string") + .that.equals( + `` + ); }); after(() => { Helmet.canUseDOM = true; @@ -2584,25 +2982,15 @@ describe("Helmet", () => { describe("misc", () => { it("throws in rewind() when a DOM is present", () => { - ReactDOM.render( - , - container - ); + ReactDOM.render(, container); expect(Helmet.rewind).to.throw( "You may only call rewind() on the server. Call peek() to read the current state." ); }); - it("lets you read current state in peek() whether or not a DOM is present", (done) => { - ReactDOM.render( - , - container - ); + it("lets you read current state in peek() whether or not a DOM is present", done => { + ReactDOM.render(, container); requestIdleCallback(() => { expect(Helmet.peek().title).to.be.equal("Fancy title"); @@ -2614,41 +3002,52 @@ describe("Helmet", () => { }); }); - it("encodes special characters", (done) => { + it("encodes special characters", done => { ReactDOM.render( , container ); requestIdleCallback(() => { - const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`); + const existingTags = headElement.querySelectorAll( + `meta[${HELMET_ATTRIBUTE}]` + ); const existingTag = existingTags[0]; expect(existingTags).to.not.equal(undefined); expect(existingTags.length).to.be.equal(1); - expect(existingTags) - .to.have.deep.property("[0]") + expect(existingTags).to.have.deep + .property("[0]") .that.is.an.instanceof(Element); expect(existingTag).to.have.property("getAttribute"); - expect(existingTag.getAttribute("name")).to.equal("description"); - expect(existingTag.getAttribute("content")).to.equal("This is \"quoted\" text and & and '."); - expect(existingTag.outerHTML).to.equal(``); + expect(existingTag.getAttribute("name")).to.equal( + "description" + ); + expect(existingTag.getAttribute("content")).to.equal( + 'This is "quoted" text and & and \'.' + ); + expect(existingTag.outerHTML).to.equal( + `` + ); done(); }); }); - it("does not change the DOM if it recevies identical props", (done) => { + it("does not change the DOM if it recevies identical props", done => { const spy = sinon.spy(); ReactDOM.render( , @@ -2659,7 +3058,9 @@ describe("Helmet", () => { // Re-rendering will pass new props to an already mounted Helmet ReactDOM.render( , @@ -2674,13 +3075,18 @@ describe("Helmet", () => { }); }); - it("does not write the DOM if the client and server are identical", (done) => { + it("does not write the DOM if the client and server are identical", done => { headElement.innerHTML = `