fix(gatsby-source-contentful): fix base64 aspect ratio (#33533)

Co-authored-by: Ward Peeters <[email protected]>

Author: axe312ger

packages/gatsby-source-contentful/src/__fixtures__/contentful-base64.jpg

@@ -1,10 +1,28 @@
 // @ts-check
 import fs from "fs-extra"
-import { fetchRemoteFile } from "gatsby-core-utils"
+import _ from "lodash"
+import nock from "nock"
+import path from "path"
 import { generateImageSource, getBase64Image } from "../gatsby-plugin-image"
+import * as coreUtils from "gatsby-core-utils"
 
-jest.mock(`gatsby-core-utils`)
-jest.mock(`fs-extra`)
+nock.disableNetConnect()
+
+const FIXTURES = path.resolve(__dirname, `..`, `__fixtures__`)
+
+const createMockCache = () => {
+  const actualCacheMap = new Map()
+  return {
+    get: jest.fn(key => Promise.resolve(_.cloneDeep(actualCacheMap.get(key)))),
+    set: jest.fn((key, value) => actualCacheMap.set(key, value)),
+    directory: __dirname,
+    actualMap: actualCacheMap,
+  }
+}
+
+const cache = createMockCache()
+
+const fetchRemoteFileSpy = jest.spyOn(coreUtils, `fetchRemoteFile`)
 
 describe(`contentful extend node type`, () => {
   describe(`generateImageSource`, () => {
@@ -65,12 +83,7 @@ describe(`contentful extend node type`, () => {
   })
 
   describe(`getBase64Image`, () => {
-    beforeEach(() => {
-      // @ts-ignore
-      fetchRemoteFile.mockClear()
-      // @ts-ignore
-      fs.readFile.mockResolvedValue(Buffer.from(`test`))
-    })
+    afterEach(() => nock.cleanAll())
 
     const imageProps = {
       aspectRatio: 4.8698224852071,
@@ -97,19 +110,60 @@ describe(`contentful extend node type`, () => {
       },
     }
     test(`keeps image format`, async () => {
-      const result = await getBase64Image(imageProps)
-
-      expect(fetchRemoteFile).toHaveBeenCalled()
-      expect(result).toMatchInlineSnapshot(`"data:image/png;base64,dGVzdA=="`)
+      nock(`https://images.ctfassets.net:443`)
+        .get(
+          `/k8iqpp6u0ior/3ljGfnpegOnBTFGhV07iC1/94257340bda15ad4ca8462da3a8afa07/347966-contentful-logo-wordmark-dark__1_-4cd185-original-1582664935__1_.png`
+        )
+        .query({ w: `20`, h: `4`, q: `50` })
+        .reply(
+          200,
+          fs.readFileSync(`${FIXTURES}/contentful-base64.png`, null),
+          [
+            `Content-Type`,
+            `image/png`,
+            `Content-Length`,
+            `355`,
+            `Access-Control-Allow-Origin`,
+            `*`,
+          ]
+        )
+      const result = await getBase64Image(imageProps, cache)
+      expect(fetchRemoteFileSpy.mock.calls[0][0].url).toBe(
+        `https://images.ctfassets.net/k8iqpp6u0ior/3ljGfnpegOnBTFGhV07iC1/94257340bda15ad4ca8462da3a8afa07/347966-contentful-logo-wordmark-dark__1_-4cd185-original-1582664935__1_.png?w=20&h=4&q=50`
+      )
+      expect(result).toMatch(
+        `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAECAMAAABbXfTdAAAAh1BMVEUAAABEl785ruI7tOc7tOcqMDkqMDkqMDkqMDnby3FEmME7tOc7tOcqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDn3vl/cVmDtXGjtXGgqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDkqMDnbVWDqWWftXGjtXGilAiI/AAAALXRSTlMAUt/ZNiQhOC/bFh4dhm6FnaR+qZiKmZqJsdwWHRyIdqclqIA9nIdWslLf2jb4BEMwAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5QgNCSUh4wxIuwAAADZJREFUCNdjZASCPwxAwPobSLAxMv5gY+FghIC/LFDGW2EWQTDjgwBI+K04iORn1ARSVxhQAAC2HQpRHmHx6QAAAABJRU5ErkJggg==`
+      )
+      expect(nock.pendingMocks).toHaveLength(0)
     })
     test(`uses given image format`, async () => {
-      const result = await getBase64Image({
-        ...imageProps,
-        options: { ...imageProps.options, toFormat: `jpg` },
-      })
-
-      expect(fetchRemoteFile).toHaveBeenCalled()
-      expect(result).toMatchInlineSnapshot(`"data:image/jpg;base64,dGVzdA=="`)
+      nock(`https://images.ctfassets.net:443`)
+        .get(
+          `/k8iqpp6u0ior/3ljGfnpegOnBTFGhV07iC1/94257340bda15ad4ca8462da3a8afa07/347966-contentful-logo-wordmark-dark__1_-4cd185-original-1582664935__1_.png`
+        )
+        .query({ w: `20`, h: `4`, q: `50`, fm: `jpg` })
+        .reply(
+          200,
+          fs.readFileSync(`${FIXTURES}/contentful-base64.jpg`, null),
+          [
+            `Content-Type`,
+            `image/jpeg`,
+            `Content-Length`,
+            `356`,
+            `Access-Control-Allow-Origin`,
+            `*`,
+          ]
+        )
+      const result = await getBase64Image(
+        {
+          ...imageProps,
+          options: { ...imageProps.options, toFormat: `jpg` },
+        },
+        cache
+      )
+      expect(result).toMatch(
+        `data:image/jpg;base64,/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAEABMDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBv/EACIQAAAFAwQDAAAAAAAAAAAAAAABAgMRBBIhBRMUMUFRof/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQACMf/aAAwDAQACEQMRAD8A1dI1zG3S3HGLFmmWFW3dZP2YuPS0ndNXWQrxu4LMgAmeS2BpCg5o6XFmrm1qeihLsEXwAAKN/9k=`
+      )
     })
   })
 })

packages/gatsby-source-contentful/src/__fixtures__/contentful-base64.png

@@ -35,7 +35,7 @@ export const getBase64Image = (imageProps, cache) => {
     ...imageProps.options,
     toFormat,
     width: 20,
-    height: Math.floor(20 * aspectRatio),
+    height: Math.floor(20 / aspectRatio),
   }
 
   const requestUrl = createUrl(imageProps.baseUrl, imageOptions)