adding jest test setup

Summary:
Adds a test runner for jest test and adds three simple test cases:
- render the app
- start a server
- client connecting to the app

Test can be run using `yarn test`.

To make the test runner work, some changes needed to be made:
- remove the export of `init()` from `'flipper'`, because it was a cyclic dependency
- updating Button.js to the new ref-API

Reviewed By: jknoxville

Differential Revision: D10027078

fbshipit-source-id: 49107b0dd4dec666b92ecd841422fe7e6b3a7756

flow-typed/npm/redux-mock-store_vx.x.x.js

@@ -0,0 +1,46 @@
+// flow-typed signature: 0ce56690a743910f5934d0ffc0f26d61
+// flow-typed version: <<STUB>>/redux-mock-store_v1.5.3/flow_v0.76.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'redux-mock-store'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'redux-mock-store' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'redux-mock-store/lib/index' {
+  declare module.exports: any;
+}
+
+declare module 'redux-mock-store/test/index' {
+  declare module.exports: any;
+}
+
+declare module 'redux-mock-store/test/mock/middleware' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'redux-mock-store/lib/index.js' {
+  declare module.exports: $Exports<'redux-mock-store/lib/index'>;
+}
+declare module 'redux-mock-store/test/index.js' {
+  declare module.exports: $Exports<'redux-mock-store/test/index'>;
+}
+declare module 'redux-mock-store/test/mock/middleware.js' {
+  declare module.exports: $Exports<'redux-mock-store/test/mock/middleware'>;
+}

package.json

@@ -21,7 +21,18 @@
       "publisherName": "Facebook, Inc."
     }
   },
