fix tests

gatsbyjs · Mar 18, 2022 · 52ab2ca · 52ab2ca
1 parent 1c52519
commit 52ab2ca
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 21 deletions.
diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/resize-resolver.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/resize-resolver.ts
@@ -297,6 +297,12 @@ describe(`resizeResolver`, () => {
     const actions = {
       createJobV2: jest.fn(() => jest.fn()),
     }
+    const imageArgs = {
+      format: `jpg`,
+      width: 100,
+      height: 160,
+      quality: 75,
+    }
     dispatchers.shouldDispatch.mockImplementationOnce(() => true)
 
     resizeResolver(portraitSource, { width: 100 }, actions)
@@ -306,10 +312,7 @@ describe(`resizeResolver`, () => {
           contentDigest: `1`,
           url: portraitSource.url,
           filename: `dog-portrait.jpg`,
-          format: `jpg`,
-          width: 100,
-          height: expect.any(Number),
-          quality: 75,
+          ...imageArgs,
         },
         inputPaths: [],
         name: `IMAGE_CDN`,
@@ -318,7 +321,8 @@ describe(`resizeResolver`, () => {
             `public`,
             `_gatsby`,
             `image`,
-            createContentDigest(portraitSource.url)
+            createContentDigest(portraitSource.url),
+            createContentDigest(`w=100&h=160&fm=jpg&q=75`)
           )
         ),
       }),

diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/__tests__/url-generator.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/__tests__/url-generator.ts
@@ -0,0 +1,128 @@
+import {
+  generateFileUrl,
+  generateImageUrl,
+  ImageCDNUrlKeys,
+} from "../url-generator"
+
+type ImageArgs = Parameters<typeof generateImageUrl>[1]
+
+describe(`url-generator`, () => {
+  describe(`generateFileUrl`, () => {
+    it(`should return a file based url`, () => {
+      const source = {
+        url: `https://example.com/file.pdf`,
+        filename: `file.pdf`,
+      }
+
+      expect(generateFileUrl(source)).toMatchInlineSnapshot(
+        `"/_gatsby/file/9f2eba7a1dbc78363c52aeb0daec9031/file.pdf?u=https%3A%2F%2Fexample.com%2Ffile.pdf"`
+      )
+    })
+
+    it(`should handle special characters`, () => {
+      const source = {
+        url: `https://example.com/file-éà.pdf`,
+        filename: `file-éà.pdf`,
+      }
+
+      expect(generateFileUrl(source)).toMatchInlineSnapshot(
+        `"/_gatsby/file/8802451220032a66565f179e89e00a83/file-%C3%A9%C3%A0.pdf?u=https%3A%2F%2Fexample.com%2Ffile-%C3%A9%C3%A0.pdf"`
+      )
+    })
+
+    it(`should handle spaces`, () => {
+      const source = {
+        url: `https://example.com/file test.pdf`,
+        filename: `file test.pdf`,
+      }
+
+      expect(generateFileUrl(source)).toMatchInlineSnapshot(
+        `"/_gatsby/file/6e41758c045f4509e19938d738d2a23c/file%20test.pdf?u=https%3A%2F%2Fexample.com%2Ffile+test.pdf"`
+      )
+    })
+  })
+
+  describe(`generateImageUrl`, () => {
+    const source = {
+      url: `https://example.com/image.jpg`,
+      filename: `image.jpg`,
+      mimeType: `image/jpeg`,
+    }
+
+    it(`should return an image based url`, () => {
+      expect(
+        generateImageUrl(source, {
+          width: 100,
+          height: 100,
+          cropFocus: `top`,
+          format: `webp`,
+          quality: 80,
+        })
+      ).toMatchInlineSnapshot(
+        `"/_gatsby/image/18867d45576d8283d6fabb82406789c8/a5d4237c29c15bd781f3586364b7e168/image.webp?u=https%3A%2F%2Fexample.com%2Fimage.jpg&a=w%3D100%26h%3D100%26fit%3Dcrop%26crop%3Dtop%26fm%3Dwebp%26q%3D80"`
+      )
+    })
+
+    it(`should handle special characters`, () => {
+      const source = {
+        url: `https://example.com/image-éà.jpg`,
+        filename: `image-éà.jpg`,
+        mimeType: `image/jpeg`,
+      }
+
+      expect(
+        generateImageUrl(source, {
+          width: 100,
+          height: 100,
+          cropFocus: `top`,
+          format: `webp`,
+          quality: 80,
+        })
+      ).toMatchInlineSnapshot(
+        `"/_gatsby/image/efe0766d673b5a1cb5070c77e019c3de/a5d4237c29c15bd781f3586364b7e168/image-%C3%A9%C3%A0.webp?u=https%3A%2F%2Fexample.com%2Fimage-%C3%A9%C3%A0.jpg&a=w%3D100%26h%3D100%26fit%3Dcrop%26crop%3Dtop%26fm%3Dwebp%26q%3D80"`
+      )
+    })
+
+    it(`should handle spaces`, () => {
+      const source = {
+        url: `https://example.com/image test.jpg`,
+        filename: `image test.jpg`,
+        mimeType: `image/jpeg`,
+      }
+
+      expect(
+        generateImageUrl(source, {
+          width: 100,
+          height: 100,
+          cropFocus: `top`,
+          format: `webp`,
+          quality: 80,
+        })
+      ).toMatchInlineSnapshot(
+        `"/_gatsby/image/4b2d785bb2f2b7d04e00cb15daeb1687/a5d4237c29c15bd781f3586364b7e168/image%20test.webp?u=https%3A%2F%2Fexample.com%2Fimage+test.jpg&a=w%3D100%26h%3D100%26fit%3Dcrop%26crop%3Dtop%26fm%3Dwebp%26q%3D80"`
+      )
+    })
+
+    it.each([
+      [`width`, `w`, 100],
+      [`height`, `h`, 50],
+      [`cropFocus`, `crop`, `center,right`],
+      [`format`, `fm`, `webp`],
+      [`quality`, `q`, 60],
+    ] as Array<[keyof ImageArgs, string, ImageArgs[keyof ImageArgs]]>)(
+      `should set %s in image args`,
+      (key, queryKey, value) => {
+        const url = new URL(
+          // @ts-ignore remove typings
+          `https://gatsbyjs.com${generateImageUrl(source, {
+            format: `webp`,
+            [key]: value,
+          })}`
+        )
+        expect(url.searchParams.get(ImageCDNUrlKeys.ARGS)).toContain(
+          `${queryKey}=${value}`
+        )
+      }
+    )
+  })
+})
diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts
@@ -1,12 +1,15 @@
 import { basename, extname } from "path"
+import { URL } from "url"
 import { createContentDigest } from "gatsby-core-utils/create-content-digest"
 import { isImage } from "../types"
 import type { ImageCropFocus, WidthOrHeight } from "../types"
 
-// export enum ImageCDNKeys {
-//   url: 'u',
+const ORIGIN = `https://gatsbyjs.com`
 
-// }
+export enum ImageCDNUrlKeys {
+  URL = `u`,
+  ARGS = `a`,
+}
 
 export function generateFileUrl({
   url,
@@ -18,9 +21,15 @@ export function generateFileUrl({
   const fileExt = extname(filename)
   const filenameWithoutExt = basename(filename, fileExt)
 
-  return `${generatePublicUrl({ url })}/${encodeURIComponent(
-    filenameWithoutExt
-  )}${fileExt}`
+  const parsedURL = new URL(
+    `${ORIGIN}${generatePublicUrl({
+      url,
+    })}/${filenameWithoutExt}${fileExt}`
+  )
+
+  parsedURL.searchParams.append(ImageCDNUrlKeys.URL, url)
+
+  return `${parsedURL.pathname}${parsedURL.search}`
 }
 
 export function generateImageUrl(
@@ -29,13 +38,19 @@ export function generateImageUrl(
 ): string {
   const filenameWithoutExt = basename(source.filename, extname(source.filename))
 
-  return `${generatePublicUrl(source)}/${createContentDigest(
-    generateImageArgs(imageArgs)
-  )}/${encodeURIComponent(filenameWithoutExt)}.${
-    imageArgs.format
-  }?u=${encodeURIComponent(source.url)}&a=${encodeURIComponent(
+  const parsedURL = new URL(
+    `${ORIGIN}${generatePublicUrl(source)}/${createContentDigest(
+      generateImageArgs(imageArgs)
+    )}/${filenameWithoutExt}.${imageArgs.format}`
+  )
+
+  parsedURL.searchParams.append(ImageCDNUrlKeys.URL, source.url)
+  parsedURL.searchParams.append(
+    ImageCDNUrlKeys.ARGS,
     generateImageArgs(imageArgs)
-  )}`
+  )
+
+  return `${parsedURL.pathname}${parsedURL.search}`
 }
 
 function generatePublicUrl({

diff --git a/packages/gatsby/src/schema/types/__tests__/remote-file-interface.ts b/packages/gatsby/src/schema/types/__tests__/remote-file-interface.ts
@@ -1,3 +1,4 @@
+import { URL } from "url"
 import { store } from "../../../redux"
 import { actions } from "../../../redux/actions"
 import { build } from "../../index"
@@ -34,10 +35,11 @@ function extractImageChunks(url: string): {
   url: string
   params: string
 } {
-  const chunks = url.split(`/`)
+  const parsedURL = new URL(`https://gatsbyjs.com${url}`)
+
   return {
-    url: Buffer.from(chunks[3], `base64`).toString(),
-    params: Buffer.from(chunks[4], `base64`).toString(),
+    url: parsedURL.searchParams.get(`u`) as string,
+    params: parsedURL.searchParams.get(`a`) as string,
   }
 }
 
@@ -112,7 +114,7 @@ describe(`remote-file`, () => {
       expect(data).toMatchInlineSnapshot(`
         Object {
           "height": 100,
-          "src": "/_gatsby/image/aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1ODczMDAwMDMzODgtNTkyMDhjYzk2MmNiP2l4bGliPXJiLTEuMi4xJnE9ODAmZm09anBnJmNyb3A9ZW50cm9weSZjcz10aW55c3JnYiZ3PTY0MA==/dz0xMDAmaD0xMDAmZm09anBnJnE9NzU=/pauline-loroy-U3aF7hgUSrk-unsplash.jpg",
+          "src": "/_gatsby/image/089c5250227072e75a690e7c21838ed7/1a3d5207b5ced4f39bbd3bbd1c1fa633/pauline-loroy-U3aF7hgUSrk-unsplash.jpg?u=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1587300003388-59208cc962cb%3Fixlib%3Drb-1.2.1%26q%3D80%26fm%3Djpg%26crop%3Dentropy%26cs%3Dtinysrgb%26w%3D640&a=w%3D100%26h%3D100%26fm%3Djpg%26q%3D75",
           "width": 100,
         }
       `)