From 6f6c981f81fae95eedf774ceb47a7895c3d2521c Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Fri, 2 Apr 2021 18:26:19 +0200
Subject: [PATCH] test(e2e): add adding  .babelrc case

---
 .../integration/functionality/babelrc.js      | 52 +++++++++++++++++++
 .../src/pages/babelrc/add/index.js            | 13 +++++
 2 files changed, 65 insertions(+)
 create mode 100644 e2e-tests/development-runtime/src/pages/babelrc/add/index.js

diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js b/e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js
index 9e2284ae36cab..e6c7507bb3ad5 100644
--- a/e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js
+++ b/e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js
@@ -35,5 +35,57 @@ describe(`babelrc`, () => {
         .invoke(`text`)
         .should(`eq`, `babel-rc-edited`)
     })
+
+    it(`adding .babelrc`, () => {
+      cy.visit(`/babelrc/add/`).waitForRouteChange()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-test`)
+
+      const FILE_CONTENT = `
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-added",
+            "searchTemplateStrings": true
+          }
+          
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}
+      `
+
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/add/.babelrc --file-content '${JSON.stringify(
+          FILE_CONTENT
+        )}'`
+      )
+
+      // babel-loader doesn't actually hot reloads itself when new .babelrc file is added
+      // this is because it registers dependency only if file already exists
+      // ( https://github.com/babel/babel-loader/blob/1669ac07ee1eed28a8e6fcacbf1c07ceb06fe053/src/index.js#L214-L216 )
+      // so to test hot-reloading here we actually have to invalidate js file, which would recompile it and discover
+      // new babelrc file
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/add/index.js --replacements "foo-bar:foo-bar" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-added`)
+    })
   })
 })
diff --git a/e2e-tests/development-runtime/src/pages/babelrc/add/index.js b/e2e-tests/development-runtime/src/pages/babelrc/add/index.js
new file mode 100644
index 0000000000000..6caaa52a3a806
--- /dev/null
+++ b/e2e-tests/development-runtime/src/pages/babelrc/add/index.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcAdd() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-test</code> first and
+        after .babelrc addition it should contain <code>babel-rc-added</code>
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}