/
react-helmet-tests.tsx
131 lines (107 loc) · 3.51 KB
/
react-helmet-tests.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import * as React from "react";
import { Helmet as HelmedNamedExport, HelmetData } from "react-helmet";
import Helmet from 'react-helmet';
const Application = () =>
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
<div>
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</div>
</div>;
const helmet: HelmetData = Helmet.renderStatic();
const html = `
<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
<head>
<title>${helmet.title.toString()}</title>
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="content">
// React stuff here
</div>
</body>
</html>
`;
function HTML() {
const htmlAttrs = helmet.htmlAttributes.toComponent();
const bodyAttrs = helmet.bodyAttributes.toComponent();
return (
<html {...htmlAttrs}>
<head>
<title>{helmet.title.toComponent()}</title>
{helmet.meta.toComponent()}
{helmet.link.toComponent()}
</head>
<body {...bodyAttrs}>
<div id="content">
</div>
</body>
</html>
);
}
<Helmet
encodeSpecialCharacters={true}
titleTemplate="MySite.com - %s"
defaultTitle="My Default Title"
onChangeClientState={(newState: any) => console.log(newState)}
>
<html lang="en" />
<body className="root" />
<title itemProp="name" lang="en">My Title</title>
<base target="_blank" href="http://mysite.com/" />
<meta name="description" content="Helmet application" />
<meta property="og:type" content="article" />
<link rel="canonical" href="http://mysite.com/example" />
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
<script src="http://include.com/pathtojs.js" type="text/javascript" />
<script type="application/ld+json">{`
{
"@context": "http://schema.org"
}
`}</script>
<noscript>{`
<link rel="stylesheet" type="text/css" href="foo.css" />
`}</noscript>
<style type="text/css">{`
body {
background-color: blue;
}
p {
font-size: 12px;
}
`}</style>
</Helmet>;
// undefined value
<Helmet htmlAttributes={{ id: undefined }} />;
<Helmet bodyAttributes={{ id: undefined }} />;
// boolean value
<Helmet htmlAttributes={{ draggable: false }} />;
<Helmet bodyAttributes={{ draggable: false }} />;
// number value
<Helmet htmlAttributes={{ tabIndex: -1 }} />;
<Helmet bodyAttributes={{ tabIndex: -1 }} />;
// arbitrary data- attribute
<Helmet htmlAttributes={{ 'data-foo': 'bar' }} />;
<Helmet bodyAttributes={{ 'data-foo': 'bar' }} />;
// $ExpectError
<Helmet htmlAttributes={{ hidden: 42 }} />;
// $ExpectError
<Helmet bodyAttributes={{ hidden: 42 }} />;
// $ExpectError
<Helmet link={[ invalidProp: 'foo' ]} />;
// $ExpectError
<Helmet meta={[ invalidProp: 'foo' ]} />;