+  "resolutions": {
+    "@jest-runner/electron/electron": "3.0.0"
+  },
+  "jest": {
+    "transform": {
+      "\\.(js)$": "<rootDir>/static/transforms/index.js"
+    },
+    "runner": "@jest-runner/electron",
+    "testEnvironment": "@jest-runner/electron/environment"
+  },
   "devDependencies": {
+    "@jest-runner/electron": "^0.0.8",
     "babel-eslint": "8.2.1",
     "electron": "3.0.0",
     "electron-builder": "^19.49.0",
@@ -36,7 +47,9 @@
     "eslint-plugin-relay": "^0.0.20",
     "flow-bin": "^0.76.0",
     "glob": "^7.1.2",
-    "prettier": "1.13.6"
+    "jest": "^23.6.0",
+    "prettier": "1.13.6",
+    "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
     "JSONStream": "^1.3.1",
@@ -53,7 +66,6 @@
     "express": "^4.15.2",
     "fs-extra": "^5.0.0",
     "invariant": "^2.2.2",
-    "jest": "^22.2.1",
     "lodash.debounce": "^4.0.8",
     "mkdirp": "^0.5.1",
     "openssl-wrapper": "^0.3.4",
@@ -65,7 +77,7 @@
     "react-dom": "16",
     "react-emotion": "^9.2.6",
     "react-redux": "^5.0.7",
-    "react-test-renderer": "^16",
+    "react-test-renderer": "^16.5.2",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.1.1",
     "redux": "^4.0.0",
@@ -90,6 +102,7 @@
     "start": "cross-env NODE_ENV=development node scripts/start-dev-server.js",
     "build": "yarn rm-dist && cross-env NODE_ENV=production node scripts/build-release.js $@",
     "fix": "eslint . --fix",
+    "test": "jest",
     "lint": "eslint . && flow check"
   },
   "optionalDependencies": {

src/App.js

@@ -15,7 +15,6 @@ import MainSidebar from './chrome/MainSidebar.js';
 import BugReporterDialog from './chrome/BugReporterDialog.js';
 import ErrorBar from './chrome/ErrorBar.js';
 import PluginContainer from './PluginContainer.js';
-import PluginManager from './chrome/PluginManager.js';
 import {ipcRenderer} from 'electron';
 
 import type Logger from './fb-stubs/Logger.js';
@@ -30,7 +29,7 @@ type Props = {
   pluginManagerVisible: boolean,
   selectedDevice: ?BaseDevice,
   error: ?string,
-  toggleBugDialogVisible: (visible?: boolean) => void,
+  toggleBugDialogVisible: (visible?: boolean) => any,
 };
 
 export class App extends React.Component<Props> {
@@ -55,7 +54,9 @@ export class App extends React.Component<Props> {
         {this.props.bugDialogVisible && (
           <BugReporterDialog
             bugReporter={this.props.bugReporter}
-            close={() => this.props.toggleBugDialogVisible(false)}
+            close={() => {
+              this.props.toggleBugDialogVisible(false);
+            }}
           />
         )}
         <FlexRow fill={true}>

src/__tests__/App.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+import React from 'react';
+import {App} from '../App.js';
+import {Provider} from 'react-redux';
+import renderer from 'react-test-renderer';
+import reducers from '../reducers/index.js';
+import configureStore from 'redux-mock-store';
+import Logger from '../fb-stubs/Logger.js';
+import BugReporter from '../fb-stubs/BugReporter.js';
+
+// create redux store with initial state
+const mockStore = configureStore([])(reducers(undefined, {type: 'INIT'}));
+
+beforeEach(() => {});
+
+test('Empty app state matches snapshot', () => {
+  const logger = new Logger();
+  const bugReporter = new BugReporter(logger);
+
+  const component = renderer.create(
+    <Provider store={mockStore}>
+      <App
+        logger={logger}
+        bugReporter={bugReporter}
+        leftSidebarVisible={false}
+        bugDialogVisible={false}
+        pluginManagerVisible={false}
+        selectedDevice={null}
+        toggleBugDialogVisible={() => {}}
+        error={null}
+      />
+    </Provider>,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/__tests__/__snapshots__/App.js.snap

@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty app state matches snapshot 1`] = `
+<div
+  className="css-1si6n3e"
+  fill={true}
+>
+  <div
+    className="toolbar css-1u64wvw"
+  >
+    <div
+      className="css-7nzs1f"
+      disabled={false}
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+    >
+      <div
+        className="css-at56xe"
+        color="#acacac"
+        size={12}
+        src="https://external.xx.fbcdn.net/assets/?name=minus-circle&variant=filled&size=12&set=facebook_icons&density=1x"
+      />
+      No device selected
+    </div>
+    <div
+      className="css-1ayt83l"
+    >
+      <div
+        className="css-1telx8z"
+        disabled={true}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        title="Take Screenshot"
+      >
+        <div
+          className="css-11ecny9"
+          color="#acacac"
+          size={12}
+          src="https://external.xx.fbcdn.net/assets/?name=camera&variant=filled&size=12&set=facebook_icons&density=1x"
+        />
+      </div>
+      <div
+        className="css-1telx8z"
+        disabled={true}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        title="Make Screen Recording"
+      >
+        <div
+          className="css-1qxark3"
+          color="#acacac"
+          size={12}
+          src="https://external.xx.fbcdn.net/assets/?name=camcorder&variant=filled&size=12&set=facebook_icons&density=1x"
+        />
+      </div>
+    </div>
+    <div
+      className="css-12zzrdt"
+    />
+    <div
+      className="css-1xcv92o"
+    />
+    <div
+      className="css-1lljw3m"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      title="Report Bug"
+    >
+      <div
+        className="css-1u10tgp"
+        color="#acacac"
+        size={12}
+        src="https://external.xx.fbcdn.net/assets/?name=bug&variant=filled&size=12&set=facebook_icons&density=1x"
+      />
+    </div>
+    <div
+      className="css-1ayt83l"
+    >
+      <div
+        className="css-19m5dks"
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        title="Toggle Plugins"
+      >
+        <div
+          className="css-1pfn0zl"
+          color="#80a6f5"
+          size={20}
+          src="icons/sidebar_left.svg"
+        />
+      </div>
+      <div
+        className="css-1telx8z"
+        disabled={true}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        title="Toggle Details"
+      >
+        <div
+          className="css-13cmaba"
+          color="#acacac"
+          size={20}
+          src="icons/sidebar_right.svg"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="css-9qtipk"
+    fill={true}
+  >
+    <div
+      className="css-1atbcdi"
+    >
+      <div
+        className="css-1hs1k35"
+      >
+        <img
+          className="css-1yl4k4p"
+          src="./icon.png"
+        />
+        <span
+          className="css-p2pwny"
+        >
+          Welcome to Flipper
+        </span>
+        <span
+          className="css-1xkgddx"
+        >
+          Development Mode
+        </span>
+        <div
+          className="css-ls6p57"
+          onClick={[Function]}
+        >
+          <div
+            className="css-1wavjrl"
+            color="#8155cb"
+            size={20}
+            src="https://external.xx.fbcdn.net/assets/?name=rocket&variant=filled&size=20&set=facebook_icons&density=1x"
+          />
+          <div
+            className="css-1k4677w"
+          >
+            <span
+              className="css-1jw94dh"
+            >
+              Using Flipper
+            </span>
+            <span
+              className="css-bcc6f5"
+            >
+              Learn how Flipper can help you debug your App
+            </span>
+          </div>
+        </div>
+        <div
+          className="css-ls6p57"
+          onClick={[Function]}
+        >
+          <div
+            className="css-1bmw9ne"
+            color="#8155cb"
+            size={20}
+            src="https://external.xx.fbcdn.net/assets/?name=magic-wand&variant=filled&size=20&set=facebook_icons&density=1x"
+          />
+          <div
+            className="css-1k4677w"
+          >
+            <span
+              className="css-1jw94dh"
+            >
+              Create your own plugin
+            </span>
+            <span
+              className="css-bcc6f5"
+            >
+              Get started with these pointers
+            </span>
+          </div>
+        </div>
+        <div
+          className="css-ls6p57"
+          onClick={[Function]}
+        >
+          <div
+            className="css-nk9hkx"
+            color="#8155cb"
+            size={20}
+            src="https://external.xx.fbcdn.net/assets/?name=tools&variant=filled&size=20&set=facebook_icons&density=1x"
+          />
+          <div
+            className="css-1k4677w"
+          >
+            <span
+              className="css-1jw94dh"
+            >
+              Add Flipper support to your app
+            </span>
+            <span
+              className="css-bcc6f5"
+            >
+              Get started with these pointers
+            </span>
+          </div>
+        </div>
+        <div
+          className="css-ls6p57"
+          onClick={[Function]}
+        >
+          <div
+            className="css-14xjmfa"
+            color="#8155cb"
+            size={20}
+            src="https://external.xx.fbcdn.net/assets/?name=posts&variant=filled&size=20&set=facebook_icons&density=1x"
+          />
+          <div
+            className="css-1k4677w"
+          >
+            <span
+              className="css-1jw94dh"
+            >
+              Contributing and Feedback
+            </span>
+            <span
+              className="css-bcc6f5"
+            >
+              Report issues and help us improve Flipper
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/__tests__/server.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import type Client from '../Client';
+
+import Server, {SECURE_PORT, INSECURE_PORT} from '../server.js';
+import LogManager from '../fb-stubs/Logger';
+
+let server;
+
+beforeAll(() => {
+  server = new Server(new LogManager());
+});
+
+test('servers starting at ports', done => {
+  const serversToBeStarted = new Set([SECURE_PORT, INSECURE_PORT]);
+
+  server.addListener('listening', port => {
+    if (!serversToBeStarted.has(port)) {
+      throw Error(`unknown server started at port ${port}`);
+    } else {
+      serversToBeStarted.delete(port);
+    }
+    if (serversToBeStarted.size === 0) {
+      done();
+    }
+  });
+});
+
+test('Layout plugin is connecting', done => {
+  server.addListener('new-client', (client: Client) => {
+    if (client.plugins.indexOf('Inspector -') === -1) {
+      done.fail(new Error('Layout inspector plugin not found'));
+    } else {
+      done();
+    }
+  });
+});
+
+afterAll(() => {
+  server.close();
+});

src/index.js

@@ -28,5 +28,3 @@ export {default as DetailSidebar} from './chrome/DetailSidebar.js';
 export {default as AndroidDevice} from './devices/AndroidDevice.js';
 export {default as Device} from './devices/BaseDevice.js';
 export {default as IOSDevice} from './devices/IOSDevice.js';
-
-export {default as init} from './init.js';

src/init.js

@@ -62,7 +62,7 @@ const AppFrame = () => (
   </TooltipProvider>
 );
 
-export default function init() {
+function init() {
   // $FlowFixMe: this element exists!
   ReactDOM.render(<AppFrame />, document.getElementById('root'));
   // $FlowFixMe: service workers exist!
@@ -77,3 +77,6 @@ export default function init() {
     })
     .catch(console.error);
 }
+
+// make init function callable from outside
+window.Flipper.init = init;

src/reducers/index.js

@@ -30,7 +30,7 @@ export type Store = ReduxStore<
     connections: DevicesState,
     pluginStates: PluginsState,
   },
-  ApplicationAction | DevicesAction | PluginsAction,
+  ApplicationAction | DevicesAction | PluginsAction | {|type: 'INIT'|},
 >;
 
 export default combineReducers({

src/server.js

@@ -21,8 +21,8 @@ const invariant = require('invariant');
 const tls = require('tls');
 const net = require('net');
 
-const SECURE_PORT = 8088;
+export const SECURE_PORT = 8088;
-const INSECURE_PORT = 8089;
+export const INSECURE_PORT = 8089;
 
 type RSocket = {|
   fireAndForget(payload: {data: string}): void,
@@ -57,14 +57,6 @@ export default class Server extends EventEmitter {
     ((event: 'clients-change', callback: () => void) => void);
 
   init() {
-    if (process.env.NODE_ENV === 'test') {
-      console.warn(
-        "rsocket server has not been started as we're in test mode",
-        'server',
-      );
-      return;
-    }
-
     this.certificateProvider
       .loadSecureServerConfig()
       .then(
@@ -93,6 +85,7 @@ export default class Server extends EventEmitter {
             } server started on port ${port}`,
             'server',
           );
+          server.emit('listening', port);
         });
       return transportServer;
     };

src/ui/components/Button.js

@@ -258,7 +258,7 @@ class Button extends React.Component<
     active: false,
   };
 
-  _ref: ?Element | ?Text;
+  _ref = React.createRef();
 
   onMouseDown = () => this.setState({active: true});
   onMouseUp = () => this.setState({active: false});
@@ -270,10 +270,14 @@ class Button extends React.Component<
     if (this.props.dropdown) {
       const menu = electron.remote.Menu.buildFromTemplate(this.props.dropdown);
       const position = {};
-      if (this._ref != null && this._ref instanceof Element) {
+      const {current} = this._ref;
-        const {left, bottom} = this._ref.getBoundingClientRect();
+      if (current) {
-        position.x = parseInt(left, 10);
+        const node = findDOMNode(current);
-        position.y = parseInt(bottom + 6, 10);
+        if (node instanceof Element) {
+          const {left, bottom} = node.getBoundingClientRect();
+          position.x = parseInt(left, 10);
+          position.y = parseInt(bottom + 6, 10);
+        }
       }
       menu.popup({
         window: electron.remote.getCurrentWindow(),
@@ -289,10 +293,6 @@ class Button extends React.Component<
     }
   };
 
-  setRef = (ref: ?React.ElementRef<any>) => {
-    this._ref = findDOMNode(ref);
-  };
-
   render() {
     const {
       icon,
@@ -336,7 +336,7 @@ class Button extends React.Component<
     return (
       <StyledButton
         {...props}
-        ref={this.setRef}
+        ref={this._ref}
         windowIsFocused={windowIsFocused}
         onClick={this.onClick}
         onMouseDown={this.onMouseDown}

static/package.json

@@ -15,5 +15,6 @@
     "@babel/preset-react": "^7.0.0",
     "metro": "^0.45.3",
     "recursive-readdir": "2.2.2"
-  }
+  },
+  "devDependencies": {}
 }

static/transforms/index.js

@@ -8,11 +8,11 @@
 const generate = require('@babel/generator').default;
 const babylon = require('@babel/parser');
 const babel = require('@babel/core');
-const metro = require('metro');
 
-exports.transform = function({filename, options, src}) {
+function transform({filename, options, src}) {
   const presets = [require('../node_modules/@babel/preset-react')];
-  const isPlugin = !__dirname.startsWith(options.projectRoot);
+  const isPlugin =
+    options.projectRoot && !__dirname.startsWith(options.projectRoot);
 
   let ast = babylon.parse(src, {
     filename,
@@ -33,10 +33,18 @@ exports.transform = function({filename, options, src}) {
     require('../node_modules/@babel/plugin-proposal-class-properties'),
     require('../node_modules/@babel/plugin-transform-flow-strip-types'),
     require('../node_modules/@babel/plugin-proposal-optional-chaining'),
-    require('./electron-requires.js'),
     require('./fb-stubs.js'),
     require('./dynamic-requires.js'),
   ];
+
+  if (!options.isTestRunner) {
+    // Replacing require statements with electronRequire to prevent metro from
+    // resolving them. electronRequire are resolved during runtime by electron.
+    // As the tests are not bundled by metro and run in @jest-runner/electron,
+    // electron imports are working out of the box.
+    plugins.push(require('./electron-requires.js'));
+  }
+
   if (isPlugin) {
     plugins.push(require('./flipper-requires.js'));
   } else {
@@ -64,11 +72,22 @@ exports.transform = function({filename, options, src}) {
     },
     src,
   );
-
   return {
     ast,
     code: result.code,
     filename,
-    map: result.rawMappings.map(metro.sourceMaps.compactMapping),
+    map: result.map,
   };
+}
+
+module.exports = {
+  transform,
+  process(src, filename, config, options) {
+    return transform({
+      src,
+      filename,
+      config,
+      options: {...options, isTestRunner: true},
+    });
+  },
 };