Electron

.pr-bumper.json

@@ -0,0 +1,5 @@
+{
+  "coverage": {
+    "enabled": false
+  }
+}

.travis.yml

@@ -1,12 +1,13 @@
 language: node_js
 sudo: true
+dist: trusty
 node_js:
 - '5.3'
 branches:
   except:
   - /^v[0-9\.]+/
 before_install:
-- npm install -g coveralls pr-bumper@^1.0.0 slimerjs phantomjs
+- npm install -g coveralls pr-bumper@^1.0.0 slimerjs phantomjs electron
 - pr-bumper check
 - slimerjs -v
 before_script:
@@ -54,4 +55,4 @@ after_deploy:
 - .travis/publish-gh-pages.sh
 notifications:
   slack:
-    secure: Jj9cqqMQBfw4uCTPvjBOpeE956bz8oRlXJk2um/rMrfN5CC/n+gYgf8jwa3f1e7JuxaEiWf9+zmKJe73nhte4tA08W3+PmN+OWnojRR0bxxJG4Momp+23u0Cjlg2dRO7v+anEgkIcwPYicE0gyMIzW8PQzbZRNphcVstWHcGse7BI0hQ80YKxrCiuiTcQohnKvczPfsSCRlLdY+3JJlMzLnvksEmZU4JdcoegK57DOoGkXVQLPRuYTsIvuRtF8LI0wD6xi1be7LDrK6PSpP9x+Ga1Wh5u++27apjsLTxjnJ57DjOGDpQ8iFJUVMr/pc6iy1QHHdFo356YQZrLDP5EVLBE47DQuTXGH0CUtXy2oz5hoX44Tmw52BFlOoedjDmuuOy24CzAONqceTyJEruTlGn2HTQVVoRX7ScscV9Bs9gfYqSfw0KvjTN0mb2a6vUCEBA2ldo8yoneJl4upms+lffZQsNCHIdA8btOf4ucCevJXJfxiOZpq9nHgwu7GdbqdT8Toh4cqiMzP6XgE4TpUJHUpJo4KmgfSDfc8JcQ8egPY7e7UvFZqWMCNGs9EFQt40iGD+KrzidhZRq6MsA1qZWC96n6JX4/kvPpr/1aiS7OkFkmC4E9aBExnVwDYAIoTwv2+Rh7KY0eZGcTcrzNTPdHdaCVUDFnWdQ9NrqjBI=
+    secure: Jj9cqqMQBfw4uCTPvjBOpeE956bz8oRlXJk2um/rMrfN5CC/n+gYgf8jwa3f1e7JuxaEiWf9+zmKJe73nhte4tA08W3+PmN+OWnojRR0bxxJG4Momp+23u0Cjlg2dRO7v+anEgkIcwPYicE0gyMIzW8PQzbZRNphcVstWHcGse7BI0hQ80YKxrCiuiTcQohnKvczPfsSCRlLdY+3JJlMzLnvksEmZU4JdcoegK57DOoGkXVQLPRuYTsIvuRtF8LI0wD6xi1be7LDrK6PSpP9x+Ga1Wh5u++27apjsLTxjnJ57DjOGDpQ8iFJUVMr/pc6iy1QHHdFo356YQZrLDP5EVLBE47DQuTXGH0CUtXy2oz5hoX44Tmw52BFlOoedjDmuuOy24CzAONqceTyJEruTlGn2HTQVVoRX7ScscV9Bs9gfYqSfw0KvjTN0mb2a6vUCEBA2ldo8yoneJl4upms+lffZQsNCHIdA8btOf4ucCevJXJfxiOZpq9nHgwu7GdbqdT8Toh4cqiMzP6XgE4TpUJHUpJo4KmgfSDfc8JcQ8egPY7e7UvFZqWMCNGs9EFQt40iGD+KrzidhZRq6MsA1qZWC96n6JX4/kvPpr/1aiS7OkFkmC4E9aBExnVwDYAIoTwv2+Rh7KY0eZGcTcrzNTPdHdaCVUDFnWdQ9NrqjBI=

