[ReactNative] Merge IntegrationTest into UIExplorer tests

Examples/UIExplorer/UIExplorerIntegrationTests/js/AppEventsTest.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule AppEventsTest
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  NativeAppEventEmitter,
+  NativeModules,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+var TestModule = NativeModules.TestModule || NativeModules.SnapshotTestManager;
+
+var deepDiffer = require('deepDiffer');
+
+var TEST_PAYLOAD = {foo: 'bar'};
+
+var AppEventsTest = React.createClass({
+  getInitialState: function() {
+    return {sent: 'none', received: 'none'};
+  },
+  componentDidMount: function() {
+    NativeAppEventEmitter.addListener('testEvent', this.receiveEvent);
+    var event = {data: TEST_PAYLOAD, ts: Date.now()};
+    TestModule.sendAppEvent('testEvent', event);
+    this.setState({sent: event});
+  },
+  receiveEvent: function(event: any) {
+    if (deepDiffer(event.data, TEST_PAYLOAD)) {
+      throw new Error('Received wrong event: ' + JSON.stringify(event));
+    }
+    var elapsed = (Date.now() - event.ts) + 'ms';
+    this.setState({received: event, elapsed}, TestModule.markTestCompleted);
+  },
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <Text>
+          {JSON.stringify(this.state, null, '  ')}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    margin: 40,
+  },
+});
+
+module.exports = AppEventsTest;

