feat: Add new image resolvers (#27443)

* Add static image plugin

* Parse static image files

* Fix package.json

* Better static analysis

* Use jsx utils package

* Fix typings

* Typecheck fix

* Fix repo fields

* Helpful warning

* Re-enable duotone

* Update readme

* Improve typings

* wip fixed image fields for tracedSVG and webP

* handle fluid images as well

* Use require rather than JSON import

* Watch files for changes, and use relative paths

* Improve types

* Add type

* Update yarn.lock

* Add lots of comments and remove unused stuff

* Create and watch our own nodes

* Update readme

* Update deps

* Only watch in develop

* Rename to gatsby-plugin-image

* Rearrange, ready for merger

* Import @wardpeet 's gatsby-image-netxtgen

* Update typings and further merge packages

* Build babel plugin

* More merging

* Add server/browser static image variants

* include webpack changes

* change error message to use gatsby-plugin-image

* Fix compat compilation

* Fix SSR

* Merge readmes

* Build browser bundle

* Export correctly from browser entry point

* Remove hook import

* Apply suggestions from code review

Co-authored-by: LB <[email protected]>

* Changes from review

* add path prefix, static image do e2e test

* Add prepare script

* Apply README suggestions from code review

Co-authored-by: LB <[email protected]>

* Fix image component in e2e test

* Better error messages

* Prefer svg over base64. Warn for unsupported art direction

* Fix type

* Use "layout" instead of fixed/fluid

* add static images to production runtime site

* add path prefix tests

* Reorg types. Change private prop name

* initial gatsby static image tests

* add test suite to circle ci

* add test suite to circle ci

* add test suite to circle ci

* remove unused imports, use valid fluid setting

* Use new fluid props syntax

* Better var name

* update tests

* remove tests that no longer match the expected DOM

* More compat-fixes

* Change classname to match old version

* Compat improvements

* Update tests to match new classname

* v0.0.1

* Add readme caveat

* Update version in packages

* Remove forcewrapper

* wip

* have static image use gatsbyImageProps function

* Upgrade sharp

* Fix static image type

* First steps to update API

* Add descriptions

* TypeScript fixes

* Compile ts

* Add @gillkyle's calculateImageSizes util funciton

* remove unused file

* unbump sharp until sharp PR is merged

* comment out import

* update snapshots

* change JSX to take image prop

* static image uses new image props

* Rename all the things

* Turns out it wasn't all of them

* Update schema

* fix intrinsic issue 1px problem, still doesn't seem to reach the correct max size

* Fix layout

* Update readme

* Fix dep

* Shouldn;t be in this

* Fix sharp function name

* Version

* What is this snapshot out of date?

* Add a helper funciton

* Make backgroundColor work

* update layout for images

* no longer using base64 so remove that test

* placeholder not getting passed from static, so this is still busted

* Fix passing of props

* Add TODO comments

* Export batch queue function

* Handle the default sizes elsewhere, as it depends on layout

* feat(gatsby-plugin-sharp): create image sizes helper (#27554)

* wip tests and tweaks to utility

* more wip tests

* remove file reading from helper

* fixing fluid calculations and adding more tests

* tweak a little more

* remove extraneous export

* check that user specified dimensions are positive

* remove unnecessary code from review suggestions

* add warning, simplify case of no fluid dimensions

* add files to warnings and clean up logic

* Split into two functions and remove 3x default

* Rename warn function and use reporter

Co-authored-by: Matt Kane <[email protected]>

* Use passed-in reporter

* Use shared function to handle fit calculation

* Return presentationW/H and aspect ratio from sizes function

* Round sizes

* Use new resizing functions

* default layout wasn't passed to createImageSizes

* add fixed width default and round calculated height

* reversed logic for aspect ratio calculations

* Correct description for outputPixelDensities resolver

* Remove log

* Handle null image in SSR

* Version fix

* fix(gatsby-plugin-utils): skip libcheck during typegen

* Remove unused func

* Remove dominantColor from fixed and fluid

* sizing code for KG to drive refactor

* remove isSmaller

* fix tests

* Fix sizes and srcset generation

* Add object-fit

* rename placeholder function for consistency

* Update readme

* fix path prefix images

* fix sizing when larger image dimensions are requested, fix warning as well

* rename file to match constrained naming

* Changes from review

* Add alpha warning

* Change from review

* fix placeholder opacity

* fix placeholder bug

* only change placeholder size for background color div

* tests: Add visual regression tests (#27619)

* tests: Add visual regression tests

* Add config

* Wait for images to load

* Do multiple window sizes

* Adjust settings for comparisons

* Fix wrapper

* Add 1024 window

* Save reports

* Update fixed image too large snapshot

* Disable video

* Update readme

* Update element id

* Force 1x pixel density

* Update readme

* Fix e2e test

* dont flash placeholder image when removing opacity

* Fix dependency

* add analagous tests for static image

* Add width to constrained images and update snapshots

* Use float

Co-authored-by: Kyle Gill <[email protected]>
Co-authored-by: Laurie <[email protected]>
Co-authored-by: gatsbybot <[email protected]>

.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": "[email protected]",
+  "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`,
+  ],
+}