infrastructure-components
Version:
Infrastructure-Components configure the infrastructure of your React-App as part of your React-Components.
1,388 lines (1,158 loc) • 138 kB
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]")