[test] Move backstop to test folder and run backstop-test-studio on test

gulpfile.js

@@ -18,6 +18,8 @@ const chalk = require('chalk')
 const globby = require('globby')
 const mergeStream = require('merge-stream')
 const backstop = require('backstopjs')
+const waitPort = require('wait-port')
+const kill = require('kill-port')
 
 const isWindows = /^win/.test(process.platform)
 
@@ -242,33 +244,62 @@ gulp.task('storybook', ['watch-js', 'watch-ts', 'watch-assets'], () => {
 })
 
 gulp.task('backstop', cb => {
-  const DRONE = !!process.env.DRONE
-  backstop('test', {
-    docker: !DRONE,
-    config: './backstop_data/backstop.js'
-  })
-    .then(() => {
-      gutil.log(gutil.colors.green('Backstop test success'))
+  gulp.start('backstop-test-studio')
+
+  const params = {
+    host: 'localhost',
+    port: 5000,
+    timeout: 100 * 60 * 10
+  }
+
+  waitPort(params)
+    .then(open => {
+      if (open) {
+        backstop('test', {
+          docker: true,
+          config: './test/backstop/backstop.js'
+        })
+          .then(() => {
+            kill(params.port).then(() => {
+              gutil.log(gutil.colors.green('Backstop test success'))
+              process.exit(0)
+            })
+          })
+          .catch(() => {
+            kill(params.port)
+            throw new gutil.PluginError({
+              plugin: 'backstop',
+              message: 'Tests failed'
+            })
+          })
+      } else {
+        kill(params.port)
+        throw new gutil.PluginError({
+          plugin: 'backstop',
+          message: 'The backstop-studio did not start'
+        })
+      }
     })
-    .catch(() => {
+    .catch(err => {
+      kill(params.port)
       throw new gutil.PluginError({
         plugin: 'backstop',
-        message: 'Tests failed'
+        message: `An unknown error occured while waiting for the port: ${err}`
       })
     })
 })
 
 gulp.task('backstop:approve', cb => {
   backstop('approve', {
     docker: true,
-    config: './backstop_data/backstop.js'
+    config: './test/backstop/backstop.js'
   })
 })
 
 gulp.task('backstop:reference', cb => {
   backstop('reference', {
     docker: true,
-    config: './backstop_data/backstop.js'
+    config: './test/backstop/backstop.js'
   })
     .then(() => {
       gutil.log(gutil.colors.green('References created'))

package.json

@@ -85,6 +85,7 @@
     "gulp-watch": "^5.0.1",
     "hard-rejection": "^1.0.0",
     "husky": "^0.14.3",
+    "kill-port": "^1.3.2",
     "lerna": "^3.4.0",
     "merge-stream": "^1.0.1",
     "minimist": "^1.2.0",
@@ -98,6 +99,7 @@
     "stylelint-config-standard": "^18.0.0",
     "through2": "^2.0.3",
     "typescript": "^3.2.2",
+    "wait-port": "^0.2.2",
     "yarn": "^1.3.2"
   }
 }

backstop_data/backstop.js → test/backstop/backstop.js

@@ -1,7 +1,7 @@
-/* eslint-disable import/no-commonjs, camelcase */
-const DRONE = process.env.DRONE
+/* eslint-disable import/no-commonjs, camelcase, no-process-env */
+const URL = 'http://host.docker.internal:5000'
 
-const URL = DRONE ? 'https://backstop.sanity.studio' : 'http://host.docker.internal:5000'
+const loggedInUserCookiePath = './test/backstop/engineScripts/cookies.json'
 
 module.exports = {
   id: 'content_studio',
@@ -42,7 +42,7 @@ module.exports = {
     },
     {
       label: 'Front',
-      cookiePath: './backstop_data/engineScripts/cookies.json',
+      cookiePath: loggedInUserCookiePath,
       url: URL,
       delay: 1000,
       readySelector: '[class^="PaneItem_item"]',
@@ -53,7 +53,7 @@ module.exports = {
     },
     {
       label: 'Book pane',
-      cookiePath: './backstop_data/engineScripts/cookies.json',
+      cookiePath: loggedInUserCookiePath,
       url: `${URL}/desk/book`,
       delay: 1000,
       readySelector: '[class^="PaneItem_item"]',
@@ -64,7 +64,7 @@ module.exports = {
     },
     {
       label: 'Book document',
-      cookiePath: './backstop_data/engineScripts/cookies.json',
+      cookiePath: loggedInUserCookiePath,
       url: `${URL}/desk/book;c6b1208f-cd89-4a55-88f1-0b979e005f0a`,
       delay: 1000,
       readySelector: '[class^="Editor_root"]',
@@ -75,13 +75,13 @@ module.exports = {
     }
   ],
   paths: {
-    bitmaps_reference: 'backstop_data/bitmapsReference',
-    bitmaps_test: 'backstop_data/bitmapsTest',
-    engine_scripts: 'backstop_data/engineScripts',
-    html_report: 'backstop_data/htmlReport',
-    ci_report: 'backstop_data/ciReport'
+    bitmaps_reference: 'test/backstop/bitmapsReference',
+    bitmaps_test: 'test/backstop/bitmapsTest',
+    engine_scripts: 'test/backstop/engineScripts',
+    html_report: 'test/backstop/htmlReport',
+    ci_report: 'test/backstop/ciReport'
   },
-  report: ['browser', 'CI'],
+  report: process.env.CI ? ['browser', 'CI'] : ['browser'],
   engine: 'puppeteer',
   engineOptions: {
     args: ['--no-sandbox']