chore(themes): Add some basic end to end tests for themes (gatsbyjs#1…

…5637)

* wip

* Fix component shadowing test

* Clean up linting issues

* Remove development runtime stuff

* Lint

* Fix tests and add to CI config

* Add e2e_tests_themes job

* Fix test path

.circleci/config.yml

@@ -188,6 +188,13 @@ jobs:
           test_path: e2e-tests/production-runtime
           test_command: yarn test && yarn test:offline
 
+  e2e_tests_themes:
+    <<: *e2e-executor
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/themes/production-runtime
+          test_command: yarn test
+
   starters_validate:
     executor: node
     steps:
@@ -245,6 +252,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime:
           <<: *e2e-test-workflow
+      - e2e_tests_themes:
+          <<: *e2e-test-workflow
       - starters_validate:
           <<: *ignore_master
       - starters_publish:

e2e-tests/themes/gatsby-theme-about/README.md

@@ -0,0 +1,3 @@
+# gatsby-theme-about
+
+A Gatsby theme that adds an About page

e2e-tests/themes/gatsby-theme-about/gatsby-config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  siteMetadata: {
+    title: `Blog Title Placeholder`,
+    author: `Name Placeholder`,
+    description: `Description placeholder`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/src/pages`,
+      },
+    },
+  ],
+}

e2e-tests/themes/gatsby-theme-about/index.js

@@ -0,0 +1 @@
+// noop

e2e-tests/themes/gatsby-theme-about/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gatsby-theme-about",
+  "version": "1.0.0",
+  "description": "A Gatsby theme that adds an About page",
+  "main": "index.js",
+  "keywords": [
+    "gatsby",
+    "gatsby-theme",
+    "gatsby-plugin",
+    "react",
+    "blog"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby.git",
+    "directory": "e2e-tests/themes/gatsby-theme-about"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/e2e-tests/themes/gatsby-theme-about#readme",
+  "dependencies": {
+    "gatsby": "^2.13.13",
+    "gatsby-plugin-page-creator": "^2.1.3"
+  },
+  "devDependencies": {
+    "prettier": "^1.18.2"
+  },
+  "peerDependencies": {
+    "gatsby": "^2.13.13",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

e2e-tests/themes/gatsby-theme-about/src/components/date.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import Time from "./time"
+
+export default ({ date }) => (
+  <div>
+    <span data-testid="date">{date.toLocaleString(`en-US`)}</span>
+    <Time date={date} />
+  </div>
+)

e2e-tests/themes/gatsby-theme-about/src/components/time.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default ({ date }) => (
+  <span data-testid="time">{date.toTimeString()}</span>
+)

e2e-tests/themes/gatsby-theme-about/src/pages/about.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default ({ data }) => (
+  <h1 data-testid="title">{data.site.siteMetadata.title}</h1>
+)
+
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`

e2e-tests/themes/gatsby-theme-about/src/pages/contact.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default ({ data }) => (
+  <p data-testid="description">{data.site.siteMetadata.description}</p>
+)
+
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        description
+      }
+    }
+  }
+`

e2e-tests/themes/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "workspaces": [
+    "gatsby-theme-about",
+    "production-runtime"
+  ]
+}

e2e-tests/themes/production-runtime/.gitignore

@@ -0,0 +1,12 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store
+
+# Cypress output
+cypress/videos/
+cypress/screenshots/

e2e-tests/themes/production-runtime/README.md

@@ -0,0 +1,3 @@
+# production-runtime
+
+A Gatsby project to test our production runtime for Themes

e2e-tests/themes/production-runtime/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "chromeWebSecurity": false
+}

e2e-tests/themes/production-runtime/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

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

@@ -0,0 +1,12 @@
+/* global cy */
+
+describe(`Components`, () => {
+  it(`can be added by themes`, () => {
+    cy.visit(`/shadowed`).waitForRouteChange()
+    cy.getTestElement(`date`).contains(`6/28/1993`)
+  })
+  it(`added by themes can be shadowed`, () => {
+    cy.visit(`/shadowed`).waitForRouteChange()
+    cy.getTestElement(`time`).contains(`2:39:07 PM`)
+  })
+})

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

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

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

@@ -0,0 +1,12 @@
+/* global cy */
+
+describe(`Site Metadata`, () => {
+  it(`can be added by themes`, () => {
+    cy.visit(`/`).waitForRouteChange()
+    cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
+  })
+  it(`added by themes can be overridden`, () => {
+    cy.visit(`/`).waitForRouteChange()
+    cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
+  })
+})

e2e-tests/themes/production-runtime/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

e2e-tests/themes/production-runtime/cypress/support/index.js

@@ -0,0 +1 @@
+import "gatsby-cypress"

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

@@ -0,0 +1,24 @@
+if (typeof window !== `undefined`) {
+  window.___PageComponentLifecycleCallsLog = []
+}
+
+const addLogEntry = (action, location) => {
+  const idElement = document.querySelector(`[data-testid="dom-marker"]`)
+  window.___PageComponentLifecycleCallsLog.push({
+    action,
+    pathname: location.pathname,
+    domContent: idElement ? idElement.innerText : null,
+  })
+}
+
+exports.onPreRouteUpdate = ({ location }) => {
+  addLogEntry(`onPreRouteUpdate`, location)
+}
+
+exports.onRouteUpdate = ({ location }) => {
+  addLogEntry(`onRouteUpdate`, location)
+}
+
+exports.onPrefetchPathname = ({ pathname }) => {
+  addLogEntry(`onPrefetchPathname`, pathname)
+}

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

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

e2e-tests/themes/production-runtime/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "production-runtime",
+  "description": "Gatsby default starter",
+  "version": "1.0.0",
+  "author": "Sidhartha Chatterjee <sid@gatsbyjs.com>",
+  "dependencies": {
+    "gatsby": "^2.13.14",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "gatsby-theme-about": "*"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"src/**/*.js\"",
+    "serve": "gatsby serve",
+    "start": "npm run develop",
+    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run --browser chrome"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "cypress": "^3.1.3",
+    "gatsby-cypress": "^0.1.7",
+    "prettier": "^1.15.2",
+    "start-server-and-test": "^1.7.11"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  }
+}

e2e-tests/themes/production-runtime/src/gatsby-theme-about/components/time.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default ({ date }) => (
+  <span data-testid="time">{date.toLocaleTimeString(`en-US`)}</span>
+)

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

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default () => (
+  <h1 data-testid="title">A title since the theme didn't have one</h1>
+)

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

@@ -0,0 +1,20 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default ({ data }) => (
+  <>
+    <p data-testid="title">{data.site.siteMetadata.title}</p>
+    <p data-testid="author">{data.site.siteMetadata.author}</p>
+  </>
+)
+
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+        author
+      }
+    }
+  }
+`

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

@@ -0,0 +1,8 @@
+import React from "react"
+
+import FormattedDate from "gatsby-theme-about/src/components/date"
+
+export default () => {
+  const date = new Date(`June 28, 1993 14:39:07`)
+  return <FormattedDate date={date} />
+}