test(gatsby-script): SSR and browser APIs (#35664)

* test(gatsby-script): SSR and browser APIs

Co-authored-by: Jude Agboola <[email protected]>

* Development runtime

Co-authored-by: Jude Agboola <[email protected]>

e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-ssr-browser-apis.js

@@ -0,0 +1,15 @@
+import { script } from "../../../gatsby-script-scripts"
+
+const page = `/gatsby-script-ssr-browser-apis/`
+
+it(`scripts load successfully when used via wrapPageElement`, () => {
+  cy.visit(page)
+  cy.getRecord(script.three, `success`, true).should(`equal`, `true`)
+  cy.getRecord(script.marked, `success`, true).should(`equal`, `true`)
+})
+
+it(`scripts load successfully when used via wrapRootElement`, () => {
+  cy.visit(page)
+  cy.getRecord(script.jQuery, `success`, true).should(`equal`, `true`)
+  cy.getRecord(script.popper, `success`, true).should(`equal`, `true`)
+})

e2e-tests/development-runtime/gatsby-browser.js

@@ -1,3 +1,4 @@
+import WrapPageElement from "./src/wrap-page-element"
 import WrapRootElement from "./src/wrap-root-element"
 import * as React from "react"
 
@@ -23,6 +24,10 @@ export const onPrefetchPathname = ({ pathname }) => {
   addLogEntry(`onPrefetchPathname`, pathname)
 }
 
+export const wrapPageElement = ({ element, props }) => (
+  <WrapPageElement element={element} props={props} />
+)
+
 export const wrapRootElement = ({ element }) => (
   <WrapRootElement element={element} />
 )

e2e-tests/development-runtime/gatsby-script-scripts.js

@@ -1,28 +1,40 @@
 export const script = {
   three: `three`,
   marked: `marked`,
+  jQuery: `jQuery`,
+  popper: `popper`,
 }
 
 export const scripts = {
   [script.three]: `https://unpkg.com/[email protected]/build/three.js`,
   [script.marked]: `https://cdn.jsdelivr.net/npm/marked/marked.min.js`,
+  [script.jQuery]: `https://code.jquery.com/jquery-3.4.1.min.js`,
+  [script.popper]: `https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js`,
 }
 
 export const scriptStrategyIndex = {
   [script.three]: `post-hydrate`,
   [script.marked]: `idle`,
+  [script.jQuery]: `post-hydrate`,
+  [script.popper]: `idle`,
 }
 
 export const scriptSuccessIndex = {
   // @ts-ignore
   [script.three]: () => typeof THREE === `object`,
   // @ts-ignore
   [script.marked]: () => typeof marked === `object`,
+  // @ts-ignore
+  [script.jQuery]: () => typeof jQuery === `function`,
+  // @ts-ignore
+  [script.popper]: () => typeof Popper === `function`,
 }
 
 export const scriptUrlIndex = {
   [scripts.three]: script.three,
   [scripts.marked]: script.marked,
+  [scripts.jQuery]: script.jQuery,
+  [scripts.popper]: script.popper,
 }
 
 export const scriptUrls = new Set(Object.values(scripts))

e2e-tests/development-runtime/src/pages/gatsby-script-navigation.js

@@ -7,6 +7,10 @@ const pages = [
     path: `/gatsby-script-scripts-with-sources/`,
   },
   { name: `Inline scripts`, path: `/gatsby-script-inline-scripts/` },
+  {
+    name: `Scripts from SSR and browser apis`,
+    path: `/gatsby-script-ssr-browser-apis/`,
+  },
 ]
 
 function IndexPage() {

e2e-tests/development-runtime/src/pages/gatsby-script-ssr-browser-apis.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { ScriptResourceRecords } from "../components/gatsby-script-resource-records"
+import { useOccupyMainThread } from "../hooks/use-occupy-main-thread"
+import { scriptUrls } from "../../gatsby-script-scripts"
+
+function ScriptsFromSSRAndBrowserAPIs() {
+  useOccupyMainThread()
+
+  return (
+    <main style={{ margin: `1em` }}>
+      <h1>Script component e2e test</h1>
+
+      <br />
+      <h2>Scripts loaded via wrapPageElement and wrapRootElement</h2>
+
+      <ScriptResourceRecords
+        check={record => scriptUrls.has(record.name)}
+        count={4}
+      />
+    </main>
+  )
+}
+
+export default ScriptsFromSSRAndBrowserAPIs

e2e-tests/development-runtime/src/wrap-page-element.js

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Script } from "gatsby"
+import { scripts } from "../gatsby-script-scripts"
+
+const gatsbyScriptTestPage = `/gatsby-script-ssr-browser-apis/`
+
+const WrapPageElement = ({ element, props }) => {
+  return (
+    <>
+      {element}
+      {props?.path?.includes(gatsbyScriptTestPage) && (
+        <>
+          <Script src={scripts.three} strategy="post-hydrate" />
+          <Script src={scripts.marked} strategy="idle" />
+        </>
+      )}
+    </>
+  )
+}
+
+export default WrapPageElement

