Skip to content

Commit

Permalink
map className to class when updating htmlAttributes (nfl#205)
Browse files Browse the repository at this point in the history
* map class to className when server rendering

* add generic mapping for attributes

* add test for class attribute mapping

* add server test

* fix server implementation

* incorporate classname test in existing test

* drop HTML_TAG_MAP
  • Loading branch information
koenpunt authored and cwelch5 committed Dec 21, 2016
1 parent 300f494 commit ef47e8f
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 12 deletions.
6 changes: 2 additions & 4 deletions src/Helmet.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,8 @@ const updateAttributes = (tagName, attributes) => {
const helmetAttributeString = htmlTag.getAttribute(HELMET_ATTRIBUTE);
const helmetAttributes = helmetAttributeString ? helmetAttributeString.split(",") : [];
const attributesToRemove = [].concat(helmetAttributes);
const attributeKeys = Object.keys(attributes);

for (let i = 0; i < attributeKeys.length; i++) {
const attribute = attributeKeys[i];
Object.keys(attributes).forEach((attribute) => {
const value = attributes[attribute] || "";
htmlTag.setAttribute(attribute, value);

Expand All @@ -181,7 +179,7 @@ const updateAttributes = (tagName, attributes) => {
if (indexToSave !== -1) {
attributesToRemove.splice(indexToSave, 1);
}
}
});

for (let i = attributesToRemove.length - 1; i >= 0; i--) {
htmlTag.removeAttribute(attributesToRemove[i]);
Expand Down
3 changes: 2 additions & 1 deletion src/HelmetConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,6 @@ export const TAG_PROPERTIES = {
export const REACT_TAG_MAP = {
"charset": "charSet",
"http-equiv": "httpEquiv",
"itemprop": "itemProp"
"itemprop": "itemProp",
"class": "className"
};
32 changes: 25 additions & 7 deletions src/test/HelmetTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,22 @@ describe("Helmet", () => {
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null);
});

it("maps attributes to html attributes", () => {
ReactDOM.render(
<Helmet
htmlAttributes={{
"class": "myClassName"
}}
/>,
container
);

const htmlTag = document.getElementsByTagName("html")[0];

expect(htmlTag.getAttribute("class")).to.equal("myClassName");
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("class");
});

context("initialized outside of helmet", () => {
before(() => {
const htmlTag = document.getElementsByTagName("html")[0];
Expand Down Expand Up @@ -1496,7 +1512,7 @@ describe("Helmet", () => {
});

describe("server", () => {
const stringifiedHtmlAttribute = `lang="ga"`;
const stringifiedHtmlAttributes = `lang="ga" class="myClassName"`;
const stringifiedTitle = `<title ${HELMET_ATTRIBUTE}="true">Dangerous &lt;script&gt; include</title>`;
const stringifiedTitleWithItemprop = `<title ${HELMET_ATTRIBUTE}="true" itemprop="name">Title with Itemprop</title>`;
const stringifiedBaseTag = `<base ${HELMET_ATTRIBUTE}="true" target="_blank" href="http://localhost/"/>`;
Expand Down Expand Up @@ -2021,11 +2037,12 @@ describe("Helmet", () => {
.that.equals(stringifiedStyleTags);
});

it("will render html attributes as component", () => {
it("will render html class attribute as component", () => {
ReactDOM.render(
<Helmet
htmlAttributes={{
lang: "ga"
lang: "ga",
className: "myClassName"
}}
/>,
container
Expand All @@ -2037,19 +2054,20 @@ describe("Helmet", () => {
expect(attrs).to.exist;

const markup = ReactServer.renderToStaticMarkup(
<html lang="en" {...attrs} />
<html {...attrs} />
);

expect(markup)
.to.be.a("string")
.that.equals(`<html ${stringifiedHtmlAttribute}></html>`);
.that.equals(`<html ${stringifiedHtmlAttributes}></html>`);
});

it("will render html attributes as string", () => {
ReactDOM.render(
<Helmet
htmlAttributes={{
lang: "ga"
lang: "ga",
class: "myClassName"
}}
/>,
container
Expand All @@ -2062,7 +2080,7 @@ describe("Helmet", () => {

expect(head.htmlAttributes.toString())
.to.be.a("string")
.that.equals(stringifiedHtmlAttribute);
.that.equals(stringifiedHtmlAttributes);
});

it("will not encode all characters with HTML character entity equivalents", () => {
Expand Down

0 comments on commit ef47e8f

Please sign in to comment.