update review comments

gatsbyjs · Mar 30, 2022 · 3d98ed4 · 3d98ed4
1 parent b500e23
commit 3d98ed4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts
@@ -176,8 +176,7 @@ export async function gatsbyImageResolver(
             width,
             height: Math.round(width / imageSizes.aspectRatio),
             format,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            cropFocus: args.cropFocus!,
+            cropFocus: args.cropFocus,
             quality: args.quality as number,
           },
           actions

diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/__tests__/gatsby-worker.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/__tests__/gatsby-worker.ts
@@ -25,6 +25,7 @@ describe(`gatsby-worker`, () => {
   afterAll(() => server.close())
 
   describe(`IMAGE_CDN`, () => {
+    // TODO msw is failing on weird error during CI but not locally
     it.skip(`should download and transform an image`, async () => {
       const outputDir = path.join(__dirname, `.cache`)
       await IMAGE_CDN({

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
@@ -40,6 +40,17 @@ describe(`url-generator`, () => {
         `"/_gatsby/file/6e41758c045f4509e19938d738d2a23c/file%20test.pdf?u=https%3A%2F%2Fexample.com%2Ffile+test.pdf"`
       )
     })
+
+    it(`should handle html encoded urls`, () => {
+      const source = {
+        url: `https://example.com/file%20test.pdf`,
+        filename: `file test.pdf`,
+      }
+
+      expect(generateFileUrl(source)).toMatchInlineSnapshot(
+        `"/_gatsby/file/799c0b15477311f5b8d9f635594671f2/file%20test.pdf?u=https%3A%2F%2Fexample.com%2Ffile%2520test.pdf"`
+      )
+    })
   })
 
   describe(`generateImageUrl`, () => {
@@ -103,6 +114,26 @@ describe(`url-generator`, () => {
       )
     })
 
+    it(`should handle encoded urls`, () => {
+      const source = {
+        url: `https://example.com/image%20test.jpg`,
+        filename: `image test.jpg`,
+        mimeType: `image/jpeg`,
+      }
+
+      expect(
+        generateImageUrl(source, {
+          width: 100,
+          height: 100,
+          cropFocus: `top`,
+          format: `webp`,
+          quality: 80,
+        })
+      ).toMatchInlineSnapshot(
+        `"/_gatsby/image/e204b74f97d4407c992c4c3a7c5c66c4/a5d4237c29c15bd781f3586364b7e168/image%20test.webp?u=https%3A%2F%2Fexample.com%2Fimage%2520test.jpg&a=w%3D100%26h%3D100%26fit%3Dcrop%26crop%3Dtop%26fm%3Dwebp%26q%3D80"`
+      )
+    })
+
     it.each([
       [`width`, `w`, 100],
       [`height`, `h`, 50],

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
@@ -4,6 +4,7 @@ import { createContentDigest } from "gatsby-core-utils/create-content-digest"
 import { isImage } from "../types"
 import type { ImageCropFocus, WidthOrHeight } from "../types"
 
+// this is an arbitrary origin that we use #branding so we can construct a full url for the URL constructor
 const ORIGIN = `https://gatsbyjs.com`
 
 export enum ImageCDNUrlKeys {