Fix recipe test problems (#23347)

* Strip ansi colors on diff during tests * Use tmpdir to run fixtures * Fix snapshots having wrong fixture formatting
gatsbyjs · Apr 23, 2020 · 612120f · 612120f
1 parent aae0713
commit 612120f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 29 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -205,16 +205,12 @@ jobs:
 
   unit_tests_node10:
     executor: node
-    environment:
-      FORCE_COLOR: 0
     <<: *test_template
 
   unit_tests_node12:
     executor:
       name: node
       image: "12"
-    environment:
-      FORCE_COLOR: 0
     <<: *test_template
 
   unit_tests_www:

diff --git a/.jestSetup.js b/.jestSetup.js
@@ -0,0 +1 @@
+process.env.GATSBY_RECIPES_NO_COLOR = "true"
diff --git a/jest.config.js b/jest.config.js
@@ -56,4 +56,5 @@ module.exports = {
     : [`default`].concat(useCoverage ? `jest-junit` : []),
   testEnvironment: `jest-environment-jsdom-fourteen`,
   moduleFileExtensions: [`js`, `jsx`, `ts`, `tsx`, `json`],
+  setupFiles: [`<rootDir>/.jestSetup.js`],
 }
diff --git a/packages/gatsby-recipes/package.json b/packages/gatsby-recipes/package.json
@@ -68,7 +68,9 @@
     "babel-preset-gatsby-package": "^0.3.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "strip-ansi": "^6.0.0",
+    "tmp-promise": "^2.0.2"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes#readme",
   "keywords": [

diff --git a/packages/gatsby-recipes/src/providers/gatsby/__snapshots__/plugin.test.js.snap b/packages/gatsby-recipes/src/providers/gatsby/__snapshots__/plugin.test.js.snap
@@ -18,7 +18,7 @@ Object {
 module.exports = {
   /* Your site config here */
   plugins: [],
-}
+};
 ",
   "describe": "Install gatsby-plugin-foo in gatsby-config.js",
   "diff": "- Original  - 1
@@ -30,7 +30,7 @@ module.exports = {
     /* Your site config here */
 -   plugins: [],
 +   plugins: [\\"gatsby-plugin-foo\\"],
-  }
+  };
 ",
   "id": "gatsby-plugin-foo",
   "name": "gatsby-plugin-foo",
@@ -42,7 +42,7 @@ module.exports = {
 module.exports = {
   /* Your site config here */
   plugins: [\\"gatsby-plugin-foo\\"],
-}
+};
 ",
 }
 `;
@@ -67,7 +67,7 @@ Object {
 module.exports = {
   /* Your site config here */
   plugins: [\\"gatsby-plugin-foo\\"],
-}
+};
 ",
   "describe": "Install gatsby-plugin-foo in gatsby-config.js",
   "diff": "Compared values have no visual difference.",
@@ -81,7 +81,7 @@ module.exports = {
 module.exports = {
   /* Your site config here */
   plugins: [\\"gatsby-plugin-foo\\"],
-}
+};
 ",
 }
 `;
