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
2018-09-28 06:31:48 -07:00
parent af1ff7f039
commit a455520ecb
14 changed files with 2191 additions and 511 deletions
--- a/flow-typed/npm/redux-mock-store_vx.x.x.js
+++ b/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'>;
+}
--- a/package.json
+++ b/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": {
--- a/src/App.js
+++ b/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}>
--- a/src/tests/App.js
+++ b/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();
+});
--- a/src/tests/snapshots/App.js.snap
+++ b/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>
+`;
--- a/src/tests/server.js
+++ b/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();
+});
--- a/src/index.js
+++ b/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';
--- a/src/init.js
+++ b/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;
--- a/src/reducers/index.js
+++ b/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({
--- a/src/server.js
+++ b/src/server.js
@@ -21,8 +21,8 @@ const invariant = require('invariant');
 const tls = require('tls');
 const net = require('net');

-const SECURE_PORT = 8088;
-const INSECURE_PORT = 8089;
+export const SECURE_PORT = 8088;
+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;
    };
--- a/src/ui/components/Button.js
+++ b/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 {left, bottom} = this._ref.getBoundingClientRect();
-        position.x = parseInt(left, 10);
-        position.y = parseInt(bottom + 6, 10);
+      const {current} = this._ref;
+      if (current) {
+        const node = findDOMNode(current);
+        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}
--- a/static/package.json
+++ b/static/package.json
@@ -15,5 +15,6 @@
    "@babel/preset-react": "^7.0.0",
    "metro": "^0.45.3",
    "recursive-readdir": "2.2.2"
-  }
+  },
+  "devDependencies": {}
 }
--- a/static/transforms/index.js
+++ b/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},
+    });
+  },
 };
--- a/yarn.lock
+++ b/yarn.lock