Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Head > script coverage #65399

Merged
merged 3 commits into from
May 6, 2024
Merged

Improve Head > script coverage #65399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b22a897
Move rendering tests to separate test suite
eps1lon May 3, 2024
1422e98
Separate `<Head />` test and test with all flag values
eps1lon May 6, 2024
7969709
Add coverage for script re-ordering
eps1lon May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion test/development/pages-dir/client-navigation/fixture/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ module.exports = {
maxInactiveAge: 1000 * 60 * 60,
},
experimental: {
strictNextHead: true,
strictNextHead: process.env.TEST_STRICT_NEXT_HEAD !== 'false',
},
}
282 changes: 151 additions & 131 deletions test/development/pages-dir/client-navigation/fixture/pages/head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,145 +1,165 @@
import React from 'react'
import Head from 'next/head'

export default () => (
<div>
<Head>
{/* this will not render */}
<meta charSet="utf-8" />
{/* this will get rendered */}
<meta charSet="iso-8859-5" />
export default function HeadPage() {
const [shouldReverseScriptOrder, reverseScriptOrder] = React.useReducer(
(b) => !b,
false
)
const [shouldInsertScript, toggleScript] = React.useReducer((b) => !b, false)

{/* this will not render */}
<meta name="viewport" content="width=device-width" />
{/* this will override the default */}
<meta name="viewport" content="width=device-width,initial-scale=1" />
const scriptAsyncTrue = <script src="/test-async-true.js" async></script>
const scriptAsyncFalse = (
<script src="/test-async-false.js" async={false}></script>
)

<meta content="my meta" />
return (
<div>
<Head>
{/* this will not render */}
<meta charSet="utf-8" />
{/* this will get rendered */}
<meta charSet="iso-8859-5" />

{/* this will not render the content prop */}
<meta name="empty-content" content={undefined} />
{/* this will not render */}
<meta name="viewport" content="width=device-width" />
{/* this will override the default */}
<meta name="viewport" content="width=device-width,initial-scale=1" />

{/* allow duplicates for specific tags */}
<meta property="article:tag" content="tag1" key="tag1key" />
<meta property="article:tag" content="tag2" key="tag2key" />
<meta property="dedupe:tag" content="tag3" key="same-key" />
<meta property="dedupe:tag" content="tag4" key="same-key" />
<meta property="og:image" content="ogImageTag1" key="ogImageTag1Key" />
<meta property="og:image" content="ogImageTag2" key="ogImageTag2Key" />
<meta
property="og:image:alt"
content="ogImageAltTag1"
key="ogImageAltTag1Key"
/>
<meta
property="og:image:alt"
content="ogImageAltTag2"
key="ogImageAltTag2Key"
/>
<meta
property="og:image:width"
content="ogImageWidthTag1"
key="ogImageWidthTag1Key"
/>
<meta
property="og:image:width"
content="ogImageWidthTag2"
key="ogImageWidthTag2Key"
/>
<meta
property="og:image:height"
content="ogImageHeightTag1"
key="ogImageHeightTag1Key"
/>
<meta
property="og:image:height"
content="ogImageHeightTag2"
key="ogImageHeightTag2Key"
/>
<meta
property="og:image:type"
content="ogImageTypeTag1"
key="ogImageTypeTag1Key"
/>
<meta
property="og:image:type"
content="ogImageTypeTag2"
key="ogImageTypeTag2Key"
/>
<meta
property="og:image:secure_url"
content="ogImageSecureUrlTag1"
key="ogImageSecureUrlTag1Key"
/>
<meta
property="og:image:secure_url"
content="ogImageSecureUrlTag2"
key="ogImageSecureUrlTag2Key"
/>
<meta
property="og:image:url"
content="ogImageUrlTag1"
key="ogImageUrlTag1Key"
/>
<meta
property="og:image:url"
content="ogImageUrlTag2"
key="ogImageUrlTag2Key"
/>
<meta content="my meta" />

<meta property="fb:pages" content="fbpages1" />
<meta property="fb:pages" content="fbpages2" />
{/* this will not render the content prop */}
<meta name="empty-content" content={undefined} />

{/* both meta tags will be rendered since they use unique keys */}
<meta
name="citation_author"
content="authorName1"
key="citationAuthorTag1"
/>
<meta
name="citation_author"
content="authorName2"
key="citationAuthorTag2"
/>
{/* allow duplicates for specific tags */}
<meta property="article:tag" content="tag1" key="tag1key" />
<meta property="article:tag" content="tag2" key="tag2key" />
<meta property="dedupe:tag" content="tag3" key="same-key" />
<meta property="dedupe:tag" content="tag4" key="same-key" />
<meta property="og:image" content="ogImageTag1" key="ogImageTag1Key" />
<meta property="og:image" content="ogImageTag2" key="ogImageTag2Key" />
<meta
property="og:image:alt"
content="ogImageAltTag1"
key="ogImageAltTag1Key"
/>
<meta
property="og:image:alt"
content="ogImageAltTag2"
key="ogImageAltTag2Key"
/>
<meta
property="og:image:width"
content="ogImageWidthTag1"
key="ogImageWidthTag1Key"
/>
<meta
property="og:image:width"
content="ogImageWidthTag2"
key="ogImageWidthTag2Key"
/>
<meta
property="og:image:height"
content="ogImageHeightTag1"
key="ogImageHeightTag1Key"
/>
<meta
property="og:image:height"
content="ogImageHeightTag2"
key="ogImageHeightTag2Key"
/>
<meta
property="og:image:type"
content="ogImageTypeTag1"
key="ogImageTypeTag1Key"
/>
<meta
property="og:image:type"
content="ogImageTypeTag2"
key="ogImageTypeTag2Key"
/>
<meta
property="og:image:secure_url"
content="ogImageSecureUrlTag1"
key="ogImageSecureUrlTag1Key"
/>
<meta
property="og:image:secure_url"
content="ogImageSecureUrlTag2"
key="ogImageSecureUrlTag2Key"
/>
<meta
property="og:image:url"
content="ogImageUrlTag1"
key="ogImageUrlTag1Key"
/>
<meta
property="og:image:url"
content="ogImageUrlTag2"
key="ogImageUrlTag2Key"
/>

<React.Fragment>
<title>Fragment title</title>
<meta content="meta fragment" />
</React.Fragment>
<meta property="fb:pages" content="fbpages1" />
<meta property="fb:pages" content="fbpages2" />

{/* the following 2 link tags will both be rendered */}
<link rel="stylesheet" href="/dup-style.css" />
<link rel="stylesheet" href="/dup-style.css" />
{/* both meta tags will be rendered since they use unique keys */}
<meta
name="citation_author"
content="authorName1"
key="citationAuthorTag1"
/>
<meta
name="citation_author"
content="authorName2"
key="citationAuthorTag2"
/>

{/* only one tag will be rendered as they have the same key */}
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />
<React.Fragment>
<title>Fragment title</title>
<meta content="meta fragment" />
</React.Fragment>

{/* this should not execute twice on the client */}
<script src="/test-async-true.js" async></script>
{/* this should have async set to false on the client */}
<script src="/test-async-false.js" async={false}></script>
{/* this should not execute twice on the client (intentionally sets defer to `yas` to test boolean coercion) */}
<script src="/test-defer.js" defer="yas"></script>
{/* the following 2 link tags will both be rendered */}
<link rel="stylesheet" href="/dup-style.css" />
<link rel="stylesheet" href="/dup-style.css" />

{/* such style can be used for alternate links on _app vs individual pages */}
{['pl', 'en'].map((language) => (
<link
rel="alternate"
key={language}
hrefLang={language}
href={'/first/' + language}
/>
))}
{['pl', 'en'].map((language) => (
<link
rel="alternate"
key={language}
hrefLang={language}
href={'/last/' + language}
/>
))}
</Head>
<h1>I can have meta tags</h1>
</div>
)
{/* only one tag will be rendered as they have the same key */}
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />

{shouldInsertScript ? scriptAsyncTrue : null}
{/* this should not execute twice on the client */}
{shouldReverseScriptOrder ? scriptAsyncTrue : scriptAsyncFalse}
{/* this should have async set to false on the client */}
{shouldReverseScriptOrder ? scriptAsyncFalse : scriptAsyncTrue}
{/* this should not execute twice on the client (intentionally sets defer to `yas` to test boolean coercion) */}
<script src="/test-defer.js" defer="yas"></script>

{/* such style can be used for alternate links on _app vs individual pages */}
{['pl', 'en'].map((language) => (
<link
rel="alternate"
key={language}
hrefLang={language}
href={'/first/' + language}
/>
))}
{['pl', 'en'].map((language) => (
<link
rel="alternate"
key={language}
hrefLang={language}
href={'/last/' + language}
/>
))}
</Head>
<h1>I can have meta tags</h1>
<button id="reverseScriptOrder" onClick={reverseScriptOrder}>
Reverse script order
</button>
<button id="toggleScript" onClick={toggleScript}>
Toggle script
</button>
</div>
)
}
Loading
Loading