3712 lines
134 KiB
JavaScript
3712 lines
134 KiB
JavaScript
/* eslint max-nested-callbacks: [1, 7] */
|
|
/* eslint-disable react/jsx-sort-props */
|
|
/* eslint-disable jsx-a11y/html-has-lang */
|
|
|
|
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import ReactServer from "react-dom/server";
|
|
import {Helmet} from "../src/Helmet";
|
|
import {HTML_TAG_MAP} from "../src/HelmetConstants";
|
|
import {requestAnimationFrame} from "../src/HelmetUtils.js";
|
|
|
|
const HELMET_ATTRIBUTE = "data-react-helmet";
|
|
|
|
describe("Helmet - Declarative API", () => {
|
|
let headElement;
|
|
|
|
const container = document.createElement("div");
|
|
|
|
beforeEach(() => {
|
|
headElement =
|
|
headElement || document.head || document.querySelector("head");
|
|
|
|
// resets DOM after each run
|
|
headElement.innerHTML = "";
|
|
});
|
|
|
|
afterEach(() => {
|
|
ReactDOM.unmountComponentAtNode(container);
|
|
});
|
|
|
|
describe("api", () => {
|
|
describe("title", () => {
|
|
it("updates page title", done => {
|
|
ReactDOM.render(
|
|
<Helmet defaultTitle={"Fallback"}>
|
|
<title>Test Title</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Test Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("updates page title and allows children containing expressions", done => {
|
|
const someValue = "Some Great Title";
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Title: {someValue}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Title: Some Great Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("updates page title with multiple children", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
</Helmet>
|
|
<Helmet>
|
|
<title>Child One Title</title>
|
|
</Helmet>
|
|
<Helmet>
|
|
<title>Child Two Title</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Child Two Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets title based on deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<title>Main Title</title>
|
|
</Helmet>
|
|
<Helmet>
|
|
<title>Nested Title</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Nested Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets title using deepest nested component with a defined title", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<title>Main Title</title>
|
|
</Helmet>
|
|
<Helmet />
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Main Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("uses defaultTitle if no title is defined", done => {
|
|
ReactDOM.render(
|
|
<Helmet
|
|
defaultTitle={"Fallback"}
|
|
titleTemplate={
|
|
"This is a %s of the titleTemplate feature"
|
|
}
|
|
>
|
|
<title />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Fallback");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("uses a titleTemplate if defined", done => {
|
|
ReactDOM.render(
|
|
<Helmet
|
|
defaultTitle={"Fallback"}
|
|
titleTemplate={
|
|
"This is a %s of the titleTemplate feature"
|
|
}
|
|
>
|
|
<title>Test</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal(
|
|
"This is a Test of the titleTemplate feature"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("replaces multiple title strings in titleTemplate", done => {
|
|
ReactDOM.render(
|
|
<Helmet
|
|
titleTemplate={
|
|
"This is a %s of the titleTemplate feature. Another %s."
|
|
}
|
|
>
|
|
<title>Test</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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 => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet
|
|
titleTemplate={
|
|
"This is a %s of the titleTemplate feature"
|
|
}
|
|
>
|
|
<title>Test</title>
|
|
</Helmet>
|
|
<Helmet
|
|
titleTemplate={
|
|
"A %s using nested titleTemplate attributes"
|
|
}
|
|
>
|
|
<title>Second Test</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal(
|
|
"A Second Test using nested titleTemplate attributes"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("merges deepest component title with nearest upstream titleTemplate", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet
|
|
titleTemplate={
|
|
"This is a %s of the titleTemplate feature"
|
|
}
|
|
>
|
|
<title>Test</title>
|
|
</Helmet>
|
|
<Helmet>
|
|
<title>Second Test</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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 => {
|
|
const dollarTitle = "te$t te$$t te$$$t te$$$$t";
|
|
|
|
ReactDOM.render(
|
|
<Helmet titleTemplate={"This is a %s"}>
|
|
<title>{dollarTitle}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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 => {
|
|
const chineseTitle = "膣膗 鍆錌雔";
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{chineseTitle}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal(chineseTitle);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("page title with prop itemProp", done => {
|
|
ReactDOM.render(
|
|
<Helmet defaultTitle={"Fallback"}>
|
|
<title itemProp="name">Test Title with itemProp</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const titleTag = document.getElementsByTagName("title")[0];
|
|
expect(document.title).to.equal("Test Title with itemProp");
|
|
expect(titleTag.getAttribute("itemprop")).to.equal("name");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("retains existing title tag when no title tag is defined", done => {
|
|
headElement.innerHTML = `<title>Existing Title</title>`;
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta name="keywords" content="stuff" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Existing Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it.skip("clears title tag if empty title is defined", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Existing Title</title>
|
|
<meta name="keywords" content="stuff" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Existing Title");
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{" "}</title>
|
|
<meta name="keywords" content="stuff" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("");
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("title attributes", () => {
|
|
beforeEach(() => {
|
|
headElement.innerHTML = `<title>Test Title</title>`;
|
|
});
|
|
|
|
it("updates title attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title itemProp="name" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const titleTag = document.getElementsByTagName("title")[0];
|
|
|
|
expect(titleTag.getAttribute("itemprop")).to.equal("name");
|
|
expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"itemprop"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets attributes based on the deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<title lang="en" hidden />
|
|
</Helmet>
|
|
<Helmet>
|
|
<title lang="ja" />
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const titleTag = document.getElementsByTagName("title")[0];
|
|
|
|
expect(titleTag.getAttribute("lang")).to.equal("ja");
|
|
expect(titleTag.getAttribute("hidden")).to.equal("true");
|
|
expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"lang,hidden"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("handles valueless attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const titleTag = document.getElementsByTagName("title")[0];
|
|
|
|
expect(titleTag.getAttribute("hidden")).to.equal("true");
|
|
expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"hidden"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears title attributes that are handled within helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title lang="en" hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
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);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("html attributes", () => {
|
|
it("updates html attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html className="myClassName" lang="en" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName("html")[0];
|
|
|
|
expect(htmlTag.getAttribute("class")).to.equal(
|
|
"myClassName"
|
|
);
|
|
expect(htmlTag.getAttribute("lang")).to.equal("en");
|
|
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"class,lang"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets attributes based on the deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<html lang="en" />
|
|
</Helmet>
|
|
<Helmet>
|
|
<html lang="ja" />
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName("html")[0];
|
|
|
|
expect(htmlTag.getAttribute("lang")).to.equal("ja");
|
|
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"lang"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("handles valueless attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html amp />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName("html")[0];
|
|
|
|
expect(htmlTag.getAttribute("amp")).to.equal("true");
|
|
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"amp"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears html attributes that are handled within helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="en" amp />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
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
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("updates with multiple additions and removals - overwrite and new", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="en" amp />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="ja" id="html-tag" title="html tag" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("updates with multiple additions and removals - all new", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="en" amp />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html id="html-tag" title="html tag" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
context("initialized outside of helmet", () => {
|
|
before(() => {
|
|
const htmlTag = document.getElementsByTagName("html")[0];
|
|
htmlTag.setAttribute("test", "test");
|
|
});
|
|
|
|
it("are not cleared", done => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName(
|
|
"html"
|
|
)[0];
|
|
|
|
expect(htmlTag.getAttribute("test")).to.equal("test");
|
|
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
null
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("overwritten if specified in helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html test="helmet-attr" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName(
|
|
"html"
|
|
)[0];
|
|
|
|
expect(htmlTag.getAttribute("test")).to.equal(
|
|
"helmet-attr"
|
|
);
|
|
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"test"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("cleared once it is managed in helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html test="helmet-attr" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const htmlTag = document.getElementsByTagName(
|
|
"html"
|
|
)[0];
|
|
|
|
expect(htmlTag.getAttribute("test")).to.equal(null);
|
|
expect(
|
|
htmlTag.getAttribute(HELMET_ATTRIBUTE)
|
|
).to.equal(null);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("body attributes", () => {
|
|
context("valid attributes", () => {
|
|
const attributeList = {
|
|
accessKey: "c",
|
|
className: "test",
|
|
contentEditable: "true",
|
|
contextMenu: "mymenu",
|
|
"data-animal-type": "lion",
|
|
dir: "rtl",
|
|
draggable: "true",
|
|
dropzone: "copy",
|
|
hidden: "true",
|
|
id: "test",
|
|
lang: "fr",
|
|
spellcheck: "true",
|
|
style: "color:green",
|
|
tabIndex: "-1",
|
|
title: "test",
|
|
translate: "no"
|
|
};
|
|
|
|
Object.keys(attributeList).forEach(attribute => {
|
|
it(attribute, done => {
|
|
const attrValue = attributeList[attribute];
|
|
|
|
const attr = {
|
|
[attribute]: attrValue
|
|
};
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body {...attr} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
const reactCompatAttr =
|
|
HTML_TAG_MAP[attribute] || attribute;
|
|
expect(
|
|
bodyTag.getAttribute(reactCompatAttr)
|
|
).to.equal(attrValue);
|
|
expect(
|
|
bodyTag.getAttribute(HELMET_ATTRIBUTE)
|
|
).to.equal(reactCompatAttr);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
it("updates multiple body attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body className="myClassName" tabIndex={-1} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("class")).to.equal(
|
|
"myClassName"
|
|
);
|
|
expect(bodyTag.getAttribute("tabindex")).to.equal("-1");
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"class,tabindex"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets attributes based on the deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<body lang="en" />
|
|
</Helmet>
|
|
<Helmet>
|
|
<body lang="ja" />
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("lang")).to.equal("ja");
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"lang"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("handles valueless attributes", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("hidden")).to.equal("true");
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"hidden"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears body attributes that are handled within helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="en" hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("lang")).to.be.null;
|
|
expect(bodyTag.getAttribute("hidden")).to.be.null;
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
null
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("updates with multiple additions and removals - overwrite and new", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="en" hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="ja" id="body-tag" title="body tag" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("hidden")).to.equal(null);
|
|
expect(bodyTag.getAttribute("lang")).to.equal("ja");
|
|
expect(bodyTag.getAttribute("id")).to.equal("body-tag");
|
|
expect(bodyTag.getAttribute("title")).to.equal(
|
|
"body tag"
|
|
);
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"lang,id,title"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("updates with multiple additions and removals - all new", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="en" hidden />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body id="body-tag" title="body tag" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("hidden")).to.equal(null);
|
|
expect(bodyTag.getAttribute("lang")).to.equal(null);
|
|
expect(bodyTag.getAttribute("id")).to.equal("body-tag");
|
|
expect(bodyTag.getAttribute("title")).to.equal(
|
|
"body tag"
|
|
);
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"id,title"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
context("initialized outside of helmet", () => {
|
|
before(() => {
|
|
const bodyTag = document.body;
|
|
bodyTag.setAttribute("test", "test");
|
|
});
|
|
|
|
it("attributes are not cleared", done => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("test")).to.equal("test");
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
null
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("attributes are overwritten if specified in helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body test="helmet-attr" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("test")).to.equal(
|
|
"helmet-attr"
|
|
);
|
|
expect(bodyTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(
|
|
"test"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("attributes are cleared once managed in helmet", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body test="helmet-attr" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const bodyTag = document.body;
|
|
|
|
expect(bodyTag.getAttribute("test")).to.equal(null);
|
|
expect(
|
|
bodyTag.getAttribute(HELMET_ATTRIBUTE)
|
|
).to.equal(null);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("onChangeClientState", () => {
|
|
it("when handling client state change, calls the function with new state, addedTags and removedTags ", done => {
|
|
const spy = sinon.spy();
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet onChangeClientState={spy}>
|
|
<base href="http://mysite.com/" />
|
|
<link
|
|
href="http://localhost/helmet"
|
|
rel="canonical"
|
|
/>
|
|
<meta charSet="utf-8" />
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
<title>Main Title</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.called).to.equal(true);
|
|
const newState = spy.getCall(0).args[0];
|
|
const addedTags = spy.getCall(0).args[1];
|
|
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(addedTags).to.have.property("baseTag");
|
|
expect(addedTags.baseTag).to.have.deep.property("[0]");
|
|
expect(addedTags.baseTag[0].outerHTML).to.equal(
|
|
`<base href="http://mysite.com/" data-react-helmet="true">`
|
|
);
|
|
|
|
expect(addedTags).to.have.property("metaTags");
|
|
expect(addedTags.metaTags).to.have.deep.property("[0]");
|
|
expect(addedTags.metaTags[0].outerHTML).to.equal(
|
|
`<meta charset="utf-8" data-react-helmet="true">`
|
|
);
|
|
|
|
expect(addedTags).to.have.property("linkTags");
|
|
expect(addedTags.linkTags).to.have.deep.property("[0]");
|
|
expect(addedTags.linkTags[0].outerHTML).to.equal(
|
|
`<link href="http://localhost/helmet" rel="canonical" data-react-helmet="true">`
|
|
);
|
|
|
|
expect(addedTags).to.have.property("scriptTags");
|
|
expect(addedTags.scriptTags).to.have.deep.property("[0]");
|
|
expect(addedTags.scriptTags[0].outerHTML).to.equal(
|
|
`<script src="http://localhost/test.js" type="text/javascript" data-react-helmet="true"></script>`
|
|
);
|
|
|
|
expect(removedTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("calls the deepest defined callback with the deepest state", done => {
|
|
const spy = sinon.spy();
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet onChangeClientState={spy}>
|
|
<title>Main Title</title>
|
|
</Helmet>
|
|
<Helmet>
|
|
<title>Deeper Title</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.callCount).to.equal(1);
|
|
expect(spy.getCall(0).args[0]).to.contain({
|
|
title: "Deeper Title"
|
|
});
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("base tag", () => {
|
|
it("updates base tag", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<base href="http://mysite.com/" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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/"
|
|
);
|
|
});
|
|
|
|
expect(filteredTags.length).to.equal(1);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears the base tag if one is not specified", done => {
|
|
ReactDOM.render(
|
|
<Helmet base={{href: "http://mysite.com/"}} />,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`base[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'href' are not accepted", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<base property="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`base[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets base tag based on deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<base href="http://mysite.com" />
|
|
</Helmet>
|
|
<Helmet>
|
|
<base href="http://mysite.com/public" />
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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]")
|
|
.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(
|
|
`<base href="http://mysite.com/public" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<base href={undefined} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`base[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("meta tags", () => {
|
|
it("updates meta tags", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta charSet="utf-8" />
|
|
<meta name="description" content="Test description" />
|
|
<meta httpEquiv="content-type" content="text/html" />
|
|
<meta property="og:type" content="article" />
|
|
<meta itemProp="name" content="Test name itemprop" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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")
|
|
);
|
|
});
|
|
|
|
expect(filteredTags.length).to.be.at.least(4);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears all meta tags if none are specified", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta name="description" content="Test description" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' are not accepted", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta href="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets meta tags based on deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="description"
|
|
content="Test description"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content="Inner description"
|
|
/>
|
|
<meta name="keywords" content="test,meta,tags" />
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
const thirdTag = existingTags[2];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.be.equal(3);
|
|
|
|
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(
|
|
`<meta charset="utf-8" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<meta name="keywords" content="test,meta,tags" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("allows duplicate meta tags if specified in the same component", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta name="description" content="Test description" />
|
|
<meta
|
|
name="description"
|
|
content="Duplicate description"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.equal(2);
|
|
|
|
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(
|
|
`<meta name="description" content="Test description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<meta name="description" content="Duplicate description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("overrides duplicate meta tags with single meta tag in a nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content="Test description"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="Duplicate description"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content="Inner description"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.equal(1);
|
|
|
|
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(
|
|
`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("overrides single meta tag with duplicate meta tags in a nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content="Test description"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content="Inner description"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="Inner duplicate description"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.equal(2);
|
|
|
|
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(
|
|
`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<meta name="description" content="Inner duplicate description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta
|
|
name={undefined}
|
|
content="Inner duplicate description"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`meta[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("link tags", () => {
|
|
it("updates link tags", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link href="http://localhost/helmet" rel="canonical" />
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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")
|
|
);
|
|
});
|
|
|
|
expect(filteredTags.length).to.be.at.least(2);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears all link tags if none are specified", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link href="http://localhost/helmet" rel="canonical" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
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);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'href' or 'rel' are not accepted, even if they are valid for other tags", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link httpEquiv="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("tags 'rel' and 'href' properly use 'rel' as the primary identification for this tag, regardless of ordering", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<link
|
|
href="http://localhost/helmet"
|
|
rel="canonical"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/new"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
href="http://localhost/helmet/newest"
|
|
rel="canonical"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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.equal(1);
|
|
|
|
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(
|
|
`<link href="http://localhost/helmet/newest" rel="canonical" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("tags with rel='stylesheet' uses the href as the primary identification of the tag, regardless of ordering", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
media="all"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
rel="stylesheet"
|
|
href="http://localhost/inner.css"
|
|
type="text/css"
|
|
media="all"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`link[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.equal(2);
|
|
|
|
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("rel")).to.equal("stylesheet");
|
|
expect(firstTag.getAttribute("type")).to.equal("text/css");
|
|
expect(firstTag.getAttribute("media")).to.equal("all");
|
|
expect(firstTag.outerHTML).to.equal(
|
|
`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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("type")).to.equal("text/css");
|
|
expect(secondTag.getAttribute("media")).to.equal("all");
|
|
expect(secondTag.outerHTML).to.equal(
|
|
`<link rel="stylesheet" href="http://localhost/inner.css" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets link tags based on deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet"
|
|
/>
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
media="all"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/innercomponent"
|
|
/>
|
|
<link
|
|
href="http://localhost/inner.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
media="all"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`link[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
const thirdTag = existingTags[2];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.be.at.least(2);
|
|
|
|
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("rel")).to.equal("stylesheet");
|
|
expect(firstTag.getAttribute("type")).to.equal("text/css");
|
|
expect(firstTag.getAttribute("media")).to.equal("all");
|
|
expect(firstTag.outerHTML).to.equal(
|
|
`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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("rel")).to.equal("canonical");
|
|
expect(secondTag.outerHTML).to.equal(
|
|
`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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("rel")).to.equal("stylesheet");
|
|
expect(thirdTag.getAttribute("type")).to.equal("text/css");
|
|
expect(thirdTag.getAttribute("media")).to.equal("all");
|
|
expect(thirdTag.outerHTML).to.equal(
|
|
`<link href="http://localhost/inner.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("allows duplicate link tags if specified in the same component", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link rel="canonical" href="http://localhost/helmet" />
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/component"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`link[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.be.at.least(2);
|
|
|
|
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(
|
|
`<link rel="canonical" href="http://localhost/helmet" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("overrides duplicate link tags with a single link tag in a nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet"
|
|
/>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/component"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/innercomponent"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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]")
|
|
.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(
|
|
`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("overrides single link tag with duplicate link tags in a nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet"
|
|
/>
|
|
</Helmet>
|
|
<Helmet>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/component"
|
|
/>
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/innercomponent"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`link[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.be.equal(2);
|
|
|
|
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(
|
|
`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
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(
|
|
`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link rel="icon" sizes="192x192" href={null} />
|
|
<link
|
|
rel="canonical"
|
|
href="http://localhost/helmet/component"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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]")
|
|
.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(
|
|
`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("script tags", () => {
|
|
it("updates script tags", done => {
|
|
const scriptInnerHTML = `
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "NewsArticle",
|
|
"url": "http://localhost/helmet"
|
|
}
|
|
`;
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
<script
|
|
src="http://localhost/test2.js"
|
|
type="text/javascript"
|
|
/>
|
|
<script type="application/ld+json">
|
|
{scriptInnerHTML}
|
|
</script>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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)
|
|
);
|
|
});
|
|
|
|
expect(filteredTags.length).to.be.at.least(3);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears all scripts tags if none are specified", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'src' are not accepted", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script property="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets script tags based on deepest nested component", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
<script
|
|
src="http://localhost/test2.js"
|
|
type="text/javascript"
|
|
/>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
const firstTag = existingTags[0];
|
|
const secondTag = existingTags[1];
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
|
|
expect(existingTags.length).to.be.at.least(2);
|
|
|
|
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(
|
|
`<script src="http://localhost/test.js" type="text/javascript" ${HELMET_ATTRIBUTE}="true"></script>`
|
|
);
|
|
|
|
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(
|
|
`<script src="http://localhost/test2.js" type="text/javascript" ${HELMET_ATTRIBUTE}="true"></script>`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("sets undefined attribute values to empty strings", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script src="foo.js" async={undefined} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTag = headElement.querySelector(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTag).to.not.equal(undefined);
|
|
expect(existingTag.outerHTML).to.be
|
|
.a("string")
|
|
.that.equals(
|
|
`<script src="foo.js" async="" ${HELMET_ATTRIBUTE}="true"></script>`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute (src) is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script src={undefined} type="text/javascript" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute (innerHTML) is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script innerHTML={undefined} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("noscript tags", () => {
|
|
it("updates noscript tags", done => {
|
|
const noscriptInnerHTML = `<link rel="stylesheet" type="text/css" href="foo.css" />`;
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<noscript id="bar">{noscriptInnerHTML}</noscript>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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"
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears all noscripts tags if none are specified", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<noscript id="bar" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`script[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'innerHTML' are not accepted", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<noscript property="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`noscript[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<noscript>{undefined}</noscript>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`noscript[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("style tags", () => {
|
|
it("updates style tags", done => {
|
|
const cssText1 = `
|
|
body {
|
|
background-color: green;
|
|
}
|
|
`;
|
|
const cssText2 = `
|
|
p {
|
|
font-size: 12px;
|
|
}
|
|
`;
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style type="text/css">{cssText1}</style>
|
|
<style>{cssText2}</style>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`style[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
|
|
const [firstTag, secondTag] = existingTags;
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.be.equal(2);
|
|
|
|
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(
|
|
`<style type="text/css" ${HELMET_ATTRIBUTE}="true">${cssText1}</style>`
|
|
);
|
|
|
|
expect(existingTags).to.have.deep
|
|
.property("[1]")
|
|
.that.is.an.instanceof(Element);
|
|
expect(secondTag.innerHTML).to.equal(cssText2);
|
|
expect(secondTag.outerHTML).to.equal(
|
|
`<style ${HELMET_ATTRIBUTE}="true">${cssText2}</style>`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("clears all style tags if none are specified", done => {
|
|
const cssText = `
|
|
body {
|
|
background-color: green;
|
|
}
|
|
`;
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style type="text/css">{cssText}</style>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
ReactDOM.render(<Helmet />, container);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`style[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("tags without 'cssText' are not accepted", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style property="won't work" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const existingTags = headElement.querySelectorAll(
|
|
`style[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
|
|
expect(existingTags).to.not.equal(undefined);
|
|
expect(existingTags.length).to.equal(0);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not render tag when primary attribute is null", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style>{undefined}</style>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
const tagNodes = headElement.querySelectorAll(
|
|
`style[${HELMET_ATTRIBUTE}]`
|
|
);
|
|
const existingTags = Array.prototype.slice.call(tagNodes);
|
|
expect(existingTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("deferred tags", () => {
|
|
beforeEach(() => {
|
|
window.__spy__ = sinon.spy();
|
|
});
|
|
|
|
afterEach(() => {
|
|
delete window.__spy__;
|
|
});
|
|
|
|
it("executes synchronously when defer={true} and async otherwise", done => {
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet defer={false}>
|
|
<script>
|
|
window.__spy__(1)
|
|
</script>
|
|
</Helmet>
|
|
<Helmet>
|
|
<script>
|
|
window.__spy__(2)
|
|
</script>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
expect(window.__spy__.callCount).to.equal(1);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(window.__spy__.callCount).to.equal(2);
|
|
expect(window.__spy__.args).to.deep.equal([[1], [2]]);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("server", () => {
|
|
const stringifiedHtmlAttributes = `lang="ga" class="myClassName"`;
|
|
const stringifiedBodyAttributes = `lang="ga" class="myClassName"`;
|
|
const stringifiedTitle = `<title ${HELMET_ATTRIBUTE}="true">Dangerous <script> include</title>`;
|
|
const unEncodedStringifiedTitle = `<title ${HELMET_ATTRIBUTE}="true">This is text and & and '.</title>`;
|
|
const stringifiedTitleWithItemprop = `<title ${HELMET_ATTRIBUTE}="true" itemprop="name">Title with Itemprop</title>`;
|
|
const stringifiedTitleWithTitleExpression = `<title ${HELMET_ATTRIBUTE}="true">Title: Some Great Title</title>`;
|
|
const stringifiedBaseTag = `<base ${HELMET_ATTRIBUTE}="true" target="_blank" href="http://localhost/"/>`;
|
|
|
|
const stringifiedMetaTags = [
|
|
`<meta ${HELMET_ATTRIBUTE}="true" charset="utf-8"/>`,
|
|
`<meta ${HELMET_ATTRIBUTE}="true" name="description" content="Test description & encoding of special characters like ' " > < \`"/>`,
|
|
`<meta ${HELMET_ATTRIBUTE}="true" http-equiv="content-type" content="text/html"/>`,
|
|
`<meta ${HELMET_ATTRIBUTE}="true" property="og:type" content="article"/>`,
|
|
`<meta ${HELMET_ATTRIBUTE}="true" itemprop="name" content="Test name itemprop"/>`
|
|
].join("");
|
|
|
|
const stringifiedLinkTags = [
|
|
`<link ${HELMET_ATTRIBUTE}="true" href="http://localhost/helmet" rel="canonical"/>`,
|
|
`<link ${HELMET_ATTRIBUTE}="true" href="http://localhost/style.css" rel="stylesheet" type="text/css"/>`
|
|
].join("");
|
|
|
|
const stringifiedScriptTags = [
|
|
`<script ${HELMET_ATTRIBUTE}="true" src="http://localhost/test.js" type="text/javascript"></script>`,
|
|
`<script ${HELMET_ATTRIBUTE}="true" src="http://localhost/test2.js" type="text/javascript"></script>`
|
|
].join("");
|
|
|
|
const stringifiedNoscriptTags = [
|
|
`<noscript ${HELMET_ATTRIBUTE}="true" id="foo"><link rel="stylesheet" type="text/css" href="/style.css" /></noscript>`,
|
|
`<noscript ${HELMET_ATTRIBUTE}="true" id="bar"><link rel="stylesheet" type="text/css" href="/style2.css" /></noscript>`
|
|
].join("");
|
|
|
|
const stringifiedStyleTags = [
|
|
`<style ${HELMET_ATTRIBUTE}="true" type="text/css">body {background-color: green;}</style>`,
|
|
`<style ${HELMET_ATTRIBUTE}="true" type="text/css">p {font-size: 12px;}</style>`
|
|
].join("");
|
|
|
|
before(() => {
|
|
Helmet.canUseDOM = false;
|
|
});
|
|
|
|
it("provides initial values if no state is found", () => {
|
|
let head = Helmet.rewind();
|
|
head = Helmet.rewind();
|
|
|
|
expect(head.meta).to.exist;
|
|
expect(head.meta).to.respondTo("toString");
|
|
|
|
expect(head.meta.toString()).to.equal("");
|
|
});
|
|
|
|
it("encodes special characters in title", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{`Dangerous <script> include`}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
expect(head.title.toString()).to.equal(stringifiedTitle);
|
|
});
|
|
|
|
it("opts out of string encoding", () => {
|
|
ReactDOM.render(
|
|
<Helmet encodeSpecialCharacters={false}>
|
|
<title>{"This is text and & and '."}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
expect(head.title.toString()).to.equal(unEncodedStringifiedTitle);
|
|
});
|
|
|
|
it("renders title as React component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{`Dangerous <script> include`}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toComponent");
|
|
|
|
const titleComponent = head.title.toComponent();
|
|
|
|
expect(titleComponent).to.be.an("array").that.has.length.of(1);
|
|
|
|
titleComponent.forEach(title => {
|
|
expect(title).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "title");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{titleComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedTitle}</div>`);
|
|
});
|
|
|
|
it("renders title with itemprop name as React component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title itemProp="name">Title with Itemprop</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toComponent");
|
|
|
|
const titleComponent = head.title.toComponent();
|
|
|
|
expect(titleComponent).to.be.an("array").that.has.length.of(1);
|
|
|
|
titleComponent.forEach(title => {
|
|
expect(title).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "title");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{titleComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedTitleWithItemprop}</div>`);
|
|
});
|
|
|
|
it("renders base tag as React component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<base target="_blank" href="http://localhost/" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.base).to.exist;
|
|
expect(head.base).to.respondTo("toComponent");
|
|
|
|
const baseComponent = head.base.toComponent();
|
|
|
|
expect(baseComponent).to.be.an("array").that.has.length.of(1);
|
|
|
|
baseComponent.forEach(base => {
|
|
expect(base).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "base");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{baseComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedBaseTag}</div>`);
|
|
});
|
|
|
|
it("renders meta tags as React components", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="description"
|
|
content={
|
|
"Test description & encoding of special characters like ' \" > < `"
|
|
}
|
|
/>
|
|
<meta httpEquiv="content-type" content="text/html" />
|
|
<meta property="og:type" content="article" />
|
|
<meta itemProp="name" content="Test name itemprop" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.meta).to.exist;
|
|
expect(head.meta).to.respondTo("toComponent");
|
|
|
|
const metaComponent = head.meta.toComponent();
|
|
|
|
expect(metaComponent).to.be.an("array").that.has.length.of(5);
|
|
|
|
metaComponent.forEach(meta => {
|
|
expect(meta).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "meta");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{metaComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedMetaTags}</div>`);
|
|
});
|
|
|
|
it("renders link tags as React components", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link href="http://localhost/helmet" rel="canonical" />
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.link).to.exist;
|
|
expect(head.link).to.respondTo("toComponent");
|
|
|
|
const linkComponent = head.link.toComponent();
|
|
|
|
expect(linkComponent).to.be.an("array").that.has.length.of(2);
|
|
|
|
linkComponent.forEach(link => {
|
|
expect(link).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "link");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{linkComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedLinkTags}</div>`);
|
|
});
|
|
|
|
it("renders script tags as React components", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
<script
|
|
src="http://localhost/test2.js"
|
|
type="text/javascript"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.script).to.exist;
|
|
expect(head.script).to.respondTo("toComponent");
|
|
|
|
const scriptComponent = head.script.toComponent();
|
|
|
|
expect(scriptComponent).to.be.an("array").that.has.length.of(2);
|
|
|
|
scriptComponent.forEach(script => {
|
|
expect(script).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "script");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{scriptComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedScriptTags}</div>`);
|
|
});
|
|
|
|
it("renders noscript tags as React components", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<noscript id="foo">{`<link rel="stylesheet" type="text/css" href="/style.css" />`}</noscript>
|
|
<noscript id="bar">{`<link rel="stylesheet" type="text/css" href="/style2.css" />`}</noscript>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.noscript).to.exist;
|
|
expect(head.noscript).to.respondTo("toComponent");
|
|
|
|
const noscriptComponent = head.noscript.toComponent();
|
|
|
|
expect(noscriptComponent).to.be.an("array").that.has.length.of(2);
|
|
|
|
noscriptComponent.forEach(noscript => {
|
|
expect(noscript).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "noscript");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{noscriptComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedNoscriptTags}</div>`);
|
|
});
|
|
|
|
it("renders style tags as React components", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style type="text/css">{`body {background-color: green;}`}</style>
|
|
<style type="text/css">{`p {font-size: 12px;}`}</style>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.style).to.exist;
|
|
expect(head.style).to.respondTo("toComponent");
|
|
|
|
const styleComponent = head.style.toComponent();
|
|
|
|
expect(styleComponent).to.be.an("array").that.has.length.of(2);
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{styleComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedStyleTags}</div>`);
|
|
});
|
|
|
|
it("renders title tag as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{"Dangerous <script> include"}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
expect(head.title.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedTitle);
|
|
});
|
|
|
|
it("renders title and allows children containing expressions", done => {
|
|
const someValue = "Some Great Title";
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Title: {someValue}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(head.title.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedTitleWithTitleExpression);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("renders title with itemprop name as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title itemProp="name">Title with Itemprop</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
const titleString = head.title.toString();
|
|
expect(titleString).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedTitleWithItemprop);
|
|
});
|
|
|
|
it("renders base tags as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<base target="_blank" href="http://localhost/" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.base).to.exist;
|
|
expect(head.base).to.respondTo("toString");
|
|
|
|
expect(head.base.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedBaseTag);
|
|
});
|
|
|
|
it("renders meta tags as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="description"
|
|
content="Test description & encoding of special characters like ' " > < `"
|
|
/>
|
|
<meta httpEquiv="content-type" content="text/html" />
|
|
<meta property="og:type" content="article" />
|
|
<meta itemProp="name" content="Test name itemprop" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.meta).to.exist;
|
|
expect(head.meta).to.respondTo("toString");
|
|
|
|
expect(head.meta.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedMetaTags);
|
|
});
|
|
|
|
it("renders link tags as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<link href="http://localhost/helmet" rel="canonical" />
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.link).to.exist;
|
|
expect(head.link).to.respondTo("toString");
|
|
|
|
expect(head.link.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedLinkTags);
|
|
});
|
|
|
|
it("renders script tags as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
<script
|
|
src="http://localhost/test2.js"
|
|
type="text/javascript"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.script).to.exist;
|
|
expect(head.script).to.respondTo("toString");
|
|
|
|
expect(head.script.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedScriptTags);
|
|
});
|
|
|
|
it("renders style tags as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<style type="text/css">{`body {background-color: green;}`}</style>
|
|
<style type="text/css">{`p {font-size: 12px;}`}</style>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.style).to.exist;
|
|
expect(head.style).to.respondTo("toString");
|
|
|
|
expect(head.style.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedStyleTags);
|
|
});
|
|
|
|
it("renders html attributes as component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="ga" className="myClassName" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const {htmlAttributes} = Helmet.rewind();
|
|
const attrs = htmlAttributes.toComponent();
|
|
|
|
expect(attrs).to.exist;
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<html lang="en" {...attrs} />
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<html ${stringifiedHtmlAttributes}></html>`);
|
|
});
|
|
|
|
it("renders html attributes as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<html lang="ga" className="myClassName" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.htmlAttributes).to.exist;
|
|
expect(head.htmlAttributes).to.respondTo("toString");
|
|
|
|
expect(head.htmlAttributes.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedHtmlAttributes);
|
|
});
|
|
|
|
it("renders body attributes as component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="ga" className="myClassName" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const {bodyAttributes} = Helmet.rewind();
|
|
const attrs = bodyAttributes.toComponent();
|
|
|
|
expect(attrs).to.exist;
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<body lang="en" {...attrs} />
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<body ${stringifiedBodyAttributes}></body>`);
|
|
});
|
|
|
|
it("renders body attributes as string", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<body lang="ga" className="myClassName" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const body = Helmet.rewind();
|
|
|
|
expect(body.bodyAttributes).to.exist;
|
|
expect(body.bodyAttributes).to.respondTo("toString");
|
|
|
|
expect(body.bodyAttributes.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedBodyAttributes);
|
|
});
|
|
|
|
it("does not encode all characters with HTML character entity equivalents", () => {
|
|
const chineseTitle = "膣膗 鍆錌雔";
|
|
const stringifiedChineseTitle = `<title ${HELMET_ATTRIBUTE}="true">${chineseTitle}</title>`;
|
|
|
|
ReactDOM.render(
|
|
<div>
|
|
<Helmet>
|
|
<title>{chineseTitle}</title>
|
|
</Helmet>
|
|
</div>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
expect(head.title.toString()).to.be
|
|
.a("string")
|
|
.that.equals(stringifiedChineseTitle);
|
|
});
|
|
|
|
it("rewind() provides a fallback object for empty Helmet state", () => {
|
|
ReactDOM.render(<div />, container);
|
|
|
|
const head = Helmet.rewind();
|
|
|
|
expect(head.htmlAttributes).to.exist;
|
|
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.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
expect(head.title.toString()).to.equal(
|
|
`<title ${HELMET_ATTRIBUTE}="true"></title>`
|
|
);
|
|
expect(head.title).to.respondTo("toComponent");
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{head.title.toComponent()}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(
|
|
`<div><title ${HELMET_ATTRIBUTE}="true"></title></div>`
|
|
);
|
|
|
|
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.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.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.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.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.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;
|
|
});
|
|
|
|
it("does not render undefined attribute values", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<script src="foo.js" async={undefined} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const {script} = Helmet.rewind();
|
|
const stringifiedScriptTag = script.toString();
|
|
|
|
expect(stringifiedScriptTag).to.be
|
|
.a("string")
|
|
.that.equals(
|
|
`<script ${HELMET_ATTRIBUTE}="true" src="foo.js" async></script>`
|
|
);
|
|
});
|
|
|
|
context("renderStatic", () => {
|
|
it("does html encode title", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{`Dangerous <script> include`}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.renderStatic();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toString");
|
|
|
|
expect(head.title.toString()).to.equal(stringifiedTitle);
|
|
});
|
|
|
|
it("renders title as React component", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>{`Dangerous <script> include`}</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
const head = Helmet.renderStatic();
|
|
|
|
expect(head.title).to.exist;
|
|
expect(head.title).to.respondTo("toComponent");
|
|
|
|
const titleComponent = head.title.toComponent();
|
|
|
|
expect(titleComponent).to.be.an("array").that.has.length.of(1);
|
|
|
|
titleComponent.forEach(title => {
|
|
expect(title).to.be
|
|
.an("object")
|
|
.that.contains.property("type", "title");
|
|
});
|
|
|
|
const markup = ReactServer.renderToStaticMarkup(
|
|
<div>
|
|
{titleComponent}
|
|
</div>
|
|
);
|
|
|
|
expect(markup).to.be
|
|
.a("string")
|
|
.that.equals(`<div>${stringifiedTitle}</div>`);
|
|
});
|
|
});
|
|
|
|
after(() => {
|
|
Helmet.canUseDOM = true;
|
|
});
|
|
});
|
|
|
|
describe("misc", () => {
|
|
it("throws in rewind() when a DOM is present", () => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Fancy title</title>
|
|
</Helmet>,
|
|
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(
|
|
<Helmet>
|
|
<title>Fancy title</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(Helmet.peek().title).to.be.equal("Fancy title");
|
|
Helmet.canUseDOM = false;
|
|
expect(Helmet.peek().title).to.be.equal("Fancy title");
|
|
Helmet.canUseDOM = true;
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("encodes special characters", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
content={'This is "quoted" text and & and \'.'}
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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]")
|
|
.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(
|
|
`<meta name="description" content="This is "quoted" text and & and '." ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("does not change the DOM if it recevies identical props", done => {
|
|
const spy = sinon.spy();
|
|
ReactDOM.render(
|
|
<Helmet onChangeClientState={spy}>
|
|
<meta name="description" content="Test description" />
|
|
<title>Test Title</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
// Re-rendering will pass new props to an already mounted Helmet
|
|
ReactDOM.render(
|
|
<Helmet onChangeClientState={spy}>
|
|
<meta name="description" content="Test description" />
|
|
<title>Test Title</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.callCount).to.equal(1);
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("does not write the DOM if the client and server are identical", done => {
|
|
headElement.innerHTML = `<script ${HELMET_ATTRIBUTE}="true" src="http://localhost/test.js" type="text/javascript" />`;
|
|
|
|
const spy = sinon.spy();
|
|
ReactDOM.render(
|
|
<Helmet onChangeClientState={spy}>
|
|
<script
|
|
src="http://localhost/test.js"
|
|
type="text/javascript"
|
|
/>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.called).to.equal(true);
|
|
|
|
const [, addedTags, removedTags] = spy.getCall(0).args;
|
|
|
|
expect(addedTags).to.be.empty;
|
|
expect(removedTags).to.be.empty;
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("only adds new tags and preserves tags when rendering additional Helmet instances", done => {
|
|
const spy = sinon.spy();
|
|
let addedTags;
|
|
let removedTags;
|
|
ReactDOM.render(
|
|
<Helmet onChangeClientState={spy}>
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<meta name="description" content="Test description" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.called).to.equal(true);
|
|
addedTags = spy.getCall(0).args[1];
|
|
removedTags = spy.getCall(0).args[2];
|
|
|
|
expect(addedTags).to.have.property("metaTags");
|
|
expect(addedTags.metaTags).to.have.deep.property("[0]");
|
|
expect(addedTags.metaTags[0].outerHTML).to.equal(
|
|
`<meta name="description" content="Test description" data-react-helmet="true">`
|
|
);
|
|
expect(addedTags).to.have.property("linkTags");
|
|
expect(addedTags.linkTags).to.have.deep.property("[0]");
|
|
expect(addedTags.linkTags[0].outerHTML).to.equal(
|
|
`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" data-react-helmet="true">`
|
|
);
|
|
expect(removedTags).to.be.empty;
|
|
|
|
// Re-rendering will pass new props to an already mounted Helmet
|
|
ReactDOM.render(
|
|
<Helmet onChangeClientState={spy}>
|
|
<link
|
|
href="http://localhost/style.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<link
|
|
href="http://localhost/style2.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<meta name="description" content="New description" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(spy.callCount).to.equal(2);
|
|
addedTags = spy.getCall(1).args[1];
|
|
removedTags = spy.getCall(1).args[2];
|
|
|
|
expect(addedTags).to.have.property("metaTags");
|
|
expect(addedTags.metaTags).to.have.deep.property("[0]");
|
|
expect(addedTags.metaTags[0].outerHTML).to.equal(
|
|
`<meta name="description" content="New description" data-react-helmet="true">`
|
|
);
|
|
expect(addedTags).to.have.property("linkTags");
|
|
expect(addedTags.linkTags).to.have.deep.property("[0]");
|
|
expect(addedTags.linkTags[0].outerHTML).to.equal(
|
|
`<link href="http://localhost/style2.css" rel="stylesheet" type="text/css" data-react-helmet="true">`
|
|
);
|
|
expect(removedTags).to.have.property("metaTags");
|
|
expect(removedTags.metaTags).to.have.deep.property("[0]");
|
|
expect(removedTags.metaTags[0].outerHTML).to.equal(
|
|
`<meta name="description" content="Test description" data-react-helmet="true">`
|
|
);
|
|
expect(removedTags).to.not.have.property("linkTags");
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it("does not accept nested Helmets", done => {
|
|
const warn = sinon.stub(console, "warn");
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
<Helmet>
|
|
<title>Title you will never see</title>
|
|
</Helmet>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Test Title");
|
|
expect(warn.called).to.be.true;
|
|
|
|
const [warning] = warn.getCall(0).args;
|
|
expect(warning).to.equal(
|
|
"You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information."
|
|
);
|
|
|
|
warn.restore();
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("warns on invalid elements", done => {
|
|
const warn = sinon.stub(console, "warn");
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
<div>
|
|
<title>Title you will never see</title>
|
|
</div>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Test Title");
|
|
expect(warn.called).to.be.true;
|
|
|
|
const [warning] = warn.getCall(0).args;
|
|
expect(warning).to.equal(
|
|
"Only elements types base, body, head, html, link, meta, noscript, script, style, title are allowed. Helmet does not support rendering <div> elements. Refer to our API for more information."
|
|
);
|
|
|
|
warn.restore();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("warns on invalid self-closing elements", done => {
|
|
const warn = sinon.stub(console, "warn");
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
<div customAttribute={true} />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Test Title");
|
|
expect(warn.called).to.be.true;
|
|
|
|
const [warning] = warn.getCall(0).args;
|
|
expect(warning).to.equal(
|
|
"Only elements types base, body, head, html, link, meta, noscript, script, style, title are allowed. Helmet does not support rendering <div> elements. Refer to our API for more information."
|
|
);
|
|
|
|
warn.restore();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("throws on invalid strings as children", () => {
|
|
const renderInvalid = () =>
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
<link
|
|
href="http://localhost/helmet"
|
|
rel="canonical"
|
|
>{`test`}</link>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
expect(renderInvalid).to.throw(
|
|
Error,
|
|
"<link /> elements are self-closing and can not contain children. Refer to our API for more information."
|
|
);
|
|
});
|
|
|
|
it("throws on invalid children", () => {
|
|
const renderInvalid = () =>
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<title>Test Title</title>
|
|
<script>
|
|
<title>Title you will never see</title>
|
|
</script>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
expect(renderInvalid).to.throw(
|
|
Error,
|
|
"Helmet expects a string as a child of <script>. Did you forget to wrap your children in braces? ( <script>{``}</script> ) Refer to our API for more information."
|
|
);
|
|
});
|
|
|
|
it("handles undefined children", done => {
|
|
const charSet = undefined;
|
|
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
{charSet && <meta charSet={charSet} />}
|
|
<title>Test Title</title>
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
expect(document.title).to.equal("Test Title");
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("recognizes valid tags regardless of attribute ordering", done => {
|
|
ReactDOM.render(
|
|
<Helmet>
|
|
<meta content="Test Description" name="description" />
|
|
</Helmet>,
|
|
container
|
|
);
|
|
|
|
requestAnimationFrame(() => {
|
|
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]")
|
|
.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(
|
|
`<meta content="Test Description" name="description" ${HELMET_ATTRIBUTE}="true">`
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it("requestAnimationFrame works as expected", done => {
|
|
requestAnimationFrame(cb => {
|
|
expect(cb).to.exist;
|
|
expect(cb).to.be.a("number");
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|