feat: Add new image resolvers

.circleci/config.yml

@@ -375,6 +375,17 @@ jobs:
           test_path: e2e-tests/gatsby-static-image
           test_command: yarn test
 
+  e2e_tests_visual-regression:
+    <<: *e2e-executor
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/visual-regression
+          test_command: yarn test
+      - store_artifacts:
+          path: e2e-tests/visual-regression/__diff_output__
+      - store_test_results:
+          path: e2e-tests/visual-regression/cypress/results
+
   starters_validate:
     executor: node
     steps:
@@ -582,6 +593,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_gatsby-static-image:
           <<: *e2e-test-workflow
+      - e2e_tests_visual-regression:
+          <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime:

e2e-tests/gatsby-static-image/cypress/integration/fixed.js

@@ -5,12 +5,6 @@ describe(`fixed`, () => {
     cy.visit(`/fixed`).waitForRouteChange()
   })
 
-  it(`does not render a spacer div`, () => {
-    cy.getTestElement(fixedTestId)
-      .find(`.gatsby-image-wrapper > div`)
-      .should(`not.exist`)
-  })
-
   it(`applies height and width to wrapper`, () => {
     cy.getTestElement(fixedTestId)
       .find(`.gatsby-image-wrapper`)
@@ -34,39 +28,4 @@ describe(`fixed`, () => {
       .should(`exist`)
   })
 
-  // it(`applies 1x/2x`, () => {
-  //   cy.getTestElement(fixedTestId)
-  //     .find(`picture > source`)
-  //     .should(`have.attr`, `srcset`)
-  //     .and(srcset => {
-  //       ;[`1x`, `2x`].forEach(size => {
-  //         expect(srcset).contains(size)
-  //       })
-  //     })
-  // })
-
-  // it(`does not apply 3x`, () => {
-  //   cy.getTestElement(fixedTestId)
-  //     .find(`picture > source`)
-  //     .should(`have.attr`, `srcset`)
-  //     .and(srcset => {
-  //       expect(srcset).not.contains(`3x`)
-  //     })
-  // })
-
-  // describe(`picture > img sizing`, () => {
-  //   it(`applies height attribute`, () => {
-  //     cy.getTestElement(fixedTestId)
-  //       .find(`picture > img`)
-  //       .should(`have.attr`, `height`)
-  //       .and(`match`, /^\d+$/)
-  //   })
-
-  //   it(`applies width attribute`, () => {
-  //     cy.getTestElement(fixedTestId)
-  //       .find(`picture > img`)
-  //       .should(`have.attr`, `width`)
-  //       .and(`match`, /^\d+$/)
-  //   })
-  // })
 })

e2e-tests/gatsby-static-image/cypress/integration/image.js

@@ -31,12 +31,4 @@ describe(`Production gatsby-image`, () => {
     })
   })
 
-  describe(`fallback image`, () => {
-    it(`renders base-64 src`, () => {
-      cy.getTestElement(fluidTestId)
-        .find(`.gatsby-image-wrapper > img`)
-        .should(`have.attr`, `src`)
-        .and(`contains`, `base64`)
-    })
-  })
 })

e2e-tests/gatsby-static-image/src/pages/intrinsic.js → e2e-tests/gatsby-static-image/src/pages/constrained.js

@@ -8,26 +8,26 @@ const FluidPage = () => (
     <div data-testid="image-fluid">
       <StaticImage
         src="../images/citrus-fruits.jpg"
-        layout="intrinsic"
+        layout="constrained"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="image-fluid-png">
       <StaticImage
         src="../images/gatsby-icon.png"
-        layout="intrinsic"
+        layout="constrained"
         alt="Gatsby icon"
       />
     </div>
     <div data-testid="image-fluid-relative">
       <StaticImage
         src="../../content/relative.jpg"
-        layout="intrinsic"
+        layout="constrained"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="invalid-image">
-      <StaticImage src="./does-not-exist.jpg" layout="intrinsic" />
+      <StaticImage src="./does-not-exist.jpg" layout="constrained" />
     </div>
   </Layout>
 )

e2e-tests/gatsby-static-image/src/pages/fluid.js

@@ -8,26 +8,26 @@ const FluidPage = () => (
     <div data-testid="image-fluid">
       <StaticImage
         src="../images/citrus-fruits.jpg"
-        layout="responsive"
+        layout="fluid"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="image-fluid-png">
       <StaticImage
         src="../images/gatsby-icon.png"
-        layout="responsive"
+        layout="fluid"
         alt="Gatsby icon"
       />
     </div>
     <div data-testid="image-fluid-relative">
       <StaticImage
         src="../../content/relative.jpg"
-        layout="responsive"
+        layout="fluid"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="invalid-image">
-      <StaticImage src="./does-not-exist.jpg" layout="responsive" />
+      <StaticImage src="./does-not-exist.jpg" layout="fluid" />
     </div>
   </Layout>
 )

e2e-tests/gatsby-static-image/src/pages/traced.js

