Update electron-builder to v19.46.4

setup e2e tests

.gitignore

@@ -24,5 +24,8 @@ yarn-error.log*
 # miscellaneous
 .idea
 config.gypi
-.python-version
 
+# Test generated files
+tests/package.json
+
+.python-version

.travis.yml

@@ -18,8 +18,9 @@ node_js:
 - '6'
 
 before_install:
-- npm install -g gulp
-- npm install
+  - ./scripts/travis-xvfb.sh
+  - npm install -g gulp
+  - npm install
 
 cache:
   directories:
@@ -33,4 +34,4 @@ notifications:
     urls:
       - https://zulip.org/zulipbot/travis
     on_success: always
-    on_failure: always
+    on_failure: always

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "1.6.0-beta",
+  "version": "1.7.0",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
   "email": "<svnitakash@gmail.com>",

app/renderer/css/preference.css

@@ -29,7 +29,7 @@ table, th, td {
     color: #383430;
 }
 
-table { 
+table {
     width: 100%;
     margin-top: 18px;
     margin-bottom: 18px;
@@ -140,9 +140,8 @@ td:nth-child(odd) {
 
 .title {
     padding: 4px 0 6px 0;
-    font-weight: bold;
+    font-weight: 500;
     color: #222c31;
-    text-transform: uppercase;
 }
 
 .sub-title {
@@ -224,7 +223,7 @@ img.server-info-icon {
 .action i {
     margin-right: 5px;
     font-size: 18px;
-    line-height: 27px;
+    line-height: 26px;
 }
 
 .settings-pane {

app/renderer/js/pages/preference/create-new-org.js

@@ -13,7 +13,7 @@ class CreateOrganziation extends BaseComponent {
 		return `
 			<div class="setting-row">
 				<div class="setting-description">
-					<span id="open-create-org-link">Create a new organization on zulipchat.com<i class="material-icons open-tab-button">open_in_new</i></span>
+					<span id="open-create-org-link">Or create a new organization on zulipchat.com<i class="material-icons open-tab-button">open_in_new</i></span>
 				</div>
 				<div class="setting-control"></div>
 			</div>

app/renderer/js/pages/preference/new-server-form.js

@@ -14,11 +14,11 @@ class NewServerForm extends BaseComponent {
 			<div class="settings-card">
 				<div class="server-info-right">
 					<div class="server-info-row">
-						<input class="setting-input-value" autofocus placeholder="Enter the URL of your Zulip organization..."/>
+						<input class="setting-input-value" autofocus placeholder="example.zulipchat.com"/>
 					</div>
 					<div class="server-info-row">
 						<div class="action blue server-save-action">
-							<i class="material-icons">check_box</i>
+							<i class="material-icons">add_box</i>
 							<span>Add</span>
 						</div>
 					</div>

app/renderer/js/pages/preference/server-info-form.js

@@ -20,7 +20,7 @@ class ServerInfoForm extends BaseComponent {
 				<div class="server-info-right">
 					<div class="server-info-row">
 						<span class="server-info-alias">${this.props.server.alias}</span>
-						<i class="material-icons open-tab-button">open_in_new</i>						
+						<i class="material-icons open-tab-button">open_in_new</i>
 					</div>
 					<div class="server-info-row">
 						<input class="setting-input-value" disabled value="${this.props.server.url}"/>

app/renderer/js/pages/preference/servers-section.js

@@ -15,7 +15,7 @@ class ServersSection extends BaseSection {
 	template() {
 		return `
 			<div class="settings-pane" id="server-settings-pane">
-				<div class="title">Add Server</div>
+				<div class="title">Enter URL of your Zulip organization</div>
 				<div id="new-server-container"></div>
 				<div class="title" id="existing-servers"></div>
 				<div id="server-info-container"></div>

app/renderer/js/utils/domain-util.js

@@ -115,6 +115,10 @@ class DomainUtil {
 						'Error: unable to verify the first certificate',
 						'Error: unable to get local issuer certificate'
 					];
+				// If the domain contains following strings we just bypass the server
+				const whitelistDomains = [
+					'zulipdev.org'
+				];
 				if (!error && response.statusCode !== 404) {
 					// Correct
 					this.getServerSettings(domain).then(serverSettings => {
@@ -122,7 +126,7 @@ class DomainUtil {
 					}, () => {
 						resolve(serverConf);
 					});
-				} else if (certsError.indexOf(error.toString()) >= 0) {
+				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError.indexOf(error.toString()) >= 0) {
 					if (silent) {
 						this.getServerSettings(domain).then(serverSettings => {
 							resolve(serverSettings);
@@ -155,7 +159,7 @@ class DomainUtil {
 					}
 				} else {
 					const invalidZulipServerError = `${domain} does not appear to be a valid Zulip server. Make sure that \
-					(1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings`;
+					\n(1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings`;
 					reject(invalidZulipServerError);
 				}
 			});

appveyor.yml

@@ -17,7 +17,8 @@ install:
   - npm install
   - npm install -g gulp
 
-build: off  
+build: off
 
 test_script:
   - npm run test
+  - npm run test-e2e

gulpfile.js

@@ -1,9 +1,10 @@
 'use strict';
 const gulp = require('gulp');
-const mocha = require('gulp-mocha');
 const electron = require('electron-connect').server.create({
 	verbose: true
 });
+const tape = require('gulp-tape');
+const tapColorize = require('tap-colorize');
 
 gulp.task('dev', () => {
   // Start browser process
@@ -28,9 +29,11 @@ gulp.task('reload:renderer', done => {
 	done();
 });
 
-// Test app using mocha+spectron
-gulp.task('test', () => {
-	return gulp.src('tests/index.js').pipe(mocha());
+gulp.task('test-e2e', () => {
+	return gulp.src('tests/*.js')
+	.pipe(tape({
+		reporter: tapColorize()
+	}));
 });
 
-gulp.task('default', ['dev', 'test']);
+gulp.task('default', ['dev', 'test-e2e']);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "1.6.0-beta",
+  "version": "1.7.0",
   "main": "./app/main",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
@@ -23,6 +23,7 @@
     "reinstall": "rm -rf node_modules; rm -rf app/node_modules; npm install",
     "postinstall": "electron-builder install-app-deps",
     "test": "xo",
+    "test-e2e": "gulp test-e2e",
     "dev": "gulp dev",
     "pack": "electron-builder --dir",
     "dist": "electron-builder",
@@ -105,17 +106,19 @@
   ],
   "devDependencies": {
     "assert": "1.4.1",
+    "cp-file": "^5.0.0",
     "devtron": "1.4.0",
-    "electron-builder": "19.45.5",
-    "electron": "1.6.14",
+    "electron-builder": "19.46.4",
+    "electron": "1.6.15",
     "electron-connect": "0.6.2",
     "gulp": "3.9.1",
-    "gulp-mocha": "4.3.1",
-    "chai-as-promised": "7.1.1",
-    "chai": "4.1.1",
-    "spectron": "3.7.2",
-    "xo": "0.18.2",
+    "gulp-tape": "0.0.9",
+    "is-ci": "^1.0.10",
     "pre-commit": "1.2.2",
+    "spectron": "3.7.2",
+    "tap-colorize": "^1.2.0",
+    "tape": "^4.8.0",
+    "xo": "0.18.2",
     "electron-debug": "1.4.0"
   },
   "xo": {
@@ -156,5 +159,8 @@
       "browser",
       "mocha"
     ]
+  },
+  "dependencies": {
+    "resemblejs": "^2.2.6"
   }
 }

scripts/travis-build-test.sh

@@ -1,10 +1,17 @@
 #!/usr/bin/env bash
 
 if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
-  export {no_proxy,NO_PROXY}="127.0.0.1,localhost"
-	export DISPLAY=:99.0
-  sh -e /etc/init.d/xvfb start
-  sleep 3
+    export {no_proxy,NO_PROXY}="127.0.0.1,localhost"
+    export DISPLAY=:99.0
+    sh -e /etc/init.d/xvfb start
+    sleep 3
+
+    echo 'Travis Screen Resolution:'
+    xdpyinfo | grep dimensions
 fi
 
 npm run test
+
+if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then
+    npm run test-e2e
+fi

scripts/travis-xvfb.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
+    /sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16
+fi

tests/config.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+const TEST_APP_PRODUCT_NAME = 'ZulipTest'
+
+module.exports = {
+  TEST_APP_PRODUCT_NAME
+}

tests/index.js

@@ -1,81 +1,13 @@
-const assert = require('assert')
-const Application = require('spectron').Application
-const chai = require('chai')
-const { expect } = chai
-const chaiAsPromised = require('chai-as-promised')
-
-chai.should()
-chai.use(chaiAsPromised)
-
-describe('application launch', function () {
-  this.timeout(15000)
-
-  beforeEach(function () {
-    this.app = new Application({
-      path: require('electron'),
-      args: [__dirname + '/../app/renderer/main.html']
-    })
-    return this.app.start()
-  })
-
-  beforeEach(function () {
-    chaiAsPromised.transferPromiseness = this.app.transferPromiseness
-  })
-
-  afterEach(function () {
-    if (this.app && this.app.isRunning()) {
-      return this.app.stop()
-    }
-  })
-
-  it('shows an initial window', function () {
-     return this.app.client.waitUntilWindowLoaded(5000)
-      .getWindowCount().should.eventually.equal(2)
-      .browserWindow.isMinimized().should.eventually.be.false
-      .browserWindow.isDevToolsOpened().should.eventually.be.false
-      .browserWindow.isVisible().should.eventually.be.true
-      .browserWindow.isFocused().should.eventually.be.true
-      .browserWindow.getBounds().should.eventually.have.property('width').and.be.above(0)
-      .browserWindow.getBounds().should.eventually.have.property('height').and.be.above(0)
-  })
-
-	it('sets up a default organization', function () {
-		let app = this.app
-		let self = this
-		app.client.execute(() => {
-			window.confirm = function () { return true }
-		})
-
-		function createOrg (client, name, url, winIndex) {
-			return client
-				// Focus on settings webview
-				.then(switchToWebviewAtIndex.bind(null, self.app.client, winIndex))
-				.pause(1000) // wait for settings to load
-
-				// Fill settings form
-				.click('#new-server-action')
-				.setValue('input[id="server-info-name"]', name)
-				.setValue('input[id="server-info-url"]', url)
-				.click('#save-server-action')
-				.pause(500) // Need to pause while server verification takes place
-				.then(() =>  app.browserWindow.reload())
-			  .pause(1500) // Wait for webview of org to load
-		}
-
-		function switchToWebviewAtIndex(client, index) {
-			return client
-			.windowHandles()
-			.then(function (session) {
-				this.window(session.value[index])
-			})
-		}
-
-		return this.app.client.waitUntilWindowLoaded(5000)
-			.then(() => createOrg(self.app.client, 'Zulip 1', 'chat.zulip.org', 1))
-			.then(switchToWebviewAtIndex.bind(null, self.app.client, 0))
-			.click('#add-action > i').pause(500)
-			.then(switchToWebviewAtIndex.bind(null, self.app.client, 2))
-			.then(() => createOrg(self.app.client, 'Zulip 2', 'chat.zulip.org', 2))
-	})
-})
+const test = require('tape')
+const setup = require('./setup')
 
+test('app runs', function (t) {
+  t.timeoutAfter(10e3)
+  setup.resetTestDataDir()
+  const app = setup.createApp()
+  setup.waitForLoad(app, t)
+    .then(() => app.client.windowByIndex(1)) // focus on webview
+    .then(() => app.client.waitForExist('//*[@id="new-server-container"]/div/div/div[1]/input'))
+    .then(() => setup.endTest(app, t),
+          (err) => setup.endTest(app, t, err || 'error'))
+})

tests/setup.js

@@ -0,0 +1,99 @@
+const Application = require('spectron').Application
+const cpFile = require('cp-file')
+const fs = require('fs')
+const isCI = require('is-ci')
+const mkdirp = require('mkdirp')
+const path = require('path')
+const rimraf = require('rimraf')
+
+const config = require('./config')
+
+module.exports = {
+  createApp,
+  endTest,
+  waitForLoad,
+  wait,
+  resetTestDataDir
+}
+
+// Runs Zulip Desktop.
+// Returns a promise that resolves to a Spectron Application once the app has loaded.
+// Takes a Tape test. Makes some basic assertions to verify that the app loaded correctly.
+function createApp (t) {
+  generateTestAppPackageJson()
+  return new Application({
+    path: path.join(__dirname, '..', 'node_modules', '.bin',
+      'electron' + (process.platform === 'win32' ? '.cmd' : '')),
+    args: [path.join(__dirname)], // Ensure this dir has a package.json file with a 'main' entry piont
+    env: {NODE_ENV: 'test'},
+    waitTimeout: 10e3
+  })
+}
+
+// Generates package.json for test app
+// Reads app package.json and updates the productName to config.TEST_APP_PRODUCT_NAME 
+// We do this so that the app integration doesn't doesn't share the same appDataDir as the dev application
+function generateTestAppPackageJson () {
+  let packageJson = require(path.join(__dirname, '../package.json'))
+  packageJson.productName = config.TEST_APP_PRODUCT_NAME
+  packageJson.main = '../app/main'
+
+  const testPackageJsonPath = path.join(__dirname, 'package.json')
+  fs.writeFileSync(testPackageJsonPath, JSON.stringify(packageJson, null, ' '), 'utf-8')
+}
+
+// Starts the app, waits for it to load, returns a promise
+function waitForLoad (app, t, opts) {
+  if (!opts) opts = {}
+  return app.start().then(function () {
+    return app.client.waitUntilWindowLoaded()
+  })
+  .then(function() {
+    return app.client.pause(2000);
+  })
+  .then(function () {
+    return app.webContents.getTitle()
+  }).then(function (title) {
+    t.equal(title, 'Zulip', 'html title')
+  })
+}
+
+// Returns a promise that resolves after 'ms' milliseconds. Default: 1 second
+function wait (ms) {
+  if (ms === undefined) ms = 1000 // Default: wait long enough for the UI to update
+  return new Promise(function (resolve, reject) {
+    setTimeout(resolve, ms)
+  })
+}
+
+// Quit the app, end the test, either in success (!err) or failure (err)
+function endTest (app, t, err) {
+  return app.stop().then(function () {
+    t.end(err)
+  })
+}
+
+function getAppDataDir () {
+  let base
+
+  if (process.platform === 'darwin') {
+    base = path.join(process.env.HOME, 'Library', 'Application Support')
+  } else if (process.platform === 'linux') {
+    base = process.env.XDG_CONFIG_HOME ?
+      process.env.XDG_CONFIG_HOME : path.join(process.env.HOME, '.config')
+  } else if (process.platform === 'win32') {
+    base = process.env.APPDATA
+  } else {
+    console.log('Could not detect app data dir base. Exiting...')
+    process.exit(1)
+  }
+  console.log('Detected App Data Dir base:', base)
+  return path.join(base, config.TEST_APP_PRODUCT_NAME)
+}
+
+// Resets the test directory, containing domain.json, window-state.json, etc
+function resetTestDataDir () {
+  appDataDir = getAppDataDir()
+  rimraf.sync(appDataDir)
+  rimraf.sync(path.join(__dirname, 'package.json'))
+}

tests/test-add-organization.js

@@ -0,0 +1,19 @@
+const test = require('tape')
+const setup = require('./setup')
+
+test('add-organization', function (t) {
+  t.timeoutAfter(50e3)
+  setup.resetTestDataDir()
+  const app = setup.createApp()
+  setup.waitForLoad(app, t)
+    .then(() => app.client.windowByIndex(1)) // focus on webview
+    .then(() => app.client.setValue('.setting-input-value', 'chat.zulip.org'))
+    .then(() => app.client.click('.server-save-action'))
+    .then(() => setup.wait(5000))
+    .then(() => app.client.windowByIndex(0)) // Switch focus back to main win
+    .then(() => app.client.windowByIndex(1)) // Switch focus back to org webview
+    .then(() => app.client.waitForExist('//*[@id="id_username"]'))
+    .then(() => setup.endTest(app, t),
+          (err) => setup.endTest(app, t, err || 'error'))
+})
+