blueprints/ember-cli-visual-acceptance/files/testem.json

@@ -20,6 +20,10 @@
     "NightmareJsVisualAcceptance": {
       "command": "node vendor/nightmarejs-launcher.js <url>",
       "protocol": "browser"
+    },
+    "Electron": {
+      "command": "electron vendor/electron-launcher.js <url>",
+      "protocol": "browser"
     }
   }
 }

blueprints/ember-cli-visual-acceptance/files/vendor/electron-launcher.js

@@ -0,0 +1,108 @@
+/* eslint-disable max-len */
+const electron = require('electron')
+const app = electron.app // Module to control application life.
+const BrowserWindow = electron.BrowserWindow // Module to create native browser window.
+const ipcMain = electron.ipcMain
+const timeoutFromResize = 1500
+var url = process.argv[2]
+
+// var url = process.argv[2]
+// Report crashes to our server.
+// electron.crashReporter.start();
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+var mainWindow = null
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  // if (process.platform !== 'darwin') {
+  app.quit()
+  // }
+})
+
+function sendImage (win, image) {
+  win.webContents.send('return-image-event', {
+    image: image
+  })
+}
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+app.on('ready', function () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 800,
+    offscreen: true,
+    show: false,
+    'enable-larger-than-screen': true,
+    useContentSize: true
+  })
+  console.log('Setting ipcMain')
+  mainWindow.webContents.executeJavaScript(`
+  const ipcRenderer = window.nodeRequire('electron').ipcRenderer
+  Testem.afterTests(
+    // Asynchronously
+    function (config, data, callback) {
+      callback(null)
+      // Set time to wait for callback to finish its work. Then close launcher (Issue Testem: fails to close custom launcher on Linux) https://github.com/testem/testem/issues/915
+      setTimeout(function (params) {
+        ipcRenderer.send('exit-event', {
+          exit: true
+        })
+      }, 2000)
+      // Set time to wait for callback to finish its work. Then close launcher (Issue Testem: fails to close custom launcher on Linux) https://github.com/testem/testem/issues/915
+    }
+  )
+  `)
+  ipcMain.on('capture-event', function (event, data) {
+    mainWindow.webContents.executeJavaScript(
+      "[document.getElementById('ember-testing-container').scrollWidth, document.getElementById('ember-testing-container').scrollHeight]",
+      false, result => {
+        mainWindow.setContentSize(result[0] + 200, result[1] + 200)
+
+        setTimeout(() => {
+          mainWindow.webContents.executeJavaScript(`[window.scrollTo(0,0), JSON.stringify(document.getElementById('${data.targetId}').getBoundingClientRect(), ["top", "left", "width", 
+          "height"])]`, false, res => {
+            let rect = JSON.parse(res[1])
+            var clip = {
+              x: rect.left,
+              y: rect.top,
+              width: rect.width,
+              height: rect.height
+            }
+
+            mainWindow.capturePage(clip, function (imageResult) {
+              // fs.writeFileSync('/Users/ewhite/workspace/ember-cli-visual-acceptance/electron-images/' + uuidv4() + '-image.png', imageResult.toPNG())
+              var image = Buffer.from(imageResult.toPNG()).toString('base64')
+              sendImage(mainWindow, image)
+            })
+          })
+        }, timeoutFromResize)
+      }
+    )
+  })
+
+  ipcMain.on('exit-event', function () {
+    app.exit()
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(url)
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools({mode: 'detach'})
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+})
+
+process.on('SIGTERM', function () {
+  mainWindow = null
+})

package.json

@@ -10,7 +10,7 @@
     "build": "ember build",
     "start": "ember server",
     "test": "npm run lint && ember test",
