refactor(gatsby-plugin-sharp): split single file into more maintainable chunks

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

@@ -15,16 +15,26 @@ const cleanDirs = () =>
     fs.emptyDir(`${basePath}/.cache`),
   ])
 
+const configFiles = {
+  gatsby: path.join(__dirname, `../../gatsby-config.js`),
+  default: path.join(__dirname, `../../gatsby-config-default.js`),
+  nolazy: path.join(__dirname, `../../gatsby-config-nolazy.js`),
+}
+
 describe(`Lazy images`, () => {
   beforeAll(async () => {
     await cleanDirs()
   })
 
+  beforeEach(async () => {
+    await fs.copy(configFiles.default, configFiles.gatsby)
+  })
+
   test(`should process images on demand`, async () => {
     const { kill } = await createDevServer()
 
     const response = await request(
-      `http://localhost:8000/static/6d91c86c0fde632ba4cd01062fd9ccfa/a2541/gatsby-astronaut.png`,
+      `http://localhost:8000/static/6d91c86c0fde632ba4cd01062fd9ccfa/a484e/gatsby-astronaut.png`,
       {
         resolveWithFullResponse: true,
       }
@@ -33,18 +43,22 @@ describe(`Lazy images`, () => {
     await kill()
 
     expect(response.statusCode).toBe(200)
+    expect(response.headers[`content-type`]).toBe(`image/png`)
 
     const images = glob.sync(`${basePath}/public/**/*.png`)
-    expect(images.length).toBe(6)
+    expect(images.length).toBe(1)
   })
 
   test(`should process the rest of images on build`, async () => {
+    let images = glob.sync(`${basePath}/public/**/*.png`)
+    expect(images.length).toBe(1)
+
     await execa(`yarn`, [`build`], {
       cwd: basePath,
       env: { NODE_ENV: `production` },
     })
 
-    const images = glob.sync(`${basePath}/public/**/*.png`)
+    images = glob.sync(`${basePath}/public/**/*.png`)
     expect(images.length).toBe(6)
   })
 
@@ -58,4 +72,16 @@ describe(`Lazy images`, () => {
     const images = glob.sync(`${basePath}/public/**/*.png`)
     expect(images.length).toBe(6)
   })
+
+  test(`should process all images on develop when lazyImageGeneration is false`, async () => {
+    await fs.copy(configFiles.nolazy, configFiles.gatsby)
+
+    await cleanDirs()
+    const { kill } = await createDevServer()
+
+    await kill()
+
+    const images = glob.sync(`${basePath}/public/**/*.png`)
+    expect(images.length).toBe(6)
+  })
 })

integration-tests/gatsby-pipeline/gatsby-config-default.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/gatsby-config-nolazy.js

@@ -0,0 +1,24 @@
+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`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        lazyImageGeneration: false,
+      },
+    },
+  ],
+}

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

@@ -14,6 +14,11 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        lazyImageGeneration: false,
+      },
+    },
   ],
 }

integration-tests/gatsby-pipeline/utils/create-devserver.js

@@ -16,6 +16,14 @@ const killProcess = devProcess =>
     process.kill(-devProcess.pid)
   })
 
+// messages that tell us to stop proceeding and should resolve the process to be "done"
+// so we can stop the test sooner rather than to wait for a timeout
+const readyMessages = [
+  `You can now view`,
+  `Failed to compile`,
+  `Something is already running at`,
+]
+
 module.exports = () =>
   new Promise(resolve => {
     const devProcess = execa(`yarn`, [`develop`], {
@@ -25,7 +33,8 @@ module.exports = () =>
     })
 
     devProcess.stdout.on(`data`, chunk => {
-      if (chunk.toString().includes(`You can now view`)) {
+      const matches = readyMessages.some(msg => chunk.toString().includes(msg))
+      if (matches) {
         // We only need to expose a kill function, the rest is not needed
         resolve({ kill: () => killProcess(devProcess) })
       }

jest.config.js

@@ -32,6 +32,7 @@ module.exports = {
   moduleNameMapper: {
     "^highlight.js$": `<rootDir>/node_modules/highlight.js/lib/index.js`,
   },
+  snapshotSerializers: [`jest-serializer-path`],
   collectCoverage: useCoverage,
   coverageReporters: [`json-summary`, `text`, `html`, `cobertura`],
   coverageThreshold: {

package.json

@@ -24,6 +24,7 @@
     "jest": "^24.0.0",
     "jest-cli": "^24.0.0",
     "jest-junit": "^6.1.0",
+    "jest-serializer-path": "^0.1.15",
     "lerna": "^3.10.7",
     "lint-staged": "^8.0.4",
     "markdown-magic": "^0.1.25",

packages/gatsby-plugin-sharp/.gitignore

@@ -1,4 +1,2 @@
-/index.js
 /node_modules
-/gatsby-node.js
-/duotone.js
+/*.js

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -15,14 +15,14 @@ Object {
   "aspectRatio": 2.0661764705882355,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
   "density": 144,
-  "originalImg": "/static/1234/a3030/test.png",
+  "originalImg": "/static/1234/29cdc/test.png",
   "originalName": undefined,
   "presentationHeight": 68,
   "presentationWidth": 141,
   "sizes": "(max-width: 141px) 100vw, 141px",
-  "src": "/static/1234/a3030/test.png",
-  "srcSet": "/static/1234/56b42/test.png 200w,
-/static/1234/a3030/test.png 281w",
+  "src": "/static/1234/29cdc/test.png",
+  "srcSet": "/static/1234/223da/test.png 200w,
+/static/1234/29cdc/test.png 281w",
   "srcSetType": "image/png",
 }
 `;
@@ -32,14 +32,14 @@ Object {
   "aspectRatio": 2.0661764705882355,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
   "density": 144,
-  "originalImg": "/static/1234/67b29/test.png",
+  "originalImg": "/static/1234/55fae/test.png",
   "originalName": undefined,
   "presentationHeight": 136,
   "presentationWidth": 281,
   "sizes": "(max-width: 281px) 100vw, 281px",
-  "src": "/static/1234/67b29/test.png",
-  "srcSet": "/static/1234/4df82/test.png 200w,
-/static/1234/67b29/test.png 281w",
+  "src": "/static/1234/55fae/test.png",
+  "srcSet": "/static/1234/6d94b/test.png 200w,
+/static/1234/55fae/test.png 281w",
   "srcSetType": "image/png",
 }
 `;
@@ -49,13 +49,13 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQ4y2P4TwFgGNU8qnlU86jmgdUMAOBEq42KgAyMAAAAAElFTkSuQmCC",
   "density": 72,
-  "originalImg": "/static/1234/4ce1a/test.png",
+  "originalImg": "/static/1234/7bd23/test.png",
   "originalName": undefined,
   "presentationHeight": 1,
   "presentationWidth": 1,
   "sizes": "(max-width: 1px) 100vw, 1px",
-  "src": "/static/1234/4ce1a/test.png",
-  "srcSet": "/static/1234/4ce1a/test.png 1w",
+  "src": "/static/1234/7bd23/test.png",
+  "srcSet": "/static/1234/7bd23/test.png 1w",
   "srcSetType": "image/png",
 }
 `;
@@ -70,3 +70,66 @@ Object {
   "width": 746,
 }
 `;
+
+exports[`gatsby-plugin-sharp queueImageResizing should process immediately when asked 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      Object {
+        "args": Object {
+          "base64": false,
+          "duotone": false,
+          "grayscale": false,
+          "jpegProgressive": true,
+          "maxWidth": 800,
+          "pathPrefix": "",
+          "pngCompressionLevel": 9,
+          "pngCompressionSpeed": 4,
+          "quality": 50,
+          "sizeByPixelDensity": false,
+          "toFormat": "png",
+          "width": 3,
+        },
+        "inputPath": "<PROJECT_ROOT>/packages/gatsby-plugin-sharp/src/__tests__/images/144-density.png",
+        "outputPath": "<PROJECT_ROOT>/public/static/1234/39ca0/test.png",
+      },
+      Object {
+        "addThirdPartySchema": [Function],
+        "createJob": [Function],
+        "createNode": [Function],
+        "createNodeField": [Function],
+        "createPage": [Function],
+        "createPageDependency": [Function],
+        "createParentChildLink": [Function],
+        "createRedirect": [Function],
+        "deleteComponentsDependencies": [Function],
+        "deleteNode": [Function],
+        "deleteNodes": [Function],
+        "deletePage": [Function],
+        "endJob": [Function],
+        "replaceComponentQuery": [Function],
+        "replaceStaticQuery": [Function],
+        "replaceWebpackConfig": [Function],
+        "setBabelOptions": [Function],
+        "setBabelPlugin": [Function],
+        "setBabelPreset": [Function],
+        "setJob": [Function],
+        "setPluginStatus": [Function],
+        "setWebpackConfig": [Function],
+        "touchNode": [Function],
+      },
+      Object {
+        "lazyImageGeneration": true,
+        "stripMetadata": true,
+        "useMozJpeg": false,
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": Promise {},
+    },
+  ],
+}
+`;

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -1,5 +1,6 @@
 const path = require(`path`)
 const fs = require(`fs-extra`)
+jest.mock(`../scheduler`)
 
 jest.mock(`async/queue`, () => () => {
   return {
@@ -16,6 +17,7 @@ const {
   queueImageResizing,
   getImageSize,
 } = require(`../`)
+const { scheduleJob } = require(`../scheduler`)
 
 describe(`gatsby-plugin-sharp`, () => {
   const args = {
@@ -50,7 +52,7 @@ describe(`gatsby-plugin-sharp`, () => {
       // test name encoding with various characters
       const testName = `spaces and '"@#$%^&,`
 
-      const queueResult = await queueImageResizing({
+      const queueResult = queueImageResizing({
         file: getFileObject(
           path.join(__dirname, `images/144-density.png`),
           testName
@@ -68,6 +70,18 @@ describe(`gatsby-plugin-sharp`, () => {
       expect(testName.match(/[!@#$^&," ]/)).not.toBe(false)
       expect(queueResultName.match(/[!@#$^&," ]/)).not.toBe(true)
     })
+
+    it(`should process immediately when asked`, async () => {
+      scheduleJob.mockResolvedValue(Promise.resolve())
+      const result = queueImageResizing({
+        file: getFileObject(path.join(__dirname, `images/144-density.png`)),
+        args: { width: 3 },
+      })
+
+      await result.finishedPromise
+
+      expect(scheduleJob).toMatchSnapshot()
+    })
   })
 
   describe(`fluid`, () => {