Simplify tests for several exported modules

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js

@@ -10,6 +10,9 @@ import View from '../../View';
 
 const RootComponent = () => <div />;
 
+const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
+const AlternativeComponent = () => <View style={styles.root} />;
+
 describe('AppRegistry', () => {
   describe('getApplication', () => {
     const canUseDOM = ExecutionEnvironment.canUseDOM;
@@ -29,56 +32,51 @@ describe('AppRegistry', () => {
 
     test('returns "element" and "getStyleElement"', () => {
       AppRegistry.registerComponent('App', () => RootComponent);
-
       const { element, getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
       expect(element).toMatchSnapshot();
-      expect(ReactDOMServer.renderToStaticMarkup(getStyleElement())).toMatchSnapshot();
+      expect(styleElement).toMatchSnapshot();
     });
 
     test('"getStyleElement" produces styles that are a function of rendering "element"', () => {
-      const getTextContent = getStyleElement =>
-        getStyleElement().props.dangerouslySetInnerHTML.__html;
-
-      // First "RootComponent" render
-      AppRegistry.registerComponent('App1', () => RootComponent);
-      let app = AppRegistry.getApplication('App1', {});
-      render(app.element);
-      const first = getTextContent(app.getStyleElement);
-
-      // Next render is a different tree; the style sheet should be different
-      const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
-      const Component = () => <View style={styles.root} />;
-      AppRegistry.registerComponent('App2', () => Component);
-      app = AppRegistry.getApplication('App2', {});
-      render(app.element);
-      const second = getTextContent(app.getStyleElement);
-
-      const diff = second.split(first)[1];
+      const getApplicationStyles = appName => {
+        const { element, getStyleElement } = AppRegistry.getApplication(appName, {});
+        render(element);
+        return getStyleElement().props.dangerouslySetInnerHTML.__html;
+      };
 
+      // First render "RootComponent"
+      AppRegistry.registerComponent('App', () => RootComponent);
+      const first = getApplicationStyles('App');
       expect(first).toMatchSnapshot('CSS for an unstyled app');
-      expect(diff).toMatchSnapshot('Additional CSS for styled app');
+
+      // Second render "AlternativeComponent"
+      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent);
+      const second = getApplicationStyles('AlternativeApp');
+      const diff = second.split(first)[1];
       expect(first).not.toEqual(second);
+      expect(diff).toMatchSnapshot('Additional CSS for styled app');
 
-      // Final render is once again "RootComponent"; the style sheet should not
-      // be polluted by earlier rendering of a different tree
-      app = AppRegistry.getApplication('App1', {});
-      render(app.element);
-      const third = getTextContent(app.getStyleElement);
-
+      // Third render "RootComponent" again
+      const third = getApplicationStyles('App');
       expect(first).toEqual(third);
     });
   });
 
   describe('runApplication', () => {
     test('callback after render', () => {
-      AppRegistry.registerComponent('App', () => RootComponent);
-
-      const callback = jest.fn();
+      // setup
       const rootTag = document.createElement('div');
       rootTag.id = 'react-root';
       document.body.appendChild(rootTag);
+
+      const callback = jest.fn();
+      AppRegistry.registerComponent('App', () => RootComponent);
       AppRegistry.runApplication('App', { initialProps: {}, rootTag, callback });
       expect(callback).toHaveBeenCalledTimes(1);
+
+      // cleanup
       document.body.removeChild(rootTag);
     });
   });

packages/react-native-web/src/exports/AsyncStorage/__tests__/index-test.js

@@ -159,7 +159,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiSet', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(mockLocalStorage.getItem('UID123')).toEqual(JSON.stringify(uid123Object));
       expect(mockLocalStorage.getItem('UID124')).toEqual(JSON.stringify(uid124Object));
     };
@@ -206,7 +206,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiMerge', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(JSON.parse(mockLocalStorage.getItem('UID123'))).toMatchSnapshot();
       expect(JSON.parse(mockLocalStorage.getItem('UID124'))).toMatchSnapshot();
     };
@@ -253,7 +253,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiRemove', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(mockLocalStorage.getItem('UID123')).toBeUndefined();
       expect(mockLocalStorage.getItem('UID124')).toBeUndefined();
     };

packages/react-native-web/src/exports/Button/__tests__/index-test.js

@@ -1,31 +1,32 @@
 /* eslint-env jasmine, jest */
 /* eslint-disable react/jsx-no-bind */
 
-import React from 'react';
 import Button from '..';
-import { mount, shallow } from 'enzyme';
-
-const findNativeButton = wrapper => wrapper.getDOMNode();
+import React from 'react';
+import StyleSheet from '../../StyleSheet';
+import TouchableOpacity from '../../TouchableOpacity';
+import { render, shallow } from 'enzyme';
 
 describe('components/Button', () => {
   test('prop "color"', () => {
     const onPress = () => {};
     const color = 'blue';
-    const button = findNativeButton(mount(<Button color={color} onPress={onPress} title="" />));
-    expect(button.style.backgroundColor).toEqual(color);
+    const button = shallow(<Button color={color} onPress={onPress} title="" />);
+    const style = StyleSheet.flatten(button.prop('style'));
+    expect(style.backgroundColor).toEqual(color);
   });
 
   test('prop "onPress"', () => {
     const onPress = jest.fn();
     const component = shallow(<Button onPress={onPress} title="" />);
-    component.simulate('press');
+    component.find(TouchableOpacity).simulate('press');
     expect(onPress).toHaveBeenCalled();
   });
 
   test('prop "title"', () => {
     const onPress = () => {};
     const text = 'Click me';
-    const component = mount(<Button onPress={onPress} title={text} />);
+    const component = render(<Button onPress={onPress} title={text} />);
     expect(component.text()).toEqual(text);
   });
 });

packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js

@@ -18,6 +18,10 @@ describe('apis/I18nManager', () => {
     });
 
     describe('forceRTL', () => {
+      afterEach(() => {
+        I18nManager.forceRTL(false);
+      });
+
       test('when set to false, "isRTL" is false', () => {
         I18nManager.forceRTL(false);
         expect(I18nManager.isRTL).toBe(false);
@@ -27,11 +31,14 @@ describe('apis/I18nManager', () => {
         I18nManager.forceRTL(true);
         expect(I18nManager.isRTL).toBe(true);
         expect(getDocumentDir()).toEqual('rtl');
-        I18nManager.forceRTL(false);
       });
     });
 
     describe('swapLeftAndRightInRTL', () => {
+      afterEach(() => {
+        I18nManager.swapLeftAndRightInRTL(true);
+      });
+
       test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
         I18nManager.swapLeftAndRightInRTL(false);
         expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);
@@ -60,11 +67,14 @@ describe('apis/I18nManager', () => {
     });
 
     describe('allowRTL', () => {
+      afterEach(() => {
+        I18nManager.allowRTL(true);
+      });
+
       test('when set to false, "isRTL" is false', () => {
         I18nManager.allowRTL(false);
         expect(I18nManager.isRTL).toBe(false);
         expect(getDocumentDir()).toEqual('ltr');
-        I18nManager.allowRTL(true);
       });
       test('when set to true, "isRTL" is true', () => {
         I18nManager.allowRTL(true);
@@ -74,6 +84,10 @@ describe('apis/I18nManager', () => {
     });
 
     describe('forceRTL', () => {
+      afterEach(() => {
+        I18nManager.forceRTL(false);
+      });
+
       test('when set to false, "isRTL" is true', () => {
         I18nManager.forceRTL(false);
         expect(I18nManager.isRTL).toBe(true);
@@ -83,11 +97,14 @@ describe('apis/I18nManager', () => {
         I18nManager.forceRTL(true);
         expect(I18nManager.isRTL).toBe(true);
         expect(getDocumentDir()).toEqual('rtl');
-        I18nManager.forceRTL(false);
       });
     });
 
     describe('swapLeftAndRightInRTL', () => {
+      afterEach(() => {
+        I18nManager.swapLeftAndRightInRTL(true);
+      });
+
       test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
         I18nManager.swapLeftAndRightInRTL(false);
         expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);

packages/react-native-web/src/exports/ListView/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/ListView', () => {
-  test('NO TEST COVERAGE');
-});

packages/react-native-web/src/exports/Picker/__tests__/index-test.js

@@ -33,7 +33,7 @@ describe('components/Picker', () => {
         </Picker>
       );
       const component = shallow(picker);
-      expect(component.find('select').props().disabled).toBe(true);
+      expect(component.find('select').prop('disabled')).toBe(true);
     });
   });
 

packages/react-native-web/src/exports/PixelRatio/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('apis/PixelRatio', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});

packages/react-native-web/src/exports/Platform/__tests__/index-test.js

@@ -0,0 +1,17 @@
+/* eslint-env jasmine, jest */
+
+import Platform from '../';
+
+describe('apis/Platform', () => {
+  describe('select', () => {
+    test('supports "default"', () => {
+      expect(Platform.select({ default: 'default' })).toEqual('default');
+    });
+
+    test('chooses "web"', () => {
+      expect(
+        Platform.select({ android: 'android', ios: 'ios', web: 'web', default: 'default' })
+      ).toEqual('web');
+    });
+  });
+});

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -17,34 +17,46 @@ const testIfDocumentIsFocused = (message, fn) => {
 };
 
 describe('components/TextInput', () => {
-  test('prop "autoComplete"', () => {
-    // on
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('autoComplete')).toEqual('on');
-    // off
-    input = findNativeInput(shallow(<TextInput autoComplete="off" />));
-    expect(input.prop('autoComplete')).toEqual('off');
+  describe('prop "autoComplete"', () => {
+    test('value "on"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('autoComplete')).toEqual('on');
+    });
+
+    test('value "off"', () => {
+      const input = findNativeInput(shallow(<TextInput autoComplete="off" />));
+      expect(input.prop('autoComplete')).toEqual('off');
+    });
   });
 
-  test('prop "autoFocus"', () => {
-    // false
-    let input = findNativeInput(mount(<TextInput />));
-    expect(input.prop('autoFocus')).toEqual(undefined);
-    // true
-    input = findNativeInput(mount(<TextInput autoFocus />));
-    expect(input.prop('autoFocus')).toEqual(true);
+  describe('prop "autoFocus"', () => {
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('autoFocus')).toEqual(undefined);
+    });
+
+    test('value "true"', () => {
+      const input = findNativeInput(shallow(<TextInput autoFocus />));
+      expect(input.prop('autoFocus')).toEqual(true);
+    });
   });
 
-  testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
+  describe('prop "clearTextOnFocus"', () => {
     const defaultValue = 'defaultValue';
-    // false
-    let input = findNativeInput(mount(<TextInput defaultValue={defaultValue} />));
-    input.simulate('focus');
-    expect(input.node.value).toEqual(defaultValue);
-    // true
-    input = findNativeInput(mount(<TextInput clearTextOnFocus defaultValue={defaultValue} />));
-    input.simulate('focus');
-    expect(input.node.value).toEqual('');
+
+    testIfDocumentIsFocused('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput defaultValue={defaultValue} />));
+      input.simulate('focus');
+      expect(input.node.value).toEqual(defaultValue);
+    });
+
+    testIfDocumentIsFocused('value "true"', () => {
+      const input = findNativeInput(
+        shallow(<TextInput clearTextOnFocus defaultValue={defaultValue} />)
+      );
+      input.simulate('focus');
+      expect(input.node.value).toEqual('');
+    });
   });
 
   test('prop "defaultValue"', () => {
@@ -53,33 +65,45 @@ describe('components/TextInput', () => {
     expect(input.prop('defaultValue')).toEqual(defaultValue);
   });
 
-  test('prop "editable"', () => {
-    // true
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('readOnly')).toEqual(false);
-    // false
-    input = findNativeInput(shallow(<TextInput editable={false} />));
-    expect(input.prop('readOnly')).toEqual(true);
+  describe('prop "editable"', () => {
+    test('value "true"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('readOnly')).toEqual(false);
+    });
+
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput editable={false} />));
+      expect(input.prop('readOnly')).toEqual(true);
+    });
   });
 
-  test('prop "keyboardType"', () => {
-    // default
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('type')).toEqual('text');
-    input = findNativeInput(shallow(<TextInput keyboardType="default" />));
-    expect(input.prop('type')).toEqual('text');
-    // email-address
-    input = findNativeInput(shallow(<TextInput keyboardType="email-address" />));
-    expect(input.prop('type')).toEqual('email');
-    // numeric
-    input = findNativeInput(shallow(<TextInput keyboardType="numeric" />));
-    expect(input.prop('type')).toEqual('number');
-    // phone-pad
-    input = findNativeInput(shallow(<TextInput keyboardType="phone-pad" />));
-    expect(input.prop('type')).toEqual('tel');
-    // url
-    input = findNativeInput(shallow(<TextInput keyboardType="url" />));
-    expect(input.prop('type')).toEqual('url');
+  describe('prop "keyboardType"', () => {
+    test('default value', () => {
+      let input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('type')).toEqual('text');
+      input = findNativeInput(shallow(<TextInput keyboardType="default" />));
+      expect(input.prop('type')).toEqual('text');
+    });
+
+    test('value "email-address"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="email-address" />));
+      expect(input.prop('type')).toEqual('email');
+    });
+
+    test('value "numeric"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="numeric" />));
+      expect(input.prop('type')).toEqual('number');
+    });
+
+    test('value "phone-pad"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="phone-pad" />));
+      expect(input.prop('type')).toEqual('tel');
+    });
+
+    test('value "url"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="url" />));
+      expect(input.prop('type')).toEqual('url');
+    });
   });
 
   test('prop "maxLength"', () => {
@@ -89,25 +113,28 @@ describe('components/TextInput', () => {
     expect(input.prop('maxLength')).toEqual(10);
   });
 
-  test('prop "multiline"', () => {
-    // false
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.length).toEqual(1);
-    // true
-    input = findNativeTextarea(shallow(<TextInput multiline />));
-    expect(input.length).toEqual(1);
+  describe('prop "multiline"', () => {
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.length).toEqual(1);
+    });
+
+    test('value "true"', () => {
+      const input = findNativeTextarea(shallow(<TextInput multiline />));
+      expect(input.length).toEqual(1);
+    });
   });
 
