tests: Add visual regression tests

e2e-tests/visual-regression/.gitignore

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

e2e-tests/visual-regression/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

e2e-tests/visual-regression/README.md

@@ -0,0 +1,30 @@
+# gatsby-starter-default
+
+The default Gatsby starter.
+
+For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
+
+## Install
+
+Make sure that you have the Gatsby CLI program installed:
+
+```shell
+npm install --global gatsby-cli
+```
+
+And run from your CLI:
+
+```shell
+gatsby new gatsby-example-site
+```
+
+Then you can run it by:
+
+```shell
+cd gatsby-example-site
+gatsby develop
+```
+
+## Deploy
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)

e2e-tests/visual-regression/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:9000"
+}

e2e-tests/visual-regression/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/visual-regression/cypress/integration/image.js

@@ -0,0 +1,17 @@
+const testCases = [
+  ["fixed image", "/images/fixed"],
+  ["fixed image smaller than requested size", "/images/fixed-too-big"],
+  ["fluid image", "/images/fluid"],
+  ["constrained image", "/images/constrained"],
+]
+
+describe(`GatsbyImage`, () => {
+  testCases.forEach(([title, path]) => {
+    describe(title, () => {
+      it(`renders correctly`, () => {
+        cy.visit(path).waitForRouteChange()
+        cy.get("#test-image").matchImageSnapshot()
+      })
+    })
+  })
+})

e2e-tests/visual-regression/cypress/plugins/index.js

@@ -0,0 +1,18 @@
+// ***********************************************************
+// 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)
+const { addMatchImageSnapshotPlugin } = require("cypress-image-snapshot/plugin")
+
+module.exports = (on, config) => {
+  console.log("CONFIG")
+  addMatchImageSnapshotPlugin(on, config)
+}

e2e-tests/visual-regression/cypress/support/index.js

@@ -0,0 +1,19 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import "gatsby-cypress"
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand();

e2e-tests/visual-regression/gatsby-config.js

@@ -0,0 +1,19 @@
+const path = require(`path`)
+
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Visual tests`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `img`,
+        path: `${__dirname}/src/images/`,
+      },
+    },
+    `gatsby-plugin-image`,
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+  ],
+}

e2e-tests/visual-regression/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "gatsby-starter-default",
+  "description": "Gatsby default starter",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "dependencies": {
+    "cypress": "^3.1.0",
+    "cypress-image-snapshot": "^3.1.1",
+    "gatsby": "^2.0.118",
+    "gatsby-plugin-image": "^0.0.2",
+    "gatsby-plugin-sharp": "^2.0.20",
+    "gatsby-source-filesystem": "^2.3.35",
+    "gatsby-transformer-sharp": "^2.5.19",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write '**/*.js'",
+    "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",
+    "serve": "gatsby serve",
+    "cy:open": "cypress open",
+    "cy:run": "(is-ci && cypress run --browser chrome --record) || cypress run --browser chrome"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "gatsby-cypress": "0.4.12-dev-1603453272121",
+    "is-ci": "^2.0.0",
+    "prettier": "2.0.4",
+    "start-server-and-test": "^1.7.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  }
+}

e2e-tests/visual-regression/src/components/header.js

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import PropTypes from "prop-types"
+
+const Header = ({ siteTitle }) => (
+  <div
+    style={{
+      background: `rebeccapurple`,
+      marginBottom: `1.45rem`,
+    }}
+  >
+    <div
+      style={{
+        margin: `0 auto`,
+        maxWidth: 960,
+        padding: `1.45rem 1.0875rem`,
+      }}
+    >
+      <h1 style={{ margin: 0 }}>
+        <Link
+          to="/"
+          style={{
+            color: `white`,
+            textDecoration: `none`,
+          }}
+        >
+          {siteTitle}
+        </Link>
+      </h1>
+    </div>
+  </div>
+)
+
+Header.propTypes = {
+  siteTitle: PropTypes.string.isRequired,
+}
+
+export default Header