fix(gatsby-remark-images): regenerate markdown when used image changes (#34433)

Author: Josh Johnson

e2e-tests/development-runtime/content/md-image.md

@@ -0,0 +1,8 @@
+---
+title: Hello World
+date: 2018-12-14
+---
+
+This is a truly meaningful blog post
+
+![Image](../src/images/image.png)

e2e-tests/development-runtime/cypress/integration/hot-reloading/non-js-file.js

@@ -3,31 +3,68 @@ const TEST_ID = `sub-title`
 const message = `This is a sub-title`
 
 describe(`hot reloading non-js file`, () => {
-  beforeEach(() => {
-    cy.exec(
-      `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${message}:%${TEMPLATE}%" --exact`
-    )
-    cy.wait(1000)
+  describe(`markdown`, () => {
+    beforeEach(() => {
+      cy.exec(
+        `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${message}:%${TEMPLATE}%" --exact`
+      )
+      cy.wait(1000)
+  
+      cy.visit(`/2018-12-14-hello-world/`).waitForRouteChange()
+  
+      cy.wait(1000)
+    })
+  
+    it(`displays placeholder content on launch`, () => {
+      cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
+    })
+  
+    it(`hot reloads with new content`, () => {
+      cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
+  
+      cy.exec(
+        `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${TEMPLATE}:${message}"`
+      )
+  
+      // wait for socket.io to update
+      cy.wait(5000)
+  
+      cy.getTestElement(TEST_ID).invoke(`text`).should(`eq`, message)
+    })
+  })
 
-    cy.visit(`/2018-12-14-hello-world/`).waitForRouteChange()
+  describe(`image`, () => {
+    beforeEach(() => {  
+      cy.visit(`/md-image/`).waitForRouteChange()
+      cy.wait(1000)
 
-    cy.wait(1000)
-  })
+      cy.exec(
+        `npm run update -- --file src/images/image.png --copy "src/images/original.png"`
+      )
+      cy.wait(2000)
+    })
 
-  it(`displays placeholder content on launch`, () => {
-    cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
-  })
+    const runImageSnapshot = (snapshotName) => {
+      cy.get(`.gatsby-resp-image-wrapper`)
+      .find("img")
+      .each(($el, i) => {
+        cy.wrap($el).matchImageSnapshot(`${snapshotName}-${i}`)
+      })
+    }
 
-  it(`hot reloads with new content`, () => {
-    cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
+    it(`displays original content on launch`, () => {
+      runImageSnapshot(`non-js-file--image-original`)
+    })
 
-    cy.exec(
-      `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${TEMPLATE}:${message}"`
-    )
+    it(`hot reloads with new content`, () => {
+      cy.exec(
+        `npm run update -- --file src/images/image.png --copy "src/images/new.png"`
+      )
 
-    // wati for socket.io to update
-    cy.wait(5000)
+      // wait for socket.io to update
+      cy.wait(5000)
 
-    cy.getTestElement(TEST_ID).invoke(`text`).should(`eq`, message)
+      runImageSnapshot(`non-js-file--image-new`)
+    })
   })
 })

e2e-tests/development-runtime/cypress/integration/unified-routing/collection-routing.js

@@ -13,8 +13,9 @@ describe(`collection-routing`, () => {
   })
 
   it(`can navigate to a collection route and see its content rendered`, () => {
+    // this test depends on the alphabetical sorting of markdown files
     cy.findByTestId(`collection-routing-blog-0`)
-    cy.should(`have.attr`, `data-testslug`, `/2018-12-14-hello-world/`)
+      .should(`have.attr`, `data-testslug`, `/2018-12-14-hello-world/`)
       .click()
     cy.waitForRouteChange()
       .assertRoute(`/collection-routing/2018-12-14-hello-world/`)
@@ -25,8 +26,9 @@ describe(`collection-routing`, () => {
   })
 
   it(`can navigate to a collection route that uses unions and see its content rendered`, () => {
+    // this test depends on the alphabetical sorting of image files
     cy.findByTestId(`collection-routing-image-0`)
-    cy.should(`have.attr`, `data-testimagename`, `gatsby-astronaut`)
+      .should(`have.attr`, `data-testimagename`, `gatsby-astronaut`)
       .click()
     cy.waitForRouteChange()
       .assertRoute(`/collection-routing/gatsby-astronaut/`)

e2e-tests/development-runtime/cypress/plugins/index.js

@@ -12,6 +12,7 @@
 // the project's config changing)
 const blockResources = require(`./block-resources`)
 const gatsbyConfig = require(`./gatsby-config`)
+const { addMatchImageSnapshotPlugin } = require("cypress-image-snapshot/plugin")
 
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
@@ -20,4 +21,13 @@ module.exports = (on, config) => {
     ...blockResources,
     ...gatsbyConfig,
   })
+  
+  addMatchImageSnapshotPlugin(on, config)
+  on("before:browser:launch", (browser = {}, launchOptions) => {
+    if (browser.family === "chromium" || browser.family === "chrome") {
+      // Make retina screens run at 1x density so they match the versions in CI
+      launchOptions.args.push("--force-device-scale-factor=1")
+    }
+    return launchOptions
+  })
 }

e2e-tests/development-runtime/cypress/snapshots/hot-reloading/non-js-file.js/non-js-file--image-new-0.snap.png

@@ -1,4 +1,6 @@
 import "@testing-library/cypress/add-commands"
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command"
+import "gatsby-cypress"
 
 Cypress.Commands.add(`lifecycleCallCount`, action =>
   cy
@@ -113,3 +115,12 @@ Cypress.Commands.add(`getFastRefreshOverlay`, () => (
 Cypress.Commands.add(`assertNoFastRefreshOverlay`, () => (
   cy.get('gatsby-fast-refresh').should('not.exist')
 ))
+
+addMatchImageSnapshotCommand({
+  customDiffDir: `/__diff_output__`,
+  customDiffConfig: {
+    threshold: 0.1,
+  },
+  failureThreshold: 0.08,
+  failureThresholdType: `percent`,
+})

e2e-tests/development-runtime/cypress/snapshots/hot-reloading/non-js-file.js/non-js-file--image-original-0.snap.png

@@ -33,7 +33,10 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [`gatsby-remark-subcache`],
+        plugins: [
+          `gatsby-remark-subcache`,
+          `gatsby-remark-images`
+        ],
       },
     },
     `gatsby-plugin-sharp`,

e2e-tests/development-runtime/cypress/support/commands.js

@@ -5,7 +5,7 @@
   "author": "Dustin Schau <[email protected]>",
   "dependencies": {
     "babel-plugin-search-and-replace": "^1.1.0",
-    "gatsby": "^3.0.0-next.6",
+    "gatsby": "^4.6.0-next.4",
     "gatsby-image": "^3.0.0-next.0",
     "gatsby-plugin-image": "^1.0.0-next.5",
     "gatsby-plugin-less": "^5.1.0-next.2",
@@ -15,10 +15,11 @@
     "gatsby-plugin-sass": "^4.1.0-next.2",
     "gatsby-plugin-sharp": "^3.0.0-next.5",
     "gatsby-plugin-stylus": "^3.1.0-next.2",
+    "gatsby-remark-images": "^6.6.0-next.2",
     "gatsby-seo": "^0.1.0",
     "gatsby-source-filesystem": "^3.0.0-next.2",
     "gatsby-transformer-json": "^3.0.0-next.0",
-    "gatsby-transformer-remark": "^3.0.0-next.0",
+    "gatsby-transformer-remark": "^5.6.0-next.2",
     "gatsby-transformer-sharp": "^3.0.0-next.1",
     "node-fetch": "^2.6.1",
     "prop-types": "^15.6.2",
@@ -56,6 +57,7 @@
     "@testing-library/cypress": "^7.0.0",
     "cross-env": "^5.2.0",
     "cypress": "6.1.0",
+    "cypress-image-snapshot": "^4.0.1",
     "fs-extra": "^7.0.1",
     "gatsby-core-utils": "^2.12.0",
     "gatsby-cypress": "^0.1.7",

e2e-tests/development-runtime/gatsby-config.js

@@ -13,6 +13,10 @@ const args = yargs
     default: [],
     type: `array`,
   })
+  .option(`copy`, {
+    default: undefined,
+    type: `string`,
+  })
   .option(`exact`, {
     default: false,
     type: `boolean`,
@@ -50,7 +54,7 @@ const args = yargs
 async function update() {
   const history = await getHistory()
 
-  const { file: fileArg, replacements, restore } = args
+  const { file: fileArg, replacements, restore, copy } = args
   const filePath = path.resolve(fileArg)
   if (restore) {
     const original = history.get(filePath)
@@ -85,6 +89,9 @@ async function update() {
     if (exists) {
       await fs.remove(filePath)
     }
+  } else if(args.copy) {
+    const copyFileContent = await fs.readFile(args.copy)
+    await fs.writeFile(filePath, copyFileContent)
   } else {
     const contents = replacements.reduce((replaced, pair) => {
       const [key, value] = pair.split(`:`)