From 63d754d13036cb19375a96514d99f369b98e838f Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Tue, 11 May 2021 16:48:40 +0200
Subject: [PATCH] add more e2e test - editing prop in markdown, editing
 component imported by mdx

---
 e2e-tests/mdx/cypress/integration/hmr.js      | 46 ++++++++++++++++++-
 .../mdx/src/components/hmr-component-edit.js  |  7 +++
 e2e-tests/mdx/src/components/hmr-prop-edit.js |  7 +++
 e2e-tests/mdx/src/pages/hmr.mdx               |  7 +++
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/mdx/src/components/hmr-component-edit.js
 create mode 100644 e2e-tests/mdx/src/components/hmr-prop-edit.js

diff --git a/e2e-tests/mdx/cypress/integration/hmr.js b/e2e-tests/mdx/cypress/integration/hmr.js
index 722424a2707ae..353184fc9ce44 100644
--- a/e2e-tests/mdx/cypress/integration/hmr.js
+++ b/e2e-tests/mdx/cypress/integration/hmr.js
@@ -7,7 +7,7 @@ if (Cypress.env("GATSBY_COMMAND") === `develop`) {
     cy.exec(`npm run reset`)
   })
 
-  it(`Can hot-reload`, () => {
+  it(`Can hot-reload markdown content`, () => {
     cy.visit(`/hmr`, {
       onBeforeLoad: win => {
         cy.spy(win.console, "log").as(`hmrConsoleLog`)
@@ -24,4 +24,48 @@ if (Cypress.env("GATSBY_COMMAND") === `develop`) {
 
     cy.get(`h2`).invoke(`text`).should(`eq`, `Ipsum`)
   })
+
+  it(`Can hot-reload react content (i.e. change prop in mdx content)`, () => {
+    cy.visit(`/hmr`, {
+      onBeforeLoad: win => {
+        cy.spy(win.console, "log").as(`hmrConsoleLog`)
+      },
+    }).waitForRouteChange()
+    cy.get(`[data-testid="test-prop-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `prop-before`)
+
+    cy.exec(
+      `npm run update -- --file src/pages/hmr.mdx --exact --replacements "prop-before:prop-after"`
+    )
+
+    cy.get(`@hmrConsoleLog`).should(`be.calledWithMatch`, `App is up to date`)
+    cy.wait(1000)
+
+    cy.get(`[data-testid="test-prop-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `prop-after`)
+  })
+
+  it(`Can hot-reload imported js components`, () => {
+    cy.visit(`/hmr`, {
+      onBeforeLoad: win => {
+        cy.spy(win.console, "log").as(`hmrConsoleLog`)
+      },
+    }).waitForRouteChange()
+    cy.get(`[data-testid="test-imported-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `component-before`)
+
+    cy.exec(
+      `npm run update -- --file src/components/hmr-component-edit.js --exact --replacements "component-before:component-after"`
+    )
+
+    cy.get(`@hmrConsoleLog`).should(`be.calledWithMatch`, `App is up to date`)
+    cy.wait(1000)
+
+    cy.get(`[data-testid="test-imported-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `component-after`)
+  })
 }
diff --git a/e2e-tests/mdx/src/components/hmr-component-edit.js b/e2e-tests/mdx/src/components/hmr-component-edit.js
new file mode 100644
index 0000000000000..c7a70d646a637
--- /dev/null
+++ b/e2e-tests/mdx/src/components/hmr-component-edit.js
@@ -0,0 +1,7 @@
+import React from "react"
+
+const HMRImportEditComponent = () => (
+  <div data-testid="test-imported-edit">component-before</div>
+)
+
+export default HMRImportEditComponent
diff --git a/e2e-tests/mdx/src/components/hmr-prop-edit.js b/e2e-tests/mdx/src/components/hmr-prop-edit.js
new file mode 100644
index 0000000000000..b67dd3de30a35
--- /dev/null
+++ b/e2e-tests/mdx/src/components/hmr-prop-edit.js
@@ -0,0 +1,7 @@
+import React from "react"
+
+const HMRPropEditComponent = ({ test }) => (
+  <div data-testid="test-prop-edit">{test}</div>
+)
+
+export default HMRPropEditComponent
diff --git a/e2e-tests/mdx/src/pages/hmr.mdx b/e2e-tests/mdx/src/pages/hmr.mdx
index 2c249bfdc6e76..294f97e970378 100644
--- a/e2e-tests/mdx/src/pages/hmr.mdx
+++ b/e2e-tests/mdx/src/pages/hmr.mdx
@@ -1 +1,8 @@
+import HMRImportEditComponent from "../components/hmr-component-edit"
+import HMRPropEditComponent from "../components/hmr-prop-edit"
+
 ## Lorem
+
+<HMRImportEditComponent />
+
+<HMRPropEditComponent test="prop-before" />