@@ -8,21 +8,21 @@ const FluidPage = () => (
     <div data-testid="image-traced">
       <StaticImage
         src="../images/citrus-fruits.jpg"
-        tracedSVG
+        placeholder="tracedSVG"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="image-traced-png">
       <StaticImage
         src="../images/gatsby-icon.png"
-        tracedSVG
+        placeholder="tracedSVG"
         alt="Gatsby icon"
       />
     </div>
     <div data-testid="image-traced-relative">
       <StaticImage
         src="../../content/relative.jpg"
-        tracedSVG
+        placeholder="tracedSVG"
         alt="Citrus fruits"
       />
     </div>

e2e-tests/visual-regression/.gitignore

@@ -0,0 +1,14 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store
+
+# Cypress output
+cypress/videos/
+cypress/screenshots/
+cypress/results/
+__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,23 @@
+# Visual regression tests
+
+This test suite uses [cypress-image-snapshot](https://github.com/jaredpalmer/cypress-image-snapshot)
+to compare screenshots of pages or elements with a saved snapshot.
+
+To add a test, add a page to `src/pages`, then add a test to `cypress/integration`, or add to an existing spec.
+
+If tests fail, a comparison image will be written to `__diff_output__`. When running in CircleCI, this is uploaded to artifacts.
+
+## Considerations
+
+Remember that the test will run on Linux in CI, so avoid tests that might change between platforms.
+Using default fonts is an example. In general, if you're not testing the text itself then exclude it from your tests. Rather than comparing the full page, a good idea is to compare a wrapper element. There is a component provided for this purpose for images.
+
+Specifying large screen sizes can also cause problems when running locally on a small screen. The image tests use a maximum of 1024x768. The device pixel density is forced to 1, so running tests will look strange on Retina screens. This is to ensure screenshots match, whichever monitor or headless CI the tests rae running on.
+
+## Updating snapshots
+
+Run `yarn cy:update-snapshots` if you need to update them. Please note that unlike Jest, this doesn't delete outdated snapshots, so if you remove a test make sure to remove its snapshots too.
+
+## Credits
+
+Test images of Cornwall by [Benjamin Elliott](https://unsplash.com/photos/lH0_kBu5iyo) and [Red Zeppelin](https://unsplash.com/photos/uJMxXtH-Qso) via Unsplash.

e2e-tests/visual-regression/cypress.json

@@ -0,0 +1,11 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "video": false,
+  "reporter": "junit",
+  "reporterOptions": {
+    "mochaFile": "cypress/results/junit-[hash].xml",
+    "overwrite": false,
+    "html": false,
+    "json": true
+  }
+}

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,50 @@
+const testCases = [
+  ["fixed image", "/images/fixed"],
+  ["fixed image smaller than requested size", "/images/fixed-too-big"],
+  ["fluid image", "/images/fluid"],
+  ["constrained image", "/images/constrained"],
+]
+const staticImageTestCases = [
+  ["fixed image", "/static-images/fixed"],
+  ["fixed image smaller than requested size", "/static-images/fixed-too-big"],
+  ["fluid image", "/static-images/fluid"],
+  ["constrained image", "/static-images/constrained"],
+]
+
+const sizes = [["iphone-6"], ["ipad-2"], [1027, 768]]
+
+describe(`GatsbyImage`, () => {
+  sizes.forEach(size => {
+    testCases.forEach(([title, path]) => {
+      describe(`${title}`, () => {
+        it(`renders correctly on ${size.join("x")}`, () => {
+          cy.viewport(...size)
+          cy.visit(path)
+          // Wait for main image to load
+          cy.get("[data-main-image]").should("exist")
+          // Wait for blur-up
+          cy.wait(1000)
+          cy.get("#test-wrapper").matchImageSnapshot()
+        })
+      })
+    })
+  })
+})
+
+describe(`StaticImage`, () => {
+  sizes.forEach(size => {
+    staticImageTestCases.forEach(([title, path]) => {
+      describe(`${title}`, () => {
+        it(`renders correctly on ${size.join("x")}`, () => {
+          cy.viewport(...size)
+          cy.visit(path)
+          // Wait for main image to load
+          cy.get("[data-main-image]").should("exist")
+          // Wait for blur-up
+          cy.wait(1000)
+          cy.get("#test-wrapper").matchImageSnapshot()
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+// ***********************************************************
+// 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) => {
+  addMatchImageSnapshotPlugin(on, config)
+  on("before:browser:launch", (browser = {}, launchOptions) => {
+    if (browser.family === "chromium" || browser.family === "chrome") {
+      // Make retina screens run at 1x density so they match the versions in CI
+      launchOptions.push("--force-device-scale-factor=1")
+    }
+    return launchOptions
+  })
+}

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

@@ -0,0 +1,26 @@
+// ***********************************************************
+// 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({
+    customDiffDir: `/__diff_output__`,
+    customDiffConfig: {
+        threshold: 0.1
+    },
+    failureThreshold: 0.03,
+    failureThresholdType: `percent`
+})

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`,
+  ],
+}