feat(gatsby): enable local themes (#15856)

e2e-tests/themes/development-runtime/cypress/integration/components.js

@@ -1,12 +1,30 @@
 /* global cy */
 
 describe(`Components`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/shadowed`).waitForRouteChange()
-    cy.getTestElement(`date`).contains(`6/28/1993`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/shadowed`).waitForRouteChange()
+      cy.getTestElement(`date`).contains(`6/28/1993`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/shadowed-local`).waitForRouteChange()
+      cy.getTestElement(`header`).contains(
+        `This is component to test shadowing of local theme`
+      )
+    })
   })
-  it(`added by themes can be shadowed`, () => {
-    cy.visit(`/shadowed`).waitForRouteChange()
-    cy.getTestElement(`time`).contains(`2:39:07 PM`)
+  describe(`added by themes can be shadowed`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/shadowed`).waitForRouteChange()
+      cy.getTestElement(`time`).contains(`2:39:07 PM`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/shadowed-local`).waitForRouteChange()
+      cy.getTestElement(`pre`).contains(`This is in main site`)
+      cy.getTestElement(`pre`).should(
+        `not.contain`,
+        `This is in gatsby-theme-local`
+      )
+    })
   })
 })

e2e-tests/themes/development-runtime/cypress/integration/pages.js

@@ -1,14 +1,27 @@
 /* global cy */
 
 describe(`Pages`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/about`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/about`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/page-from-local`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Page from local theme`)
+    })
   })
-  it(`added by themes can be shadowed`, () => {
-    cy.visit(`/contact`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(
-      `A title since the theme didn't have one`
-    )
+  describe(`added by themes can be shadowed`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/contact`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(
+        `A title since the theme didn't have one`
+      )
+    })
+
+    it(`local theme`, () => {
+      cy.visit(`/page-from-local-overwrite`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Overwritten page from local theme`)
+    })
   })
 })

e2e-tests/themes/development-runtime/cypress/integration/site-metadata.js

@@ -1,12 +1,24 @@
 /* global cy */
 
 describe(`Site Metadata`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`description`).contains(`Description placeholder`)
+    })
   })
-  it(`added by themes can be overridden`, () => {
-    cy.visit(`/`).waitForRouteChange()
-    cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
+  describe(`added by themes can be overridden`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`social_twitter`).contains(`chatsidhartha`)
+    })
   })
 })

e2e-tests/themes/development-runtime/gatsby-config.js

@@ -1,6 +1,9 @@
 module.exports = {
   siteMetadata: {
     author: `Sidhartha Chatterjee`,
+    social: {
+      twitter: `chatsidhartha`,
+    },
   },
-  plugins: [`gatsby-theme-about`],
+  plugins: [`gatsby-theme-about`, `gatsby-theme-local`],
 }

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/gatsby-config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  siteMetadata: {
+    description: `Description placeholder`,
+    social: {
+      twitter: `twitter placeholder`,
+    },
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/src/pages`,
+      },
+    },
+  ],
+}

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/index.js

@@ -0,0 +1 @@
+// no-op

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-theme-local"
+}

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/components/shadowing-local.js

@@ -0,0 +1,13 @@
+import React from "react"
+import ToBeShadowed from "./to-be-shadowed"
+
+export default () => (
+  <>
+    <header data-testid="header">
+      This is component to test shadowing of local theme
+    </header>
+    <pre data-testid="pre">
+      <ToBeShadowed />
+    </pre>
+  </>
+)

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/components/to-be-shadowed.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <>This is in gatsby-theme-local</>

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/pages/page-from-local-overwrite.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <h1 data-testid="title">Page from local theme</h1>

e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/pages/page-from-local.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <h1 data-testid="title">Page from local theme</h1>

e2e-tests/themes/development-runtime/src/gatsby-theme-local/components/to-be-shadowed.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <>This is in main site</>

e2e-tests/themes/development-runtime/src/pages/index.js

@@ -5,6 +5,8 @@ export default ({ data }) => (
   <>
     <p data-testid="title">{data.site.siteMetadata.title}</p>
     <p data-testid="author">{data.site.siteMetadata.author}</p>
+    <p data-testid="description">{data.site.siteMetadata.description}</p>
+    <p data-testid="social_twitter">{data.site.siteMetadata.social.twitter}</p>
   </>
 )
 
@@ -14,6 +16,10 @@ export const pageQuery = graphql`
       siteMetadata {
         title
         author
+        description
+        social {
+          twitter
+        }
       }
     }
   }

e2e-tests/themes/development-runtime/src/pages/page-from-local-overwrite.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default () => (
+  <h1 data-testid="title">Overwritten page from local theme</h1>
+)

e2e-tests/themes/development-runtime/src/pages/shadowed-local.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+import LocalShadowingComponent from "../../plugins/gatsby-theme-local/src/components/shadowing-local"
+
+export default () => <LocalShadowingComponent />

e2e-tests/themes/production-runtime/cypress/integration/components.js

@@ -1,12 +1,30 @@
 /* global cy */
 
 describe(`Components`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/shadowed`).waitForRouteChange()
