Renderer tests 2

app/ui/browser/index.jsx

@@ -39,18 +39,26 @@ import WebSocket from 'ws';
 
 const store = configureStore();
 
-// Make the store accessible from the ipcRenderer singleton
-// so we can easily access in tests
-if (BUILD_CONFIG.test) {
-  ipcRenderer.store = store;
-}
-
 const chrome = (
   <Provider store={store}>
     <App />
   </Provider>
 );
 
+// The `app` object gets exposed via `window` in tests. Attach
+// objects to app if and only if they should be accessible in tests.
+const app = {
+  store,
+};
+
+if (BUILD_CONFIG.test) {
+  window.app = app;
+
+  // Make the store accessible from the ipcRenderer singleton
+  // so we can easily access in tests
+  ipcRenderer.store = store;
+}
+
 const container = document.getElementById('browser-container');
 
 // Before rendering, add a fresh tab.  This is leading toward a session restore model where the

app/ui/browser/views/tabbar/tabbar.jsx

@@ -30,7 +30,8 @@ const TabBar = ({
   pages, currentPageIndex,
   handleTabContextMenu, handleNewTabClick, handleTabClick, handleTabClose,
 }) => (
-  <div className={TABBAR_STYLE}>
+  <div id="browser-tabbar"
+    className={TABBAR_STYLE}>
     {pages.map((page, i) => (
       <Tab key={`browser-tab-${i}`}
         className={`browser-tab-${i}`}

build/task-test.js

@@ -1,15 +1,92 @@
 // Any copyright is dedicated to the Public Domain.
 // http://creativecommons.org/publicdomain/zero/1.0/
+/* eslint no-console: 0 */
 
+import childProcess from 'child_process';
 import path from 'path';
-import { spawn } from './utils';
+import os from 'os';
+import { spawn, getElectronPath, normalizeCommand } from './utils';
 
-export default async function(args) {
-  const command = path.join(__dirname, '..', 'node_modules', '.bin', 'mocha');
+const DEFAULT_UNIT_TESTS = path.join(__dirname, '..', 'test', 'unit');
+const DEFAULT_RENDERER_TESTS = path.join(__dirname, '..', 'test', 'renderer');
+const DEFAULT_WEBDRIVER_TESTS = path.join(__dirname, '..', 'test', 'webdriver');
+const MOCHA = path.join(__dirname, '..', 'node_modules', '.bin', 'mocha');
+const ELECTRON_MOCHA = path.join(__dirname, '..', 'node_modules', '.bin', 'electron-mocha');
+const PATH_TO_ELECTRON_MOCHA_OPTS = path.join(__dirname, '..', 'test', 'renderer', 'mocha.opts');
 
-  console.log(`Executing command: ${command}`);
+export default async function(args) {
+  // If no arguments passed in, we must run all tests; both mocha
+  // and electron-mocha.
+  if (!args.length) {
+    await runMochaTests(DEFAULT_UNIT_TESTS);
+    await runRendererTests(DEFAULT_RENDERER_TESTS);
+    await runMochaTests(DEFAULT_WEBDRIVER_TESTS);
+  } else {
+    // If we get a path passed in, crudely check if we should run
+    // our renderer tests, or normal mocha tests. This will fail for complex
+    // globbing, but this is more than fine for now.
+    const pathToTests = args[0];
+    if (pathToTests.indexOf(path.join('test', 'renderer')) !== -1) {
+      await runRendererTests(pathToTests);
+    } else {
+      await runMochaTests(pathToTests);
+    }
+  }
+}
 
-  await spawn(command, args, {
+function runMochaTests(pathToTests) {
+  return spawn(MOCHA, [pathToTests], {
     stdio: 'inherit',
   });
 }
+
+async function runRendererTests(pathToTests) {
+  const command = await normalizeCommand(ELECTRON_MOCHA);
+
+  const child = childProcess.spawn(command, [
+    '--renderer',
+    '--opts', PATH_TO_ELECTRON_MOCHA_OPTS,
+    pathToTests,
+  ], {
+    // Must pass in our whole environment to `electron-mocha`, as
+    // that spawns another process which uses something in the current environment
+    // (so `process.env`, or the `env` object we pass in here), otherwise the electron process
+    // immediately crashes.
+    env: Object.assign({}, process.env, { ELECTRON_PATH: getElectronPath() }),
+  });
+
+  return new Promise((resolve, reject) => {
+    let failedFromStdout = false;
+
+    // Parse and pipe the stdout from electron-mocha
+    // so we can observe if tests are passing, but we get an error
+    // on shutdown, for the Windows edge case below.
+    child.stdout.on('data', data => {
+      if (/\s\d+ failing/.test(`${data}`.trim())) {
+        failedFromStdout = true;
+      }
+      process.stdout.write(data);
+    });
+
+    child.stderr.pipe(process.stderr);
+    child.on('error', reject);
+    child.on('exit', code => {
+      if (code !== 0) {
+        if (os.platform() === 'win32' && !failedFromStdout) {
+          // If the exit code is not 0 and we didn't observe any
+          // failure messages when running tests, we are running into
+          // an issue where Electron crashes in electron-mocha when cleaning up
+          // tests due to the main process firing a `webContents.send()` during clean up
+          // resulting in a 'Object has been destroyed' error. Can't seem to figure out
+          // why, but looks like a part of Electron, and burned enough time on this,
+          // so this is good enough for now™.
+          resolve();
+        } else {
+          reject(new Error(`Child process ${command} exited with exit code ${code}`));
+        }
+      } else {
+        resolve();
+      }
+    });
+  });
+}

build/utils.js

@@ -66,7 +66,10 @@ export function getElectronVersion() {
   return version.trim().substring(1);
 }
 
-export async function spawn(command, args, options = {}) {
+/**
+ * Use a widnows `.cmd` command if available.
+ */
+export async function normalizeCommand(command) {
   if (os.type() === 'Windows_NT') {
     try {
       // Prefer a cmd version if available
@@ -79,14 +82,18 @@ export async function spawn(command, args, options = {}) {
       // Ignore missing files.
     }
   }
+  return command;
+}
 
+export async function spawn(command, args, options = {}) {
+  command = await normalizeCommand(command);
   return new Promise((resolve, reject) => {
     const child = childProcess.spawn(command, args, options);
 
     child.on('error', reject);
     child.on('exit', (code) => {
       if (code !== 0) {
-        reject(new Error(`Exited with exit code ${code}`));
+        reject(new Error(`Child process ${command} exited with exit code ${code}`));
       } else {
         resolve();
       }

test/renderer/mocha.opts

@@ -0,0 +1,9 @@
+--ui bdd
+--reporter spec
+--recursive
+--check-leaks
+--full-trace
+--timeout 10000
+--require isomorphic-fetch
+--require ./lib/ui/browser/index.js
+--preload ./test/utils/renderer-setup.js

test/renderer/test-basic.renderer.js

@@ -0,0 +1,29 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/publicdomain/zero/1.0/
+/* eslint prefer-arrow-callback: 0 */
+/* eslint no-undef: 0 */
+/* eslint-disable import/no-commonjs */
+
+const expect = require('expect');
+
+describe('renderer - sanity checks', function() {
+  it('has access to expected globals', function() {
+    expect(window).toExist();
+    expect(document).toExist();
+
+    // Get globals from the browser/index.jsx app
+    expect(window.app).toExist();
+    expect(window.app.store).toExist();
+
+    // Gets helpers from renderer-setup.js
+    expect($).toExist();
+    expect($$).toExist();
+  });
+
+  it('renders basic components', function() {
+    expect($('#browser-container')).toExist();
+    expect($('#browser-location-title-bar').hasAttribute('hidden')).toBe(false);
+    expect($$('#browser-tabbar .tab').length).toBe(1);
+    expect($$('webview').length).toBeGreaterThan(0);
+  });
+});

test/lint/test-devdeps.js → test/unit/lint/test-devdeps.js

@@ -4,7 +4,7 @@
 import expect from 'expect';
 import fs from 'fs-promise';
 import without from 'lodash/without';
-import { autoFailingAsyncTest } from '../utils/async';
+import { autoFailingAsyncTest } from '../../utils/async';
 import { REQUIRES_REGEX, IMPORTS_REGEX, globMany, regexFiles } from './shared.js';
 
 const all = '/**/';

test/lint/test-eslint.js → test/unit/lint/test-eslint.js

@@ -8,7 +8,7 @@ import path from 'path';
 const valid = '*.@(js|jsx)';
 
 // Load the ignore list
-let paths = fs.readFileSync(path.join(__dirname, '..', '..', '.eslintignore'), {
+let paths = fs.readFileSync(path.join(__dirname, '..', '..', '..', '.eslintignore'), {
   encoding: 'utf8',
 }).split('\n');
 

test/lint/test-packages.js → test/unit/lint/test-packages.js

@@ -4,7 +4,7 @@
 import expect from 'expect';
 import fs from 'fs-promise';
 import difference from 'lodash/difference';
-import { autoFailingAsyncTest } from '../utils/async';
+import { autoFailingAsyncTest } from '../../utils/async';
 import { REQUIRES_REGEX, IMPORTS_REGEX, globMany, regexFiles } from './shared.js';
 
 const all = '/**/';

test/lint/test-pinned-deps.js → test/unit/lint/test-pinned-deps.js

@@ -3,7 +3,7 @@
 
 import expect from 'expect';
 import fs from 'fs-promise';
-import { autoFailingAsyncTest } from '../utils/async';
+import { autoFailingAsyncTest } from '../../utils/async';
 
 describe('dependecies', () => {
   it('should be pinned', autoFailingAsyncTest(async function() {

test/utils/renderer-setup.js

@@ -0,0 +1,20 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/publicdomain/zero/1.0/
+/* eslint-disable import/no-commonjs */
+
+/**
+ * This preload script gets injected via <script> in the renderer process
+ * for use with tests.
+ */
+
+window.$ = (selector, scope = document) => scope.querySelector(selector);
+window.$$ = (selector, scope = document) => scope.querySelectorAll(selector);
+
+// Create a container div that will render the entire app
+const container = document.createElement('div');
+container.setAttribute('id', 'browser-container');
+document.body.appendChild(container);
+
+// Require these so we can transpile the client code on the fly
+// require('babel-polyfill');
+// require('babel-register')();