Examples/UIExplorer/UIExplorerIntegrationTests/js/AsyncStorageTest.js

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+var RCTTestModule = require('NativeModules').TestModule;
+var React = require('react-native');
+var {
+  AsyncStorage,
+  Text,
+  View,
+} = React;
+
+var deepDiffer = require('deepDiffer');
+
+var DEBUG = false;
+
+var KEY_1 = 'key_1';
+var VAL_1 = 'val_1';
+var KEY_2 = 'key_2';
+var VAL_2 = 'val_2';
+var KEY_MERGE = 'key_merge';
+var VAL_MERGE_1 = {'foo': 1, 'bar': {'hoo': 1, 'boo': 1}, 'moo': {'a': 3}};
+var VAL_MERGE_2 = {'bar': {'hoo': 2}, 'baz': 2, 'moo': {'a': 3}};
+var VAL_MERGE_EXPECT =
+  {'foo': 1, 'bar': {'hoo': 2, 'boo': 1}, 'baz': 2, 'moo': {'a': 3}};
+
+// setup in componentDidMount
+var done;
+var updateMessage;
+
+function runTestCase(description, fn) {
+  updateMessage(description);
+  fn();
+}
+
+function expectTrue(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+function expectEqual(lhs, rhs, testname) {
+  expectTrue(
+    !deepDiffer(lhs, rhs),
+    'Error in test ' + testname + ': expected\n' + JSON.stringify(rhs) +
+      '\ngot\n' + JSON.stringify(lhs)
+  );
+}
+
+function expectAsyncNoError(err) {
+  expectTrue(err === null, 'Unexpected Async error: ' + JSON.stringify(err));
+}
+
+function testSetAndGet() {
+  AsyncStorage.setItem(KEY_1, VAL_1, (err1) => {
+    expectAsyncNoError(err1);
+    AsyncStorage.getItem(KEY_1, (err2, result) => {
+      expectAsyncNoError(err2);
+      expectEqual(result, VAL_1, 'testSetAndGet setItem');
+      updateMessage('get(key_1) correctly returned ' + result);
+      runTestCase('should get null for missing key', testMissingGet);
+    });
+  });
+}
+
+function testMissingGet() {
+  AsyncStorage.getItem(KEY_2, (err, result) => {
+    expectAsyncNoError(err);
+    expectEqual(result, null, 'testMissingGet');
+    updateMessage('missing get(key_2) correctly returned ' + result);
+    runTestCase('check set twice results in a single key', testSetTwice);
+  });
+}
+
+function testSetTwice() {
+  AsyncStorage.setItem(KEY_1, VAL_1, ()=>{
+    AsyncStorage.setItem(KEY_1, VAL_1, ()=>{
+      AsyncStorage.getItem(KEY_1, (err, result) => {
+        expectAsyncNoError(err);
+        expectEqual(result, VAL_1, 'testSetTwice');
+        updateMessage('setTwice worked as expected');
+        runTestCase('test removeItem', testRemoveItem);
+      });
+    });
+  });
+}
+
+function testRemoveItem() {
+  AsyncStorage.setItem(KEY_1, VAL_1, ()=>{
+    AsyncStorage.setItem(KEY_2, VAL_2, ()=>{
+      AsyncStorage.getAllKeys((err, result) => {
+        expectAsyncNoError(err);
+        expectTrue(
+          result.indexOf(KEY_1) >= 0 && result.indexOf(KEY_2) >= 0,
+          'Missing KEY_1 or KEY_2 in ' + '(' + result + ')'
+        );
+        updateMessage('testRemoveItem - add two items');
+        AsyncStorage.removeItem(KEY_1, (err2) => {
+          expectAsyncNoError(err2);
+          updateMessage('delete successful ');
+          AsyncStorage.getItem(KEY_1, (err3, result2) => {
+            expectAsyncNoError(err3);
+            expectEqual(
+              result2,
+              null,
+              'testRemoveItem: key_1 present after delete'
+            );
+            updateMessage('key properly removed ');
+            AsyncStorage.getAllKeys((err4, result3) => {
+             expectAsyncNoError(err4);
+             expectTrue(
+               result3.indexOf(KEY_1) === -1,
+               'Unexpected: KEY_1 present in ' + result3
+             );
+             updateMessage('proper length returned.');
+             runTestCase('should merge values', testMerge);
+            });
+          });
+        });
+      });
+    });
+  });
+}
+
+function testMerge() {
+  AsyncStorage.setItem(KEY_MERGE, JSON.stringify(VAL_MERGE_1), (err1) => {
+    expectAsyncNoError(err1);
+    AsyncStorage.mergeItem(KEY_MERGE, JSON.stringify(VAL_MERGE_2), (err2) => {
+      expectAsyncNoError(err2);
+      AsyncStorage.getItem(KEY_MERGE, (err3, result) => {
+        expectAsyncNoError(err3);
+        expectEqual(JSON.parse(result), VAL_MERGE_EXPECT, 'testMerge');
+        updateMessage('objects deeply merged\nDone!');
+        done();
+      });
+    });
+  });
+}
+
+var AsyncStorageTest = React.createClass({
+  getInitialState() {
+    return {
+      messages: 'Initializing...',
+      done: false,
+    };
+  },
+
+  componentDidMount() {
+    done = () => this.setState({done: true}, RCTTestModule.markTestCompleted);
+    updateMessage = (msg) => {
+      this.setState({messages: this.state.messages.concat('\n' + msg)});
+      DEBUG && console.log(msg);
+    };
+    AsyncStorage.clear(testSetAndGet);
+  },
+
+  render() {
+    return (
+      <View style={{backgroundColor: 'white', padding: 40}}>
+        <Text>
+          {this.constructor.displayName + ': '}
+          {this.state.done ? 'Done' : 'Testing...'}
+          {'\n\n' + this.state.messages}
+        </Text>
+      </View>
+    );
+  }
+});
+
+module.exports = AsyncStorageTest;

Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestHarnessTest.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+var RCTTestModule = require('NativeModules').TestModule;
+var React = require('react-native');
+var {
+  Text,
+  View,
+} = React;
+
+var IntegrationTestHarnessTest = React.createClass({
+  propTypes: {
+    shouldThrow: React.PropTypes.bool,
+    waitOneFrame: React.PropTypes.bool,
+  },
+
+  getInitialState() {
+    return {
+      done: false,
+    };
+  },
+
+  componentDidMount() {
+    if (this.props.waitOneFrame) {
+      requestAnimationFrame(this.runTest);
+    } else {
+      this.runTest();
+    }
+  },
+
+  runTest() {
+    if (this.props.shouldThrow) {
+      throw new Error('Throwing error because shouldThrow');
+    }
+    if (!RCTTestModule) {
+      throw new Error('RCTTestModule is not registered.');
+    } else if (!RCTTestModule.markTestCompleted) {
+      throw new Error('RCTTestModule.markTestCompleted not defined.');
+    }
+    this.setState({done: true}, RCTTestModule.markTestCompleted);
+  },
+
+  render() {
+    return (
+      <View style={{backgroundColor: 'white', padding: 40}}>
+        <Text>
+          {this.constructor.displayName + ': '}
+          {this.state.done ? 'Done' : 'Testing...'}
+        </Text>
+      </View>
+    );
+  }
+});
+
+module.exports = IntegrationTestHarnessTest;

Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule IntegrationTestsApp
+ */
+'use strict';
+
+var React = require('react-native');
+
+var {
+  AppRegistry,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = React;
+
+var TESTS = [
+  require('./IntegrationTestHarnessTest'),
+  require('./TimersTest'),
+  require('./AsyncStorageTest'),
+  require('./LayoutEventsTest'),
+  require('./AppEventsTest'),
+  require('./SimpleSnapshotTest'),
+];
+
+TESTS.forEach(
+  (test) => AppRegistry.registerComponent(test.displayName, () => test)
+);
+
+var IntegrationTestsApp = React.createClass({
+  getInitialState: function() {
+    return {
+      test: null,
+    };
+  },
+  render: function() {
+    if (this.state.test) {
+      return (
+        <ScrollView>
+          <this.state.test />
+        </ScrollView>
+      );
+    }
+    return (
+      <View style={styles.container}>
+        <Text style={styles.row}>
+          Click on a test to run it in this shell for easier debugging and
+          development.  Run all tests in the testing envirnment with cmd+U in
+          Xcode.
+        </Text>
+        <View style={styles.separator} />
+        <ScrollView>
+          {TESTS.map((test) => [
+            <TouchableOpacity onPress={() => this.setState({test})}>
+              <View style={styles.row}>
+                <Text style={styles.testName}>
+                  {test.displayName}
+                </Text>
+              </View>
+            </TouchableOpacity>,
+            <View style={styles.separator} />
+          ])}
+        </ScrollView>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    marginTop: 40,
+    margin: 15,
+  },
+  row: {
+    padding: 10,
+  },
+  testName: {
+    fontWeight: '500',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#bbbbbb',
+  },
+});
+
+AppRegistry.registerComponent('IntegrationTestsApp', () => IntegrationTestsApp);

Examples/UIExplorer/UIExplorerIntegrationTests/js/LayoutEventsTest.js

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule LayoutEventsTest
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  LayoutAnimation,
+  NativeModules,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+var TestModule = NativeModules.TestModule || NativeModules.SnapshotTestManager;
+
+var deepDiffer = require('deepDiffer');
+
+function debug() {
+  //console.log.apply(null, arguments);
+}
+
+type LayoutEvent = {
+  nativeEvent: {
+    layout: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+};
+
+var LayoutEventsTest = React.createClass({
+  getInitialState: function() {
+    return {
+      didAnimation: false,
+    };
+  },
+  animateViewLayout: function() {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.Presets.spring,
+      () => {
+        debug('layout animation done.');
+        this.checkLayout(this.addWrapText);
+      },
+      (error) => { throw new Error(JSON.stringify(error)); }
+    );
+    this.setState({viewStyle: {margin: 60}});
+  },
+  addWrapText: function() {
+    this.setState(
+      {extraText: '  And a bunch more text to wrap around a few lines.'},
+      () => this.checkLayout(this.changeContainer)
+    );
+  },
+  changeContainer: function() {
+    this.setState(
+      {containerStyle: {width: 280}},
+      () => this.checkLayout(TestModule.markTestCompleted)
+    );
+  },
+  checkLayout: function(next?: ?Function) {
+    if (!this.isMounted()) {
+      return;
+    }
+    this.refs.view.measure((x, y, width, height) => {
+      this.compare('view', {x, y, width, height}, this.state.viewLayout);
+      if (typeof next === 'function') {
+        next();
+      } else if (!this.state.didAnimation) {
+        // Trigger first state change after onLayout fires
+        this.animateViewLayout();
+        this.state.didAnimation = true;
+      }
+    });
+    this.refs.txt.measure((x, y, width, height) => {
+      this.compare('txt', {x, y, width, height}, this.state.textLayout);
+    });
+    this.refs.img.measure((x, y, width, height) => {
+      this.compare('img', {x, y, width, height}, this.state.imageLayout);
+    });
+  },
+  compare: function(node: string, measured: any, onLayout: any): void {
+    if (deepDiffer(measured, onLayout)) {
+      var data = {measured, onLayout};
+      throw new Error(
+        node + ' onLayout mismatch with measure ' +
+          JSON.stringify(data, null, '  ')
+      );
+    }
+  },
+  onViewLayout: function(e: LayoutEvent) {
+    debug('received view layout event\n', e.nativeEvent);
+    this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout);
+  },
+  onTextLayout: function(e: LayoutEvent) {
+    debug('received text layout event\n', e.nativeEvent);
+    this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout);
+  },
+  onImageLayout: function(e: LayoutEvent) {
+    debug('received image layout event\n', e.nativeEvent);
+    this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout);
+  },
+  render: function() {
+    var viewStyle = [styles.view, this.state.viewStyle];
+    var textLayout = this.state.textLayout || {width: '?', height: '?'};
+    var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
+    return (
+      <View style={[styles.container, this.state.containerStyle]}>
+        <View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
+          <Image
+            ref="img"
+            onLayout={this.onImageLayout}
+            style={styles.image}
+            source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
+          />
+          <Text>
+            ViewLayout: {JSON.stringify(this.state.viewLayout, null, '  ') + '\n\n'}
+          </Text>
+          <Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
+            A simple piece of text.{this.state.extraText}
+          </Text>
+          <Text>
+            {'\n'}
+            Text w/h: {textLayout.width}/{textLayout.height + '\n'}
+            Image x/y: {imageLayout.x}/{imageLayout.y}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    margin: 40,
+  },
+  view: {
+    margin: 20,
+    padding: 12,
+    borderColor: 'black',
+    borderWidth: 0.5,
+    backgroundColor: 'transparent',
+  },
+  text: {
+    alignSelf: 'flex-start',
+    borderColor: 'rgba(0, 0, 255, 0.2)',
+    borderWidth: 0.5,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    marginBottom: 10,
+    alignSelf: 'center',
+  },
+});
+
+module.exports = LayoutEventsTest;

Examples/UIExplorer/UIExplorerIntegrationTests/js/SimpleSnapshotTest.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+} = React;
+
+var { TestModule } = React.addons;
+
+var SimpleSnapshotTest = React.createClass({
+  componentDidMount() {
+    if (!TestModule.verifySnapshot) {
+      throw new Error('TestModule.verifySnapshot not defined.');
+    }
+    requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
+  },
+
+  done() {
+    TestModule.markTestCompleted();
+  },
+
+  render() {
+    return (
+      <View style={{backgroundColor: 'white', padding: 100}}>
+        <View style={styles.box1} />
+        <View style={styles.box2} />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  box1: {
+    width: 80,
+    height: 50,
+    backgroundColor: 'red',
+  },
+  box2: {
+    top: -10,
+    left: 20,
+    width: 70,
+    height: 90,
+    backgroundColor: 'blue',
+  },
+});
+
+module.exports = SimpleSnapshotTest;

Examples/UIExplorer/UIExplorerIntegrationTests/js/TimersTest.js

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+var RCTTestModule = require('NativeModules').TestModule;
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+var TimerMixin = require('react-timer-mixin');
+
+var TimersTest = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      count: 0,
+      done: false,
+    };
+  },
+
+  componentDidMount() {
+    this.testSetTimeout0();
+  },
+
+  testSetTimeout0() {
+    this.setTimeout(this.testSetTimeout1, 0);
+  },
+
+  testSetTimeout1() {
+    this.setTimeout(this.testSetTimeout50, 1);
+  },
+
+  testSetTimeout50() {
+    this.setTimeout(this.testRequestAnimationFrame, 50);
+  },
+
+  testRequestAnimationFrame() {
+    this.requestAnimationFrame(this.testSetInterval0);
+  },
+
+  testSetInterval0() {
+    this._nextTest = this.testSetInterval20;
+    this._interval = this.setInterval(this._incrementInterval, 0);
+  },
+
+  testSetInterval20() {
+    this._nextTest = this.testSetImmediate;
+    this._interval = this.setInterval(this._incrementInterval, 20);
+  },
+
+  testSetImmediate() {
+    this.setImmediate(this.testClearTimeout0);
+  },
+
+  testClearTimeout0() {
+    var timeout = this.setTimeout(() => this._fail('testClearTimeout0'), 0);
+    this.clearTimeout(timeout);
+    this.testClearTimeout30();
+  },
+
+  testClearTimeout30() {
+    var timeout = this.setTimeout(() => this._fail('testClearTimeout30'), 30);
+    this.clearTimeout(timeout);
+    this.setTimeout(this.testClearMulti, 50);
+  },
+
+  testClearMulti() {
+    var fails = [this.setTimeout(() => this._fail('testClearMulti-1'), 20)];
+    fails.push(this.setTimeout(() => this._fail('testClearMulti-2'), 50));
+    var delayClear = this.setTimeout(() => this._fail('testClearMulti-3'), 50);
+    fails.push(this.setTimeout(() => this._fail('testClearMulti-4'), 0));
+
+    this.setTimeout(this.testOrdering, 100); // Next test interleaved
+
+    fails.push(this.setTimeout(() => this._fail('testClearMulti-5'), 10));
+
+    fails.forEach((timeout) => this.clearTimeout(timeout));
+    this.setTimeout(() => this.clearTimeout(delayClear), 20);
+  },
+
+  testOrdering() {
+    // Clear timers are set first because it's more likely to uncover bugs.
+    var fail0;
+    this.setImmediate(() => this.clearTimeout(fail0));
+    fail0 = this.setTimeout(
+      () => this._fail('testOrdering-t0, setImmediate should happen before ' +
+        'setTimeout 0'),
+      0
+    );
+    var failAnim; // This should fail without the t=0 fastpath feature.
+    this.setTimeout(() => this.cancelAnimationFrame(failAnim), 0);
+    failAnim = this.requestAnimationFrame(
+      () => this._fail('testOrdering-Anim, setTimeout 0 should happen before ' +
+        'requestAnimationFrame')
+    );
+    var fail50;
+    this.setTimeout(() => this.clearTimeout(fail50), 20);
+    fail50 = this.setTimeout(
+      () => this._fail('testOrdering-t50, setTimeout 20 should happen before ' +
+        'setTimeout 50'),
+      50
+    );
+    this.setTimeout(this.done, 75);
+  },
+
+  done() {
+    this.setState({done: true}, RCTTestModule.markTestCompleted);
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>
+          {this.constructor.displayName + ': \n'}
+          Intervals: {this.state.count + '\n'}
+          {this.state.done ? 'Done' : 'Testing...'}
+        </Text>
+      </View>
+    );
+  },
+
+  _incrementInterval() {
+    if (this.state.count > 3) {
+      throw new Error('interval incremented past end.');
+    }
+    if (this.state.count === 3) {
+      this.clearInterval(this._interval);
+      this.setState({count: 0}, this._nextTest);
+      return;
+    }
+    this.setState({count: this.state.count + 1});
+  },
+
+  _fail(caller) {
+    throw new Error('_fail called by ' + caller);
+  },
+});
+
+var styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    padding: 40,
+  },
+});
+
+module.exports = TimersTest;