chore(e2e-tests): Migrate E2E tests to Head API (#36182)

* migrate development-runtime to Head API * use next * migrate path-prefix e2e * modify development-runtime e2e to use PascalCase "Seo" component * migrate production-runtime e2e to Head API * update all Seo component to take title prop * remove outdated comment * move Seo to head export * Update e2e-tests/path-prefix/package.json Co-authored-by: Ty Hopp <[email protected]> * pass correct prop * remove Seo elem from body * format Co-authored-by: Ty Hopp <[email protected]>
gatsbyjs · Aug 1, 2022 · 03ee426 · 03ee426
1 parent 7d906de
commit 03ee426
Show file tree

Hide file tree

Showing 66 changed files with 367 additions and 190 deletions.
diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/queries-in-packages.js b/e2e-tests/development-runtime/cypress/integration/functionality/queries-in-packages.js
@@ -4,8 +4,6 @@ describe(`queries in packages`, () => {
   })
 
   it(`Should extract and run query from gatsby component`, () => {
-    // we are using `gatsby-seo` package which sets
-    // window's title to title passed as prop followed by siteMetadata.title
     cy.title().should(
       `eq`,
       `Testing queries in packages | Gatsby Default Starter`

diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js
@@ -20,7 +20,6 @@ module.exports = {
     DEV_SSR: false,
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {

diff --git a/e2e-tests/development-runtime/package.json b/e2e-tests/development-runtime/package.json
@@ -11,12 +11,10 @@
     "gatsby-plugin-less": "next",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "next",
     "gatsby-plugin-sass": "next",
     "gatsby-plugin-sharp": "next",
     "gatsby-plugin-stylus": "next",
     "gatsby-remark-images": "next",
-    "gatsby-seo": "^0.1.0",
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-json": "next",
     "gatsby-transformer-remark": "next",
@@ -25,7 +23,6 @@
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
     "sass": "^1.32.8"
   },
   "keywords": [

diff --git a/e2e-tests/development-runtime/src/components/seo.js b/e2e-tests/development-runtime/src/components/seo.js
@@ -1,98 +1,58 @@
 import React from "react"
 import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { StaticQuery, graphql } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
+
+function Seo({ children, description, lang, keywords, title }) {
+  const data = useStaticQuery(graphql`
+    query DefaultSEOQuery {
+      site {
+        siteMetadata {
+          title
+          description
+          social {
+            twitter
+          }
+        }
+      }
+    }
+  `)
+
+  const metaDescription = description || data.site.siteMetadata.description
 
-function SEO({ description, lang, meta, keywords, title }) {
   return (
-    <StaticQuery
-      query={detailsQuery}
-      render={data => {
-        const metaDescription =
-          description || data.site.siteMetadata.description
-        return (
-          <Helmet
-            htmlAttributes={{
-              lang,
-            }}
-            title={title}
-            titleTemplate={`%s | ${data.site.siteMetadata.title}`}
-            meta={[
-              {
-                name: `description`,
-                content: metaDescription,
-              },
-              {
-                property: `og:title`,
-                content: title,
-              },
-              {
-                property: `og:description`,
-                content: metaDescription,
-              },
-              {
-                property: `og:type`,
-                content: `website`,
-              },
-              {
-                name: `twitter:card`,
-                content: `summary`,
-              },
-              {
-                name: `twitter:creator`,
-                content: data.site.siteMetadata.social.twitter,
-              },
-              {
-                name: `twitter:title`,
-                content: title,
-              },
-              {
-                name: `twitter:description`,
-                content: metaDescription,
-              },
-            ]
-              .concat(
-                keywords.length > 0
-                  ? {
-                      name: `keywords`,
-                      content: keywords.join(`, `),
-                    }
-                  : []
-              )
-              .concat(meta)}
-          />
-        )
-      }}
-    />
+    <>
+      <title>
+        {title ? `${title} | ${data.site.siteMetadata.title}` : title}
+      </title>
+      <html lang={lang} />
+      <meta name="description" content={metaDescription} />
+      <meta name="og:title" content={title} />
+      <meta name="og:description" content={metaDescription} />
+      <meta name="twitter:card" content="summary" />
+      <meta
+        name="twitter:creator"
+        content={data.site.siteMetadata.social.twitter}
+      />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="og:type" content="website" />
+      <meta name="keywords" content={keywords && keywords.join(",")} />
+      {children}
+    </>
   )
 }
 
-SEO.defaultProps = {
+Seo.defaultProps = {
   lang: `en`,
-  meta: [],
   keywords: [],
+  title: ``,
 }
 
-SEO.propTypes = {
+Seo.propTypes = {
   description: PropTypes.string,
+  title: PropTypes.string,
   lang: PropTypes.string,
-  meta: PropTypes.array,
   keywords: PropTypes.arrayOf(PropTypes.string),
-  title: PropTypes.string.isRequired,
 }
 
-export default SEO
-
-const detailsQuery = graphql`
-  query DefaultSEOQuery {
-    site {
-      siteMetadata {
-        title
-        description
-        social {
-          twitter
-        }
-      }
-    }
-  }
-`
+export default Seo
diff --git a/e2e-tests/development-runtime/src/components/static-query/variable-query.js b/e2e-tests/development-runtime/src/components/static-query/variable-query.js
@@ -4,7 +4,7 @@ import { StaticQuery, graphql } from "gatsby"
 function Variable(props) {
   return (
     <StaticQuery
-      query={reactHelmetPluginQuery}
+      query={pluginQuery}
       render={data => (
         <div>
           <p {...props}>
@@ -16,9 +16,9 @@ function Variable(props) {
   )
 }
 
-const reactHelmetPluginQuery = graphql`
-  query ReactHelmetPluginQuery {
-    sitePlugin(name: { eq: "gatsby-plugin-react-helmet" }) {
+const pluginQuery = graphql`
+  query PluginQuery {
+    sitePlugin(name: { eq: "gatsby-source-fake-data" }) {
       name
       version
     }

diff --git a/e2e-tests/development-runtime/src/pages/404.js b/e2e-tests/development-runtime/src/pages/404.js
@@ -2,7 +2,7 @@ import React from "react"
 import { graphql, Link } from "gatsby"
 
 import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 
 import { QueryDataCachesView } from "../components/query-data-caches/view"
 import { use404LinkStaticQuery } from "../components/query-data-caches/static-query-404-link"
@@ -32,7 +32,6 @@ function QueryDataCachesWrapper({ data, slug, prefix, ...rest }) {
 
 const NotFoundPage = ({ data }) => (
   <Layout>
-    <SEO title="404: Not found" />
     <h1 data-testid="page-title">NOT FOUND</h1>
     <p>You just hit a route that does not exist... the sadness.</p>
     <fieldset>
@@ -67,6 +66,7 @@ const NotFoundPage = ({ data }) => (
     </fieldset>
   </Layout>
 )
+export const Head = () => <Seo title="404: Not found" />
 
 export default NotFoundPage
 

diff --git a/...sts/development-runtime/src/pages/collection-routing/{ImageSharp.parent__(File)__name}.js b/...sts/development-runtime/src/pages/collection-routing/{ImageSharp.parent__(File)__name}.js
@@ -3,12 +3,14 @@ import { Link, graphql } from "gatsby"
 import Image from "gatsby-image"
 
 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import Seo from "../../components/seo"
 
-export default function BlogPost({ data: { image }, pageContext: { parent__name } }) {
+export default function BlogPost({
+  data: { image },
+  pageContext: { parent__name },
+}) {
   return (
     <Layout>
-      <SEO title={image.parent.name} />
       <h2 data-testid="name">{image.parent.name}</h2>
       <p data-testid="pagecontext">{parent__name}</p>
       <Image fixed={image.fixed} />
@@ -31,3 +33,7 @@ export const blogPostQuery = graphql`
     }
   }
 `
+
+export const Head = ({ data: { image } }) => {
+  return <Seo title={image.parent.name} />
+}
diff --git a/e2e-tests/development-runtime/src/pages/collection-routing/{MarkdownRemark.fields__slug}.js b/e2e-tests/development-runtime/src/pages/collection-routing/{MarkdownRemark.fields__slug}.js
@@ -2,12 +2,14 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 
 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import Seo from "../../components/seo"
 
-export default function BlogPost({ data: { post }, pageContext: { fields__slug } }) {
+export default function BlogPost({
+  data: { post },
+  pageContext: { fields__slug },
+}) {
   return (
     <Layout>
-      <SEO title={post.frontmatter.title} description={post.excerpt} />
       <h1>{post.frontmatter.title}</h1>
       <h2 data-testid="slug">{post.fields.slug}</h2>
       <p data-testid="pagecontext">{fields__slug}</p>
@@ -31,3 +33,7 @@ export const blogPostQuery = graphql`
     }
   }
 `
+
+export const Head = ({ data: { post } }) => (
+  <Seo title={post.frontmatter.title} description={post.excerpt} />
+)
diff --git a/e2e-tests/development-runtime/src/pages/head-function-export/deduplication.js b/e2e-tests/development-runtime/src/pages/head-function-export/deduplication.js
@@ -10,7 +10,7 @@ export default function HeadFunctionDeduplication() {
   )
 }
 
-function SEO({ children }) {
+function Seo({ children }) {
   return (
     <>
       <link rel="deduplication" id="deduplication-test" href="/foo" />
@@ -27,9 +27,9 @@ function SEO({ children }) {
 
 export function Head() {
   return (
-    <SEO>
+    <Seo>
       <link rel="deduplication" id="deduplication-test" href="/bar" />
       <link rel="alternate" hrefLang="de-DE" href="/de/" />
-    </SEO>
+    </Seo>
   )
 }
diff --git a/e2e-tests/development-runtime/src/pages/index.js b/e2e-tests/development-runtime/src/pages/index.js
@@ -4,12 +4,11 @@ import { Link, graphql } from "gatsby"
 import ClassComponent from "../components/class-component"
 import Layout from "../components/layout"
 import Image from "../components/image"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import InstrumentPage from "../utils/instrument-page"
 
 const IndexPage = ({ data }) => (
   <Layout>
-    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
     <h1>Hi people</h1>
     <p data-testid="page-component">Welcome to your new %GATSBY_SITE%</p>
     <p>Now go build something great.</p>
@@ -47,9 +46,21 @@ const IndexPage = ({ data }) => (
     <Link to="/new-page" data-testid="hot-reloading-new-file">
       Created by hot-reloading/new-file.js
     </Link>
-    <Link to="/redirect-two#anchor" data-testid="redirect-two-anchor">Go to redirect with hash</Link>
-    <Link to="/redirect-two?query_param=hello" data-testid="redirect-two-search">Go to redirect with query param</Link>
-    <Link to="/redirect-two?query_param=hello#anchor" data-testid="redirect-two-search-anchor">Go to redirect with query param and hash</Link>
+    <Link to="/redirect-two#anchor" data-testid="redirect-two-anchor">
+      Go to redirect with hash
+    </Link>
+    <Link
+      to="/redirect-two?query_param=hello"
+      data-testid="redirect-two-search"
+    >
+      Go to redirect with query param
+    </Link>
+    <Link
+      to="/redirect-two?query_param=hello#anchor"
+      data-testid="redirect-two-search-anchor"
+    >
+      Go to redirect with query param and hash
+    </Link>
     <h2>Blog posts</h2>
     <ul>
       {data.posts.edges.map(({ node }) => (
@@ -82,3 +93,6 @@ export const indexQuery = graphql`
     }
   }
 `
+export const Head = () => (
+  <Seo title="Home" keywords={[`gatsby`, `application`, `react`]} />
+)
diff --git a/e2e-tests/development-runtime/src/pages/page-2.js b/e2e-tests/development-runtime/src/pages/page-2.js
@@ -2,12 +2,11 @@ import React from "react"
 import { Link, navigate } from "gatsby"
 
 import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import InstrumentPage from "../utils/instrument-page"
 
 const SecondPage = () => (
   <Layout>
-    <SEO title="Page two" />
     <h1 data-testid="page-2-message">Hi from the second page</h1>
     <p>Welcome to page 2</p>
     <Link to="/" data-testid="back-button">
@@ -19,4 +18,6 @@ const SecondPage = () => (
   </Layout>
 )
 
+export const Head = () => <Seo title="Page two" />
+
 export default InstrumentPage(SecondPage)
diff --git a/e2e-tests/development-runtime/src/pages/preview.js b/e2e-tests/development-runtime/src/pages/preview.js
@@ -2,11 +2,10 @@ import React from "react"
 import { graphql, Link } from "gatsby"
 
 import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 
 const GatsbyPreview = ({ data }) => (
   <Layout>
-    <SEO title="Gatsby Preview e2e Test" />
     <h1>Gatsby Preview e2e test</h1>
     <ul id="fake-data">
       {data.allFakeData.nodes.map(node => (
@@ -27,6 +26,8 @@ const GatsbyPreview = ({ data }) => (
 
 export default GatsbyPreview
 
+export const Head = () => <Seo title="Gatsby Preview e2e Test" />
+
 export const previewQuery = graphql`
   query {
     allPincData {