-    cy.getTestElement(`date`).contains(`6/28/1993`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/shadowed`).waitForRouteChange()
+      cy.getTestElement(`date`).contains(`6/28/1993`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/shadowed-local`).waitForRouteChange()
+      cy.getTestElement(`header`).contains(
+        `This is component to test shadowing of local theme`
+      )
+    })
   })
-  it(`added by themes can be shadowed`, () => {
-    cy.visit(`/shadowed`).waitForRouteChange()
-    cy.getTestElement(`time`).contains(`2:39:07 PM`)
+  describe(`added by themes can be shadowed`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/shadowed`).waitForRouteChange()
+      cy.getTestElement(`time`).contains(`2:39:07 PM`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/shadowed-local`).waitForRouteChange()
+      cy.getTestElement(`pre`).contains(`This is in main site`)
+      cy.getTestElement(`pre`).should(
+        `not.contain`,
+        `This is in gatsby-theme-local`
+      )
+    })
   })
 })

e2e-tests/themes/production-runtime/cypress/integration/pages.js

@@ -1,14 +1,27 @@
 /* global cy */
 
 describe(`Pages`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/about`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/about`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/page-from-local`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Page from local theme`)
+    })
   })
-  it(`added by themes can be shadowed`, () => {
-    cy.visit(`/contact`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(
-      `A title since the theme didn't have one`
-    )
+  describe(`added by themes can be shadowed`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/contact`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(
+        `A title since the theme didn't have one`
+      )
+    })
+
+    it(`local theme`, () => {
+      cy.visit(`/page-from-local-overwrite`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Overwritten page from local theme`)
+    })
   })
 })

e2e-tests/themes/production-runtime/cypress/integration/site-metadata.js

@@ -1,12 +1,24 @@
 /* global cy */
 
 describe(`Site Metadata`, () => {
-  it(`can be added by themes`, () => {
-    cy.visit(`/`).waitForRouteChange()
-    cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+  describe(`can be added by themes`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`description`).contains(`Description placeholder`)
+    })
   })
-  it(`added by themes can be overridden`, () => {
-    cy.visit(`/`).waitForRouteChange()
-    cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
+  describe(`added by themes can be overridden`, () => {
+    it(`installed theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
+    })
+    it(`local theme`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.getTestElement(`social_twitter`).contains(`chatsidhartha`)
+    })
   })
 })

e2e-tests/themes/production-runtime/gatsby-config.js

@@ -1,6 +1,9 @@
 module.exports = {
   siteMetadata: {
     author: `Sidhartha Chatterjee`,
+    social: {
+      twitter: `chatsidhartha`,
+    },
   },
-  plugins: [`gatsby-theme-about`],
+  plugins: [`gatsby-theme-about`, `gatsby-theme-local`],
 }

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/gatsby-config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  siteMetadata: {
+    description: `Description placeholder`,
+    social: {
+      twitter: `twitter placeholder`,
+    },
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/src/pages`,
+      },
+    },
+  ],
+}

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/index.js

@@ -0,0 +1 @@
+// no-op

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-theme-local"
+}

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/components/shadowing-local.js

@@ -0,0 +1,13 @@
+import React from "react"
+import ToBeShadowed from "./to-be-shadowed"
+
+export default () => (
+  <>
+    <header data-testid="header">
+      This is component to test shadowing of local theme
+    </header>
+    <pre data-testid="pre">
+      <ToBeShadowed />
+    </pre>
+  </>
+)

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/components/to-be-shadowed.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <>This is in gatsby-theme-local</>

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/pages/page-from-local-overwrite.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <h1 data-testid="title">Page from local theme</h1>

e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/pages/page-from-local.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <h1 data-testid="title">Page from local theme</h1>

e2e-tests/themes/production-runtime/src/gatsby-theme-local/components/to-be-shadowed.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <>This is in main site</>

e2e-tests/themes/production-runtime/src/pages/index.js

@@ -5,6 +5,8 @@ export default ({ data }) => (
   <>
     <p data-testid="title">{data.site.siteMetadata.title}</p>
     <p data-testid="author">{data.site.siteMetadata.author}</p>
+    <p data-testid="description">{data.site.siteMetadata.description}</p>
+    <p data-testid="social_twitter">{data.site.siteMetadata.social.twitter}</p>
   </>
 )
 
@@ -14,6 +16,10 @@ export const pageQuery = graphql`
       siteMetadata {
         title
         author
+        description
+        social {
+          twitter
+        }
       }
     }
   }

e2e-tests/themes/production-runtime/src/pages/page-from-local-overwrite.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default () => (
+  <h1 data-testid="title">Overwritten page from local theme</h1>
+)

e2e-tests/themes/production-runtime/src/pages/shadowed-local.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+import LocalShadowingComponent from "../../plugins/gatsby-theme-local/src/components/shadowing-local"
+
+export default () => <LocalShadowingComponent />