fix(gatsby-remark-copy-linked-files): respect assetPrefix (#26976)

* test(gatsby-remarkc-copy-linked-files): get rid of "undefined" in assertions - it doesn't inspire confidence

* fix(gatsby-remark-copy-linked-files): honor assetPrefix correctly

Co-authored-by: gatsbybot <[email protected]>

Author: pieh

packages/gatsby-remark-copy-linked-files/src/__tests__/index.js

@@ -35,13 +35,19 @@ describe(`gatsby-remark-copy-linked-files`, () => {
       },
     }
   }
-  const getFiles = filePath => [
-    {
-      absolutePath: path.posix.normalize(filePath),
-      internal: {},
-      extension: filePath.split(`.`).pop().trim(),
-    },
-  ]
+  const getFiles = filePath => {
+    const absolutePath = path.posix.normalize(filePath)
+    return [
+      {
+        absolutePath,
+        name: path.basename(absolutePath, path.extname(absolutePath)),
+        internal: {
+          contentDigest: `some-hash`,
+        },
+        extension: filePath.split(`.`).pop().trim(),
+      },
+    ]
+  }
 
   describe(`images`, () => {
     ;[`svg`, `gif`].forEach(extension => {
@@ -265,8 +271,93 @@ describe(`gatsby-remark-copy-linked-files`, () => {
     expect(fsExtra.copy).not.toHaveBeenCalled()
   })
 
+  describe(`respects pathPrefix`, () => {
+    const imageName = `sample-image`
+    const imagePath = `images/${imageName}.svg`
+
+    // pathPrefix passed to plugins already combine pathPrefix and assetPrefix
+    it(`relative pathPrefix (no assetPrefix)`, async () => {
+      const pathPrefix = `/path-prefix`
+      const markdownAST = remark.parse(`![some image](${imagePath})`)
+
+      const expectedNewPath = path.posix.join(
+        process.cwd(),
+        `public`,
+        `some-hash`,
+        `sample-image.svg`
+      )
+
+      await plugin({
+        files: getFiles(imagePath),
+        markdownAST,
+        markdownNode,
+        getNode,
+        pathPrefix,
+      })
+
+      expect(imageURL(markdownAST)).toEqual(
+        `/path-prefix/some-hash/sample-image.svg`
+      )
+
+      expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
+    })
+
+    it(`absolute pathPrefix (with assetPrefix, empty base path prefix)`, async () => {
+      const pathPrefix = `https://cdn.mysiteassets.com`
+      const markdownAST = remark.parse(`![some image](${imagePath})`)
+
+      const expectedNewPath = path.posix.join(
+        process.cwd(),
+        `public`,
+        `some-hash`,
+        `sample-image.svg`
+      )
+
+      await plugin({
+        files: getFiles(imagePath),
+        markdownAST,
+        markdownNode,
+        getNode,
+        pathPrefix,
+      })
+
+      expect(imageURL(markdownAST)).toEqual(
+        `https://cdn.mysiteassets.com/some-hash/sample-image.svg`
+      )
+
+      expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
+    })
+
+    it(`absolute pathPrefix (with assetPrefix, and non-empty base path prefix)`, async () => {
+      const pathPrefix = `https://cdn.mysiteassets.com/path-prefix`
+      const markdownAST = remark.parse(`![some image](${imagePath})`)
+
+      const expectedNewPath = path.posix.join(
+        process.cwd(),
+        `public`,
+        `some-hash`,
+        `sample-image.svg`
+      )
+
+      await plugin({
+        files: getFiles(imagePath),
+        markdownAST,
+        markdownNode,
+        getNode,
+        pathPrefix,
+      })
+
+      expect(imageURL(markdownAST)).toEqual(
+        `https://cdn.mysiteassets.com/path-prefix/some-hash/sample-image.svg`
+      )
+
+      expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
+    })
+  })
+
   describe(`options.destinationDir`, () => {
-    const imagePath = `images/sample-image.gif`
+    const imageName = `sample-image`
+    const imagePath = `images/${imageName}.gif`
 
     it(`throws an error if the destination supplied by destinationDir points outside of the root dir`, async () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
@@ -303,11 +394,12 @@ describe(`gatsby-remark-copy-linked-files`, () => {
     it(`copies file to the destination supplied by destinationDir`, async () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
       const validDestinationDir = `path/to/dir`
+      const fileLocationPart = `some-hash/${imageName}.gif`
       const expectedNewPath = path.posix.join(
         process.cwd(),
         `public`,
         validDestinationDir,
-        `/undefined/undefined.gif`
+        fileLocationPart
       )
       expect.assertions(3)
       await plugin(
@@ -319,15 +411,15 @@ describe(`gatsby-remark-copy-linked-files`, () => {
         expect(v).toBeDefined()
         expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
         expect(imageURL(markdownAST)).toEqual(
-          `/path/to/dir/undefined/undefined.gif`
+          `/path/to/dir/${fileLocationPart}`
         )
       })
     })
 
     it(`copies file to the destination supplied by the destinationDir function`, async () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
       const customDestinationDir = f => `foo/${f.hash}--bar`
-      const expectedDestination = `foo/undefined--bar.gif`
+      const expectedDestination = `foo/some-hash--bar.gif`
       expect.assertions(3)
       await plugin(
         { files: getFiles(imagePath), markdownAST, markdownNode, getNode },
@@ -346,11 +438,13 @@ describe(`gatsby-remark-copy-linked-files`, () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
       const pathPrefix = `/blog`
       const validDestinationDir = `path/to/dir`
+
+      const fileLocationPart = `some-hash/${imageName}.gif`
       const expectedNewPath = path.posix.join(
         process.cwd(),
         `public`,
         validDestinationDir,
-        `/undefined/undefined.gif`
+        fileLocationPart
       )
       expect.assertions(3)
       await plugin(
@@ -368,7 +462,7 @@ describe(`gatsby-remark-copy-linked-files`, () => {
         expect(v).toBeDefined()
         expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
         expect(imageURL(markdownAST)).toEqual(
-          `${pathPrefix}/path/to/dir/undefined/undefined.gif`
+          `${pathPrefix}/path/to/dir/${fileLocationPart}`
         )
       })
     })
@@ -377,7 +471,7 @@ describe(`gatsby-remark-copy-linked-files`, () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
       const pathPrefix = `/blog`
       const customDestinationDir = f => `hello${f.name}123`
-      const expectedDestination = `helloundefined123.gif`
+      const expectedDestination = `hello${imageName}123.gif`
       expect.assertions(3)
       await plugin(
         {
@@ -400,12 +494,12 @@ describe(`gatsby-remark-copy-linked-files`, () => {
       })
     })
 
-    it(`copies file to the root dir when destinationDir is not supplied'`, async () => {
+    it(`copies file to the root dir when destinationDir is not supplied`, async () => {
       const markdownAST = remark.parse(`![some absolute image](${imagePath})`)
       const expectedNewPath = path.posix.join(
         process.cwd(),
         `public`,
-        `/undefined/undefined.gif`
+        `/some-hash/${imageName}.gif`
       )
       expect.assertions(3)
       await plugin({
@@ -416,7 +510,7 @@ describe(`gatsby-remark-copy-linked-files`, () => {
       }).then(v => {
         expect(v).toBeDefined()
         expect(fsExtra.copy).toHaveBeenCalledWith(imagePath, expectedNewPath)
-        expect(imageURL(markdownAST)).toEqual(`/undefined/undefined.gif`)
+        expect(imageURL(markdownAST)).toEqual(`/some-hash/${imageName}.gif`)
       })
     })
   })

packages/gatsby-remark-copy-linked-files/src/index.js

@@ -58,10 +58,7 @@ const newPath = (linkNode, options) => {
 const newLinkURL = (linkNode, options, pathPrefix) => {
   const { destinationDir } = options
   const destination = getDestination(linkNode, destinationDir)
-  const linkPaths = [`/`, pathPrefix, destination].filter(lpath =>
-    lpath ? true : false
-  )
-  return path.posix.join(...linkPaths)
+  return `${pathPrefix ? pathPrefix : ``}/${destination}`
 }
 
 function toArray(buf) {