Add button shim and setup Puppeteer

app/__tests__/app.test.js

@@ -3,7 +3,6 @@
 const request = require('request')
 const cheerio = require('cheerio')
 
-const app = require('../app.js')
 const lib = require('../../lib/file-helper')
 
 const requestParamsHomepage = {
@@ -63,16 +62,6 @@ const requestParamsExampleTypography = {
 }
 
 describe('frontend app', () => {
-  let server
-
-  beforeAll(done => {
-    server = app.listen(3000, done)
-  })
-
-  afterAll(done => {
-    server.close(done)
-  })
-
   describe('homepage', () => {
     it('should resolve with a http status code of 200', done => {
       request.get(requestParamsHomepage, (err, res) => {

lib/puppeteer/environment.js

@@ -0,0 +1,33 @@
+const chalk = require('chalk')
+const NodeEnvironment = require('jest-environment-node')
+const puppeteer = require('puppeteer')
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
+
+const DIR = path.join(os.tmpdir(), 'jest-puppeteer-global-setup')
+
+class PuppeteerEnvironment extends NodeEnvironment {
+  async setup () {
+    console.log(chalk.yellow('Setup Test Environment.'))
+    await super.setup()
+    const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf8')
+    if (!wsEndpoint) {
+      throw new Error('wsEndpoint not found')
+    }
+    this.global.__BROWSER__ = await puppeteer.connect({
+      browserWSEndpoint: wsEndpoint
+    })
+  }
+
+  async teardown () {
+    console.log(chalk.yellow('Teardown Test Environment.'))
+    await super.teardown()
+  }
+
+  runScript (script) {
+    return super.runScript(script)
+  }
+}
+
+module.exports = PuppeteerEnvironment

lib/puppeteer/setup.js

@@ -0,0 +1,22 @@
+const chalk = require('chalk')
+const puppeteer = require('puppeteer')
+const fs = require('fs')
+const mkdirp = require('mkdirp')
+const os = require('os')
+const path = require('path')
+const app = require('../../app/app.js')
+
+const DIR = path.join(os.tmpdir(), 'jest-puppeteer-global-setup')
+
+module.exports = async function () {
+  console.log(chalk.green('\nStart server'))
+  global.__SERVER__ = app.listen(3000)
+  console.log(chalk.green('Setup Puppeteer'))//
+  // we use --no-sandbox --disable-setuid-sandbox as a workaround for the
+  // 'No usable sandbox! Update your kernel' error
+  // see more https://github.com/Googlechrome/puppeteer/issues/290
+  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
+  global.__BROWSER__ = browser
+  mkdirp.sync(DIR)
+  fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint())
+}

lib/puppeteer/teardown.js

@@ -0,0 +1,14 @@
+const chalk = require('chalk')
+const rimraf = require('rimraf')
+const os = require('os')
+const path = require('path')
+
+const DIR = path.join(os.tmpdir(), 'jest-puppeteer-global-setup')
+
+module.exports = async function () {
+  console.log(chalk.green('Teardown Puppeteer'))
+  await global.__BROWSER__.close()
+  console.log(chalk.green('Close server'))
+  await global.__SERVER__.close()
+  rimraf.sync(DIR)
+}

package.json

@@ -22,8 +22,8 @@
     "build:dist": "node bin/check-nvmrc.js && gulp build:dist --destination 'dist' && npm run test:build:dist",
     "test": "standard && gulp test && npm run test:app && npm run test:components && npm run test:generate:readme",
     "test:app": "jest app/__tests__/app.test.js --forceExit # express server fails to end process",
-    "test:components": "jest src/ && jest tasks/gulp/__tests__/check-individual-components-compile.test.js",
-    "test:generate:readme": "jest tasks/gulp/__tests__/check-generate-readme.test.js",
+    "test:components": "gulp copy-assets && jest src/ --forceExit && jest tasks/gulp/__tests__/check-individual-components-compile.test.js --forceExit",
+    "test:generate:readme": "jest tasks/gulp/__tests__/check-generate-readme.test.js --forceExit",
     "test:build:packages": "jest tasks/gulp/__tests__/after-build-packages.test.js",
     "test:build:dist": "jest tasks/gulp/__tests__/after-build-dist.test.js"
   },
@@ -62,6 +62,7 @@
     "oldie": "^1.3.0",
     "postcss-normalize": "^3.0.0",
     "postcss-pseudo-classes": "^0.2.0",
+    "puppeteer": "^1.1.1",
     "request": "^2.83.0",
     "run-sequence": "^2.2.0",
     "standard": "^10.0.2",
@@ -86,6 +87,8 @@
     "setupTestFrameworkScriptFile": "./config/jest-setup.js",
     "snapshotSerializers": [
       "jest-serializer-html"
-    ]
+    ],
+    "globalSetup": "./lib/puppeteer/setup.js",
+    "globalTeardown": "./lib/puppeteer/teardown.js"
   }
 }