Added tests for remark images with query strings.

gatsbyjs · Feb 14, 2019 · 8e73a31 · 8e73a31
1 parent 185f8ca
commit 8e73a31
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 1 deletion.
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -124,3 +124,41 @@ exports[`it transforms images in markdown 1`] = `
   </span>
   </a>"
 `;
+
+exports[`it transforms HTML img tags with query strings 1`] = `
+"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
+    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;url(&apos;data:image/png;base64, iVBORw)&apos;); background-size: cover; display: block;\\"></span>
+    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+  </span>
+  </a>"
+`;
+
+exports[`it transforms images in markdown with query strings 1`] = `
+"<a
+    class=\\"gatsby-resp-image-link\\"
+    href=\\"not-a-real-dir/images/my-image.jpeg\\"
+    style=\\"display: block\\"
+    target=\\"_blank\\"
+    rel=\\"noopener\\"
+  >
+    <span
+    class=\\"gatsby-resp-image-wrapper\\"
+    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+  >
+    <span
+      class=\\"gatsby-resp-image-background-image\\"
+      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('url('data:image/png;base64, iVBORw)'); background-size: cover; display: block;\\"
+    ></span>
+    <img
+        class=\\"gatsby-resp-image-image\\"
+        style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
+        alt=\\"image\\"
+        title=\\"\\"
+        src=\\"not-a-real-dir/images/my-image.jpeg\\"
+        srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+        sizes=\\"(max-width: 650px) 100vw, 650px\\"
+      />
+  </span>
+  </a>"
+`;
diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js
@@ -15,6 +15,7 @@ jest.mock(`gatsby-plugin-sharp`, () => {
 })
 
 const Remark = require(`remark`)
+const queryString = require(`query-string`)
 
 const plugin = require(`../`)
 
@@ -53,7 +54,7 @@ const createPluginOptions = (content, imagePaths = `/`) => {
   return {
     files: [].concat(imagePaths).map(imagePath => {
       return {
-        absolutePath: `${dirName}/${imagePath}`,
+        absolutePath: queryString.parseUrl(`${dirName}/${imagePath}`).url,
       }
     }),
     markdownNode: createNode(content),
@@ -268,3 +269,37 @@ test(`it handles goofy nesting properly`, async () => {
   expect(node.value).toMatchSnapshot()
   expect(node.value).not.toMatch(`<html>`)
 })
+
+test(`it transforms HTML img tags with query strings`, async () => {
+  const imagePath = `image/my-image.jpeg?query=string`
+
+  const content = `
+<img src="./${imagePath}">
+  `.trim()
+
+  const nodes = await plugin(createPluginOptions(content, imagePath))
+
+  expect(nodes.length).toBe(1)
+
+  const node = nodes.pop()
+  expect(node.type).toBe(`html`)
+  expect(node.value).toMatchSnapshot()
+  expect(node.value).not.toMatch(`<html>`)
+})
+
+test(`it transforms images in markdown with query strings`, async () => {
+  const imagePath = `images/my-image.jpeg?query=string`
+  const content = `
+
+![image](./${imagePath})
+  `.trim()
+
+  const nodes = await plugin(createPluginOptions(content, imagePath))
+
+  expect(nodes.length).toBe(1)
+
+  const node = nodes.pop()
+  expect(node.type).toBe(`html`)
+  expect(node.value).toMatchSnapshot()
+  expect(node.value).not.toMatch(`<html>`)
+})