-    "lint": "eslint *.js addon app blueprints config tests"
+    "lint": "eslint *.js addon app blueprints config tests vendor/VisualAcceptance.js vendor/*-launcher.js"
   },
   "repository": "https://github.com/ciena-blueplanet/ember-cli-visual-acceptance.git",
   "engines": {
@@ -19,6 +19,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "babel-eslint": "^7.2.3",
     "broccoli-asset-rev": "^2.4.2",
     "ember-ajax": "0.7.1",
     "ember-cli": "2.4.3",
@@ -45,17 +46,17 @@
     "ember-addon"
   ],
   "dependencies": {
+    "body-parser": "^1.15.1",
+    "chalk": "^1.1.3",
+    "ember-cli-babel": "^5.1.6",
+    "ember-cli-node-assets": "^0.1.4",
     "es6-promise": "^3.2.2",
     "nightmare": "^2.10.0",
     "nightmare-custom-event": "^0.2.0",
     "resemblejs": "2.2.0",
-    "sync-request": "^3.0.1",
-    "body-parser": "^1.15.1",
-    "chalk": "^1.1.3",
-    "ember-cli-babel": "^5.1.6",
-    "ember-cli-node-assets": "^0.1.4"
+    "sync-request": "^3.0.1"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
+}

testem.js

@@ -3,14 +3,15 @@ module.exports = {
   'test_page': 'tests/index.html?hidepassed',
   'disable_watching': true,
   'launch_in_ci': [
+    'Electron',
     'Firefox',
     'NightmareJsVisualAcceptance',
     'PhantomJsVisualAcceptance',
     'SlimerJsVisualAcceptance',
     'Chromium'
   ],
   'launch_in_dev': [
-    'NightmareJsVisualAcceptance'
+    'Electron'
   ],
 
   'launchers': {
@@ -25,6 +26,10 @@ module.exports = {
     'NightmareJsVisualAcceptance': {
       'command': 'DEBUG=nightmare* node vendor/nightmarejs-launcher.js <url>',
       'protocol': 'browser'
+    },
+    'Electron': {
+      'command': 'electron vendor/electron-launcher.js <url>',
+      'protocol': 'browser'
     }
   }
 }

tests/index.html

@@ -6,7 +6,11 @@
     <title>Dummy Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <script> 
+      window.nodeRequire = require; 
+      delete window.require;
+      delete window.exports; delete window.module; 
+    </script> 
     {{content-for "head"}}
     {{content-for "test-head"}}
 

tests/integration/simple-test.js

@@ -16,19 +16,19 @@ describeComponent(
   },
   function () {
     it('renders', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       this.render(hbs `<div id='test'>Test</div>`)
       expect(this.$()).to.have.length(1)
       capture('Simple', done)
     })
     it('renders something else', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       this.render(hbs `<div id='test'>Test Else</div>`)
       expect(this.$()).to.have.length(1)
       capture('Error', done)
     })
     it('renders svg', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       /* eslint-disable max-len */
       this.render(hbs `<svg id="mySVG"xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
         <style type="text/css" media="screen">
@@ -45,7 +45,7 @@ describeComponent(
     })
 
     it('renders svg experimental', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       /* eslint-disable max-len */
       this.render(hbs `<svg id="mySVG"xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
         <style type="text/css" media="screen">
@@ -62,7 +62,7 @@ describeComponent(
     })
 
     it('captures target', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       /* eslint-disable max-len */
       this.render(hbs `<div class="outer">
           <div class="innerdivs left">
@@ -80,13 +80,13 @@ describeComponent(
     })
 
     it('fixed div', function (done) {
-      this.timeout(30000)
+      this.timeout(50000)
       this.render(hbs `<div class="fixed">Wherever you go, I will find you!</div>`)
       capture('fixed', done)
     })
 
     it('more fixed', function (done) {
-      this.timeout(10000)
+      this.timeout(50000)
       this.render(hbs `<div id="left">Side menu</div>
         <div id="right">Top Menu
             <br />Top Menu