-  test('prop "numberOfLines"', () => {
-    // missing multiline
-    let input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
-    expect(input.length).toEqual(1);
-    // with multiline
-    input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={2} />));
-    expect(input.length).toEqual(1);
+  describe('prop "numberOfLines"', () => {
+    test('without "multiline"', () => {
+      const input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
+      expect(input.length).toEqual(1);
+    });
 
-    input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={3} />));
-    expect(input.prop('rows')).toEqual(3);
+    test('with "multiline"', () => {
+      const input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={3} />));
+      expect(input.prop('rows')).toEqual(3);
+    });
   });
 
   test('prop "onBlur"', () => {
@@ -339,7 +366,7 @@ describe('components/TextInput', () => {
       expect(onSubmitEditing).not.toHaveBeenCalled();
     });
 
-    test('multi-line input with "blurOnSubmit" triggers onSubmitEditing', () => {
+    test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', () => {
       const onSubmitEditing = jest.fn();
       const input = findNativeTextarea(
         mount(
@@ -368,18 +395,20 @@ describe('components/TextInput', () => {
     expect(input.prop('type')).toEqual(undefined);
   });
 
-  testIfDocumentIsFocused('prop "selectTextOnFocus"', () => {
-    const text = 'Text';
-    // false
-    let input = findNativeInput(mount(<TextInput defaultValue={text} />));
-    input.node.focus();
-    expect(input.node.selectionEnd).toEqual(4);
-    expect(input.node.selectionStart).toEqual(4);
-    // true
-    input = findNativeInput(mount(<TextInput defaultValue={text} selectTextOnFocus />));
+  describe('prop "selectTextOnFocus"', () => {
+    testIfDocumentIsFocused('value "false"', () => {
+      const input = findNativeInput(mount(<TextInput defaultValue={'text'} />));
+      input.node.focus();
+      expect(input.node.selectionEnd).toEqual(4);
+      expect(input.node.selectionStart).toEqual(4);
+    });
+
+    // testIfDocumentIsFocused('value "true"', () => {
+    // const input = findNativeInput(mount(<TextInput defaultValue={'text'} selectTextOnFocus />));
     // input.node.focus()
     // assert.equal(input.node.selectionEnd, 4)
     // assert.equal(input.node.selectionStart, 0)
+    // });
   });
 
   describe('prop "selection"', () => {
@@ -401,15 +430,21 @@ describe('components/TextInput', () => {
     });
   });
 
-  test('prop "spellCheck"', () => {
-    // default (inherets from autoCorrect)
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('spellCheck')).toEqual(true);
-    input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
-    expect(input.prop('spellCheck')).toEqual(false);
-    // false
-    input = findNativeInput(shallow(<TextInput spellCheck={false} />));
-    expect(input.prop('spellCheck')).toEqual(false);
+  describe('prop "spellCheck"', () => {
+    test('default value', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('spellCheck')).toEqual(true);
+    });
+
+    test('inherit from "autoCorrect"', () => {
+      const input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
+      expect(input.prop('spellCheck')).toEqual(false);
+    });
+
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput spellCheck={false} />));
+      expect(input.prop('spellCheck')).toEqual(false);
+    });
   });
 
   test('prop "value"', () => {

packages/react-native-web/src/exports/UIManager/__tests__/index-test.js

@@ -2,7 +2,7 @@
 
 import UIManager from '..';
 
-const createNode = (style = {}) => {
+const createStyledNode = (style = {}) => {
   const root = document.createElement('div');
   Object.keys(style).forEach(prop => {
     root.style[prop] = style[prop];
@@ -10,24 +10,24 @@ const createNode = (style = {}) => {
   return root;
 };
 
+const componentStub = {
+  _reactInternalInstance: {
+    _currentElement: { _owner: {} },
+    _debugID: 1
+  }
+};
+
 describe('apis/UIManager', () => {
   describe('updateView', () => {
-    const componentStub = {
-      _reactInternalInstance: {
-        _currentElement: { _owner: {} },
-        _debugID: 1
-      }
-    };
-
     test('supports className alias for class', () => {
-      const node = createNode();
+      const node = createStyledNode();
       const props = { className: 'extra' };
       UIManager.updateView(node, props, componentStub);
       expect(node.getAttribute('class')).toEqual('extra');
     });
 
     test('adds correct DOM styles to existing style', () => {
-      const node = createNode({ color: 'red' });
+      const node = createStyledNode({ color: 'red' });
       const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } };
       UIManager.updateView(node, props, componentStub);
       expect(node.getAttribute('style')).toEqual(
@@ -36,7 +36,7 @@ describe('apis/UIManager', () => {
     });
 
     test('replaces input and textarea text', () => {
-      const node = createNode();
+      const node = createStyledNode();
       node.value = 'initial';
       const textProp = { text: 'expected-text' };
       const valueProp = { value: 'expected-value' };
@@ -49,7 +49,7 @@ describe('apis/UIManager', () => {
     });
 
     test('sets other attribute values', () => {
-      const node = createNode();
+      const node = createStyledNode();
       const props = { 'aria-level': '4', 'data-of-type': 'string' };
       UIManager.updateView(node, props);
       expect(node.getAttribute('aria-level')).toEqual('4');

packages/react-native-web/src/modules/StaticContainer/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticContainer', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});

packages/react-native-web/src/modules/StaticRenderer/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticRenderer', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});