e2e-tests/development-runtime/src/wrap-root-element.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { StaticQuery, graphql } from "gatsby"
+import { StaticQuery, graphql, Script } from "gatsby"
+import { scripts } from "../gatsby-script-scripts"
 
 const WrapRootElement = ({ element }) => (
   <StaticQuery
@@ -19,6 +20,8 @@ const WrapRootElement = ({ element }) => (
     }) => (
       <>
         {element}
+        <Script src={scripts.jQuery} strategy="post-hydrate" />
+        <Script src={scripts.popper} strategy="idle" />
         <div>
           StaticQuery in wrapRootElement test (should show site title):
           <span data-testid="wrap-root-element-result">{title}</span>

e2e-tests/production-runtime/cypress/integration/gatsby-script-ssr-browser-apis.js

@@ -0,0 +1,15 @@
+import { script } from "../../gatsby-script-scripts"
+
+const page = `/gatsby-script-ssr-browser-apis/`
+
+it(`scripts load successfully when used via wrapPageElement`, () => {
+  cy.visit(page)
+  cy.getRecord(script.three, `success`, true).should(`equal`, `true`)
+  cy.getRecord(script.marked, `success`, true).should(`equal`, `true`)
+})
+
+it(`scripts load successfully when used via wrapRootElement`, () => {
+  cy.visit(page)
+  cy.getRecord(script.jQuery, `success`, true).should(`equal`, `true`)
+  cy.getRecord(script.popper, `success`, true).should(`equal`, `true`)
+})

e2e-tests/production-runtime/gatsby-browser.js

@@ -1,4 +1,6 @@
-const Wrapper = require(`./src/wrap-root-element`).default
+const WrapPageElement = require(`./src/wrap-page-element`).default
+const WrapRootElement = require(`./src/wrap-root-element`).default
+
 require(`./src/index.css`)
 require(`typeface-merriweather`)
 
@@ -27,4 +29,5 @@ exports.onPrefetchPathname = ({ pathname }) => {
   addLogEntry(`onPrefetchPathname`, pathname)
 }
 
-exports.wrapRootElement = Wrapper
+exports.wrapPageElement = WrapPageElement
+exports.wrapRootElement = WrapRootElement

e2e-tests/production-runtime/gatsby-script-scripts.js

@@ -1,28 +1,40 @@
 export const script = {
   three: `three`,
   marked: `marked`,
+  jQuery: `jQuery`,
+  popper: `popper`,
 }
 
 export const scripts = {
   [script.three]: `https://unpkg.com/[email protected]/build/three.js`,
   [script.marked]: `https://cdn.jsdelivr.net/npm/marked/marked.min.js`,
+  [script.jQuery]: `https://code.jquery.com/jquery-3.4.1.min.js`,
+  [script.popper]: `https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js`,
 }
 
 export const scriptStrategyIndex = {
   [script.three]: `post-hydrate`,
   [script.marked]: `idle`,
+  [script.jQuery]: `post-hydrate`,
+  [script.popper]: `idle`,
 }
 
 export const scriptSuccessIndex = {
   // @ts-ignore
   [script.three]: () => typeof THREE === `object`,
   // @ts-ignore
   [script.marked]: () => typeof marked === `object`,
+  // @ts-ignore
+  [script.jQuery]: () => typeof jQuery === `function`,
+  // @ts-ignore
+  [script.popper]: () => typeof Popper === `function`,
 }
 
 export const scriptUrlIndex = {
   [scripts.three]: script.three,
   [scripts.marked]: script.marked,
+  [scripts.jQuery]: script.jQuery,
+  [scripts.popper]: script.popper,
 }
 
 export const scriptUrls = new Set(Object.values(scripts))

e2e-tests/production-runtime/gatsby-ssr.js

@@ -1,2 +1,5 @@
-const Wrapper = require(`./src/wrap-root-element`).default
-exports.wrapRootElement = Wrapper
+const WrapPageElement = require(`./src/wrap-page-element`).default
+const WrapRootElement = require(`./src/wrap-root-element`).default
+
+exports.wrapPageElement = WrapPageElement
+exports.wrapRootElement = WrapRootElement

e2e-tests/production-runtime/src/pages/gatsby-script-navigation.js

@@ -7,6 +7,10 @@ const pages = [
     path: `/gatsby-script-scripts-with-sources/`,
   },
   { name: `Inline scripts`, path: `/gatsby-script-inline-scripts/` },
+  {
+    name: `Scripts from SSR and browser apis`,
+    path: `/gatsby-script-ssr-browser-apis/`,
+  },
 ]
 
 function IndexPage() {

e2e-tests/production-runtime/src/pages/gatsby-script-ssr-browser-apis.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { ScriptResourceRecords } from "../components/gatsby-script-resource-records"
+import { useOccupyMainThread } from "../hooks/use-occupy-main-thread"
+import { scriptUrls } from "../../gatsby-script-scripts"
+
+function ScriptsFromSSRAndBrowserAPIs() {
+  useOccupyMainThread()
+
+  return (
+    <main style={{ margin: `1em` }}>
+      <h1>Script component e2e test</h1>
+
+      <br />
+      <h2>Scripts loaded via wrapPageElement and wrapRootElement</h2>
+
+      <ScriptResourceRecords
+        check={record => scriptUrls.has(record.name)}
+        count={4}
+      />
+    </main>
+  )
+}
+
+export default ScriptsFromSSRAndBrowserAPIs

e2e-tests/production-runtime/src/wrap-page-element.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { Script } from "gatsby"
+import { scripts } from "../gatsby-script-scripts"
+
+const gatsbyScriptTestPage = `/gatsby-script-ssr-browser-apis/`
+
+export default ({ element, props }) => {
+  return (
+    <>
+      {element}
+      {props?.path?.includes(gatsbyScriptTestPage) && (
+        <>
+          <Script src={scripts.three} strategy="post-hydrate" />
+          <Script src={scripts.marked} strategy="idle" />
+        </>
+      )}
+    </>
+  )
+}

e2e-tests/production-runtime/src/wrap-root-element.js

@@ -1,29 +1,34 @@
 import * as React from "react"
-import { StaticQuery, graphql } from "gatsby"
+import { StaticQuery, graphql, Script } from "gatsby"
+import { scripts } from "../gatsby-script-scripts"
 
-export default ({ element }) => (
-  <StaticQuery
-    query={graphql`
-      query MetaQuery {
-        site {
-          siteMetadata {
-            title
+export default ({ element }) => {
+  return (
+    <StaticQuery
+      query={graphql`
+        query MetaQuery {
+          site {
+            siteMetadata {
+              title
+            }
           }
         }
-      }
-    `}
-    render={({
-      site: {
-        siteMetadata: { title },
-      },
-    }) => (
-      <>
-        {element}
-        <div>
-          StaticQuery in wrapRootElement test (should show site title):
-          <span data-testid="wrap-root-element-result">{title}</span>
-        </div>
-      </>
-    )}
-  />
-)
+      `}
+      render={({
+        site: {
+          siteMetadata: { title },
+        },
+      }) => (
+        <>
+          {element}
+          <Script src={scripts.jQuery} strategy="post-hydrate" />
+          <Script src={scripts.popper} strategy="idle" />
+          <div>
+            StaticQuery in wrapRootElement test (should show site title):
+            <span data-testid="wrap-root-element-result">{title}</span>
+          </div>
+        </>
+      )}
+    />
+  )
+}