.circleci/config.yml

@@ -368,6 +368,13 @@ jobs:
           test_path: e2e-tests/mdx
           test_command: yarn test
 
+  e2e_tests_gatsby-static-image:
+    <<: *e2e-executor
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/gatsby-static-image
+          test_command: yarn test
+
   starters_validate:
     executor: node
     steps:
@@ -573,6 +580,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_gatsby-image:
           <<: *e2e-test-workflow
+      - e2e_tests_gatsby-static-image:
+          <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime:

.eslintignore

@@ -8,8 +8,7 @@ packages/*/scripts/**
 **/dist/*
 **/__testfixtures__/**
 **/__tests__/fixtures/**
-www/public
-www/src/components/search-form/docsearch.min.js
+www
 peril
 docs
 plop-templates

.prettierignore

@@ -10,7 +10,7 @@ benchmarks/**/public
 e2e-tests/**/public
 examples/**/public
 integration-tests/**/public
-www/public
+www
 
 # cache-dirs
 **/.cache

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

@@ -48,6 +48,7 @@ module.exports = {
         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
+    `gatsby-plugin-image`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // 'gatsby-plugin-offline',

e2e-tests/development-runtime/package.json

@@ -5,6 +5,7 @@
   "author": "Dustin Schau <dustin@gatsbyjs.com>",
   "dependencies": {
     "gatsby": "^2.4.4",
+    "gatsby-plugin-image": "^0.0.1",
     "gatsby-image": "^2.0.41",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^2.1.0",

e2e-tests/development-runtime/src/components/image.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { StaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
+import { StaticImage } from "gatsby-plugin-image"
 
 /*
  * This component is built using `gatsby-image` to automatically serve optimized
@@ -26,7 +27,12 @@ const Image = () => (
         }
       }
     `}
-    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
+    render={data => (
+      <div>
+        <StaticImage src="../images/gatsby-icon.png" />
+        <Img fluid={data.placeholderImage.childImageSharp.fluid} />
+      </div>
+    )}
   />
 )
 export default Image

e2e-tests/gatsby-static-image/.gitignore

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

e2e-tests/gatsby-static-image/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/gatsby-static-image/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/gatsby-static-image/cypress.json

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

e2e-tests/gatsby-static-image/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/gatsby-static-image/cypress/integration/fixed.js

@@ -0,0 +1,72 @@
+const fixedTestId = `image-fixed`
+
+describe(`fixed`, () => {
+  beforeEach(() => {
+    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`)
+      .should(`have.attr`, `style`)
+      .and(style => {
+        ;[`height:`, `width:`].forEach(part => {
+          expect(style).contains(part)
+        })
+      })
+  })
+
+  it(`works on png files`, () => {
+    cy.getTestElement(`image-fixed-png`)
+      .find(`.gatsby-image-wrapper`)
+      .should(`exist`)
+  })
+
+  it(`works on relative paths outside of src`, () => {
+    cy.getTestElement(`image-fixed-relative`)
+      .find(`.gatsby-image-wrapper`)
+      .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/fluid.js

@@ -0,0 +1,26 @@
+const fluidTestId = `image-fluid`
+
+describe(`fluid`, () => {
+  beforeEach(() => {
+    cy.visit(`/fluid`).waitForRouteChange()
+  })
+
+  it(`works on png files`, () => {
+    cy.getTestElement(`image-fluid-png`)
+      .find(`.gatsby-image-wrapper`)
+      .should(`exist`)
+  })
+
+  it(`works on relative paths outside of src`, () => {
+    cy.getTestElement(`image-fluid-relative`)
+      .find(`.gatsby-image-wrapper`)
+      .should(`exist`)
+  })
+
+  it(`renders a spacer div`, () => {
+    cy.getTestElement(fluidTestId)
+      .find(`.gatsby-image-wrapper > div`)
+      .should(`have.attr`, `style`)
+      .and(`match`, /padding/)
+  })
+})

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

@@ -0,0 +1,42 @@
+const fluidTestId = `image-fluid`
+
+describe(`Production gatsby-image`, () => {
+  beforeEach(() => {
+    cy.visit(`/fluid`).waitForRouteChange()
+  })
+
+  describe(`wrapping elements`, () => {
+    describe(`outer div`, () => {
+      it(`exists`, () => {
+        cy.getTestElement(fluidTestId)
+          .find(`.gatsby-image-wrapper`)
+          .its(`length`)
+          .should(`eq`, 1)
+      })
+
+      it(`contains position relative`, () => {
+        cy.getTestElement(fluidTestId)
+          .find(`.gatsby-image-wrapper`)
+          .should(`have.attr`, `style`)
+          .and(`contains`, `position:relative`)
+      })
+    })
+  })
+
+  describe(`invalid image`, () => {
+    it(`will not appear`, () => {
+      cy.getTestElement(`invalid-image`)
+        .find(`.gatsby-image-wrapper`)
+        .should(`not.exist`)
+    })
+  })
+
+  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/cypress/integration/traced.js

@@ -0,0 +1,28 @@
+const tracedTestId = `image-traced`
+
+describe(`fixed`, () => {
+  beforeEach(() => {
+    cy.visit(`/traced`).waitForRouteChange()
+  })
+
+  it(`renders a traced svg`, () => {
+    cy.getTestElement(tracedTestId)
+      .find(`.gatsby-image-wrapper > img`)
+      .should(`have.attr`, `src`)
+      .and(src => {
+        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      })
+  })
+
+  it(`works on png files`, () => {
+    cy.getTestElement(`image-traced-png`)
+      .find(`.gatsby-image-wrapper`)
+      .should(`exist`)
+  })
+
+  it(`works on relative paths outside of src`, () => {
+    cy.getTestElement(`image-traced-relative`)
+      .find(`.gatsby-image-wrapper`)
+      .should(`exist`)
+  })
+})

e2e-tests/gatsby-static-image/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/gatsby-static-image/cypress/support/index.js

@@ -0,0 +1,16 @@
+// ***********************************************************
+// 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"

e2e-tests/gatsby-static-image/gatsby-config.js

@@ -0,0 +1,11 @@
+const path = require(`path`)
+
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Image e2e`,
+  },
+  plugins: [
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-image`
+  ],
+}