test: enable integration tests for image sharp (#11567)

* test: enable integration tests for image sharp

.circleci/config.yml

@@ -130,16 +130,17 @@ jobs:
     executor: node
     <<: *test_template
 
-  integration_tests:
+  integration_tests_long_term_caching:
     executor: node
     steps:
-      - checkout
-      - run: ./scripts/assert-changed-files.sh "packages/*|integration-tests/*|.circleci/*"
-      - <<: *restore_cache
-      - <<: *install_node_modules
-      - <<: *persist_cache
-      - <<: *attach_to_bootstrap
-      - run: yarn test:integration
+      - e2e-test:
+          test_path: integration-tests/long-term-caching
+
+  integration_tests_gatsby_pipeline:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/gatsby-pipeline
 
   e2e_tests_gatsbygram:
     <<: *e2e-executor
@@ -210,7 +211,9 @@ workflows:
           <<: *ignore_docs
           requires:
             - bootstrap
-      - integration_tests:
+      - integration_tests_long_term_caching:
+          <<: *ignore_docs
+      - integration_tests_gatsby_pipeline:
           <<: *ignore_docs
       - e2e_tests_gatsbygram:
           <<: *e2e-test-workflow

integration-tests/gatsby-pipeline/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.
+

integration-tests/gatsby-pipeline/README.md

@@ -0,0 +1,11 @@
+# gatsby-pipeline
+
+It's a default gatsby starter to test our build & develop pipeline.
+
+## Install
+
+You can install all dependencies by running `yarn` or `npm install`.
+
+## Tests
+
+To run our test suite you can simply run `yarn test`. If you want to test with the latest sources from the packages directory. You can use the [e2e-test.sh](https://github.com/gatsbyjs/gatsby/blob/master/scripts/e2e-test.sh) helper script that we use for CI. You can run it as `sh scripts/e2e-test.sh integration-tests/gatsby-pipeline` from the root directory.

integration-tests/gatsby-pipeline/__tests__/lazy-image-build/develop.js

@@ -0,0 +1,61 @@
+const execa = require(`execa`)
+const path = require(`path`)
+const fs = require(`fs-extra`)
+const glob = require(`glob`)
+const request = require(`request-promise-native`)
+const createDevServer = require(`../../utils/create-devserver`)
+const basePath = path.resolve(__dirname, `../../`)
+
+// 2 min
+jest.setTimeout(2000 * 60)
+
+const cleanDirs = () =>
+  Promise.all([
+    fs.emptyDir(`${basePath}/public`),
+    fs.emptyDir(`${basePath}/.cache`),
+  ])
+
+describe(`Lazy images`, () => {
+  beforeAll(async () => {
+    await cleanDirs()
+  })
+
+  test(`should process images on demand`, async () => {
+    const { kill } = await createDevServer()
+
+    const response = await request(
+      `http://localhost:8000/static/6d91c86c0fde632ba4cd01062fd9ccfa/a2541/gatsby-astronaut.png`,
+      {
+        resolveWithFullResponse: true,
+      }
+    )
+
+    await kill()
+
+    expect(response.statusCode).toBe(200)
+
+    const images = glob.sync(`${basePath}/public/**/*.png`)
+    expect(images.length).toBe(6)
+  })
+
+  test(`should process the rest of images on build`, async () => {
+    await execa(`yarn`, [`build`], {
+      cwd: basePath,
+      env: { NODE_ENV: `production` },
+    })
+
+    const images = glob.sync(`${basePath}/public/**/*.png`)
+    expect(images.length).toBe(6)
+  })
+
+  test(`should process all images from a clean build`, async () => {
+    await cleanDirs()
+    await execa(`yarn`, [`build`], {
+      cwd: basePath,
+      env: { NODE_ENV: `production` },
+    })
+
+    const images = glob.sync(`${basePath}/public/**/*.png`)
+    expect(images.length).toBe(6)
+  })
+})

integration-tests/gatsby-pipeline/gatsby-browser.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's Browser APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/browser-apis/
+ */
+
+// You can delete this file if you're not using it

integration-tests/gatsby-pipeline/gatsby-config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Default Starter`,
+    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+    author: `@gatsbyjs`,
+  },
+  plugins: [
+    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/images`,
+      },
+    },
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+  ],
+}

integration-tests/gatsby-pipeline/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "gatsby-starter-default",
+  "description": "Gatsby default starter",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <[email protected]>",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-image": "latest",
+    "gatsby-plugin-react-helmet": "latest",
+    "gatsby-plugin-sharp": "latest",
+    "gatsby-source-filesystem": "latest",
+    "gatsby-transformer-sharp": "latest",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-helmet": "^5.2.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build --prefix-paths",
+    "develop": "gatsby develop",
+    "test": "jest --config=../jest.config.js gatsby-pipeline/"
+  },
+  "devDependencies": {
+    "execa": "^1.0.0",
+    "fs-extra": "^7.0.1",
+    "jest": "^24.0.0",
+    "jest-cli": "^24.0.0",
+    "request": "^2.88.0",
+    "request-promise-native": "^1.0.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  }
+}

integration-tests/gatsby-pipeline/src/components/header.js

@@ -0,0 +1,42 @@
+import { Link } from "gatsby"
+import PropTypes from "prop-types"
+import React from "react"
+
+const Header = ({ siteTitle }) => (
+  <header
+    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>
+  </header>
+)
+
+Header.propTypes = {
+  siteTitle: PropTypes.string,
+}
+
+Header.defaultProps = {
+  siteTitle: ``,
+}
+
+export default Header

integration-tests/gatsby-pipeline/src/components/image.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `StaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.app/gatsby-image
+ * - `StaticQuery`: https://gatsby.app/staticquery
+ */
+
+const Image = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+          childImageSharp {
+            fluid(maxWidth: 300) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    `}
+    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
+  />
+)
+export default Image