-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve
Head > script coverage (#65399)
Closes NEXT-3324
- Loading branch information
Showing
4 changed files
with
584 additions
and
489 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
282 changes: 151 additions & 131 deletions
282
test/development/pages-dir/client-navigation/fixture/pages/head.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ) | ||
| } |
Oops, something went wrong.