@@ -96,7 +96,7 @@ Object {
 
 exports[`gatsby-plugin resource e2e plugin resource test: GatsbyPlugin create plan 1`] = `
 Object {
-  "currentState": "const redish = \`#c5484d\`
+  "currentState": "const redish = \`#c5484d\`;
 module.exports = {
   siteMetadata: {
     title: \`Bricolage\`,
@@ -163,7 +163,7 @@ module.exports = {
     \`gatsby-plugin-offline\`, // \`gatsby-plugin-preact\`,
     \`gatsby-plugin-react-helmet\`,
   ],
-}
+};
 ",
   "describe": "Install gatsby-plugin-foo in gatsby-config.js",
   "diff": "- Original  - 0
@@ -175,11 +175,11 @@ module.exports = {
       \`gatsby-plugin-react-helmet\`,
 +     \\"gatsby-plugin-foo\\",
     ],
-  }
+  };
 ",
   "id": "gatsby-plugin-foo",
   "name": "gatsby-plugin-foo",
-  "newState": "const redish = \`#c5484d\`
+  "newState": "const redish = \`#c5484d\`;
 module.exports = {
   siteMetadata: {
     title: \`Bricolage\`,
@@ -247,7 +247,7 @@ module.exports = {
     \`gatsby-plugin-react-helmet\`,
     \\"gatsby-plugin-foo\\",
   ],
-}
+};
 ",
 }
 `;
@@ -264,7 +264,7 @@ Object {
 
 exports[`gatsby-plugin resource e2e plugin resource test: GatsbyPlugin update plan 1`] = `
 Object {
-  "currentState": "const redish = \`#c5484d\`
+  "currentState": "const redish = \`#c5484d\`;
 module.exports = {
   siteMetadata: {
     title: \`Bricolage\`,
@@ -332,13 +332,13 @@ module.exports = {
     \`gatsby-plugin-react-helmet\`,
     \\"gatsby-plugin-foo\\",
   ],
-}
+};
 ",
   "describe": "Install gatsby-plugin-foo in gatsby-config.js",
   "diff": "Compared values have no visual difference.",
   "id": "gatsby-plugin-foo",
   "name": "gatsby-plugin-foo",
-  "newState": "const redish = \`#c5484d\`
+  "newState": "const redish = \`#c5484d\`;
 module.exports = {
   siteMetadata: {
     title: \`Bricolage\`,
@@ -406,7 +406,7 @@ module.exports = {
     \`gatsby-plugin-react-helmet\`,
     \\"gatsby-plugin-foo\\",
   ],
-}
+};
 ",
 }
 `;
diff --git a/packages/gatsby-recipes/src/providers/gatsby/plugin.test.js b/packages/gatsby-recipes/src/providers/gatsby/plugin.test.js
@@ -1,24 +1,49 @@
 const fs = require(`fs-extra`)
 const path = require(`path`)
+const tmp = require(`tmp-promise`)
 
 const plugin = require(`./plugin`)
 const { addPluginToConfig, getPluginsFromConfig } = require(`./plugin`)
 const resourceTestHelper = require(`../resource-test-helper`)
 
-const root = path.join(__dirname, `./fixtures/gatsby-starter-blog`)
-const helloWorldRoot = path.join(
+const STARTER_BLOG_FIXTURE = path.join(
+  __dirname,
+  `./fixtures/gatsby-starter-blog`
+)
+const HELLO_WORLD_FIXTURE = path.join(
   __dirname,
   `./fixtures/gatsby-starter-hello-world`
 )
 const name = `gatsby-plugin-foo`
-const configPath = path.join(root, `gatsby-config.js`)
 
 describe(`gatsby-plugin resource`, () => {
+  let tmpDir
+  let starterBlogRoot
+  let helloWorldRoot
+  let configPath
+  beforeAll(async () => {
+    tmpDir = await tmp.dir({
+      unsafeCleanup: true,
+    })
+    starterBlogRoot = path.join(tmpDir.path, `gatsby-starter-blog`)
+    helloWorldRoot = path.join(tmpDir.path, `gatsby-starter-hello-world`)
+    configPath = path.join(helloWorldRoot, `gatsby-config.js`)
+    await fs.ensureDir(starterBlogRoot)
+    await fs.copy(STARTER_BLOG_FIXTURE, starterBlogRoot)
+    await fs.ensureDir(helloWorldRoot)
+    await fs.copy(HELLO_WORLD_FIXTURE, helloWorldRoot)
+  })
+  afterAll(async () => {
+    if (tmpDir) {
+      await tmpDir.cleanup()
+    }
+  })
+
   test(`e2e plugin resource test`, async () => {
     await resourceTestHelper({
       resourceModule: plugin,
       resourceName: `GatsbyPlugin`,
-      context: { root },
+      context: { root: starterBlogRoot },
       initialObject: { id: name, name },
       partialUpdate: { id: name },
     })

diff --git a/packages/gatsby-recipes/src/providers/utils/get-diff.js b/packages/gatsby-recipes/src/providers/utils/get-diff.js
@@ -1,5 +1,6 @@
 const diff = require(`jest-diff`).default
 const chalk = require(`chalk`)
+const stripAnsi = require(`strip-ansi`)
 
 module.exports = async (oldVal, newVal) => {
   const options = {
@@ -12,7 +13,11 @@ module.exports = async (oldVal, newVal) => {
     expand: false,
   }
 
-  const diffText = diff(oldVal, newVal, options)
+  let diffText = diff(oldVal, newVal, options)
+
+  if (process.env.GATSBY_RECIPES_NO_COLOR) {
+    diffText = stripAnsi(diffText)
+  }
 
   return diffText
 }
diff --git a/yarn.lock b/yarn.lock
@@ -22685,11 +22685,6 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
-sudo-prompt@^8.2.0:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
-  integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
-
 supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -23204,6 +23199,20 @@ title-case@^2.1.0:
     no-case "^2.2.0"
     upper-case "^1.0.3"
 
+tmp-promise@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-2.0.2.tgz#ee605edb10f100954be5dd8b9dbe1bfd56194202"
+  integrity sha512-zl71nFWjPKW2KXs+73gEk8RmqvtAeXPxhWDkTUoa3MSMkjq3I+9OeknjF178MQoMYsdqL730hfzvNfEkePxq9Q==
+  dependencies:
+    tmp "0.1.0"
+
+tmp@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
+  integrity sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==
+  dependencies:
+    rimraf "^2.6.3"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"