diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
index cab2ebdf..03eafccd 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -10,6 +10,9 @@ import View from '../../View';
const RootComponent = () =>
;
+const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
+const AlternativeComponent = () => ;
+
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 = () => ;
- 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);
});
});
diff --git a/packages/react-native-web/src/exports/AsyncStorage/__tests__/index-test.js b/packages/react-native-web/src/exports/AsyncStorage/__tests__/index-test.js
index 9635de5b..102489ea 100644
--- a/packages/react-native-web/src/exports/AsyncStorage/__tests__/index-test.js
+++ b/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();
};
diff --git a/packages/react-native-web/src/exports/Button/__tests__/index-test.js b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
index a6307d39..85b2ebf6 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/index-test.js
+++ b/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());
- expect(button.style.backgroundColor).toEqual(color);
+ const button = shallow();
+ const style = StyleSheet.flatten(button.prop('style'));
+ expect(style.backgroundColor).toEqual(color);
});
test('prop "onPress"', () => {
const onPress = jest.fn();
const component = shallow();
- component.simulate('press');
+ component.find(TouchableOpacity).simulate('press');
expect(onPress).toHaveBeenCalled();
});
test('prop "title"', () => {
const onPress = () => {};
const text = 'Click me';
- const component = mount();
+ const component = render();
expect(component.text()).toEqual(text);
});
});
diff --git a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js
index dc1424ed..d4a84392 100644
--- a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js
+++ b/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);
diff --git a/packages/react-native-web/src/exports/ListView/__tests__/index-test.js b/packages/react-native-web/src/exports/ListView/__tests__/index-test.js
deleted file mode 100644
index 84163662..00000000
--- a/packages/react-native-web/src/exports/ListView/__tests__/index-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/ListView', () => {
- test('NO TEST COVERAGE');
-});
diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
index 649e7b34..2d590dab 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
@@ -33,7 +33,7 @@ describe('components/Picker', () => {
);
const component = shallow(picker);
- expect(component.find('select').props().disabled).toBe(true);
+ expect(component.find('select').prop('disabled')).toBe(true);
});
});
diff --git a/packages/react-native-web/src/exports/PixelRatio/__tests__/index-test.js b/packages/react-native-web/src/exports/PixelRatio/__tests__/index-test.js
deleted file mode 100644
index a3f42d1a..00000000
--- a/packages/react-native-web/src/exports/PixelRatio/__tests__/index-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('apis/PixelRatio', () => {
- test.skip('NO TEST COVERAGE', () => {});
-});
diff --git a/packages/react-native-web/src/exports/Platform/__tests__/index-test.js b/packages/react-native-web/src/exports/Platform/__tests__/index-test.js
new file mode 100644
index 00000000..6feb981e
--- /dev/null
+++ b/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');
+ });
+ });
+});
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 498dc0cf..93a9cb4a 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/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());
- expect(input.prop('autoComplete')).toEqual('on');
- // off
- input = findNativeInput(shallow());
- expect(input.prop('autoComplete')).toEqual('off');
+ describe('prop "autoComplete"', () => {
+ test('value "on"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('autoComplete')).toEqual('on');
+ });
+
+ test('value "off"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('autoComplete')).toEqual('off');
+ });
});
- test('prop "autoFocus"', () => {
- // false
- let input = findNativeInput(mount());
- expect(input.prop('autoFocus')).toEqual(undefined);
- // true
- input = findNativeInput(mount());
- expect(input.prop('autoFocus')).toEqual(true);
+ describe('prop "autoFocus"', () => {
+ test('value "false"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('autoFocus')).toEqual(undefined);
+ });
+
+ test('value "true"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('autoFocus')).toEqual(true);
+ });
});
- testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
+ describe('prop "clearTextOnFocus"', () => {
const defaultValue = 'defaultValue';
- // false
- let input = findNativeInput(mount());
- input.simulate('focus');
- expect(input.node.value).toEqual(defaultValue);
- // true
- input = findNativeInput(mount());
- input.simulate('focus');
- expect(input.node.value).toEqual('');
+
+ testIfDocumentIsFocused('value "false"', () => {
+ const input = findNativeInput(shallow());
+ input.simulate('focus');
+ expect(input.node.value).toEqual(defaultValue);
+ });
+
+ testIfDocumentIsFocused('value "true"', () => {
+ const input = findNativeInput(
+ shallow()
+ );
+ 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());
- expect(input.prop('readOnly')).toEqual(false);
- // false
- input = findNativeInput(shallow());
- expect(input.prop('readOnly')).toEqual(true);
+ describe('prop "editable"', () => {
+ test('value "true"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('readOnly')).toEqual(false);
+ });
+
+ test('value "false"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('readOnly')).toEqual(true);
+ });
});
- test('prop "keyboardType"', () => {
- // default
- let input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('text');
- input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('text');
- // email-address
- input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('email');
- // numeric
- input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('number');
- // phone-pad
- input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('tel');
- // url
- input = findNativeInput(shallow());
- expect(input.prop('type')).toEqual('url');
+ describe('prop "keyboardType"', () => {
+ test('default value', () => {
+ let input = findNativeInput(shallow());
+ expect(input.prop('type')).toEqual('text');
+ input = findNativeInput(shallow());
+ expect(input.prop('type')).toEqual('text');
+ });
+
+ test('value "email-address"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('type')).toEqual('email');
+ });
+
+ test('value "numeric"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('type')).toEqual('number');
+ });
+
+ test('value "phone-pad"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('type')).toEqual('tel');
+ });
+
+ test('value "url"', () => {
+ const input = findNativeInput(shallow());
+ 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());
- expect(input.length).toEqual(1);
- // true
- input = findNativeTextarea(shallow());
- expect(input.length).toEqual(1);
+ describe('prop "multiline"', () => {
+ test('value "false"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.length).toEqual(1);
+ });
+
+ test('value "true"', () => {
+ const input = findNativeTextarea(shallow());
+ expect(input.length).toEqual(1);
+ });
});
- test('prop "numberOfLines"', () => {
- // missing multiline
- let input = findNativeInput(shallow());
- expect(input.length).toEqual(1);
- // with multiline
- input = findNativeTextarea(shallow());
- expect(input.length).toEqual(1);
+ describe('prop "numberOfLines"', () => {
+ test('without "multiline"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.length).toEqual(1);
+ });
- input = findNativeTextarea(shallow());
- expect(input.prop('rows')).toEqual(3);
+ test('with "multiline"', () => {
+ const input = findNativeTextarea(shallow());
+ 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());
- input.node.focus();
- expect(input.node.selectionEnd).toEqual(4);
- expect(input.node.selectionStart).toEqual(4);
- // true
- input = findNativeInput(mount());
+ describe('prop "selectTextOnFocus"', () => {
+ testIfDocumentIsFocused('value "false"', () => {
+ const input = findNativeInput(mount());
+ input.node.focus();
+ expect(input.node.selectionEnd).toEqual(4);
+ expect(input.node.selectionStart).toEqual(4);
+ });
+
+ // testIfDocumentIsFocused('value "true"', () => {
+ // const input = findNativeInput(mount());
// 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());
- expect(input.prop('spellCheck')).toEqual(true);
- input = findNativeInput(shallow());
- expect(input.prop('spellCheck')).toEqual(false);
- // false
- input = findNativeInput(shallow());
- expect(input.prop('spellCheck')).toEqual(false);
+ describe('prop "spellCheck"', () => {
+ test('default value', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('spellCheck')).toEqual(true);
+ });
+
+ test('inherit from "autoCorrect"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('spellCheck')).toEqual(false);
+ });
+
+ test('value "false"', () => {
+ const input = findNativeInput(shallow());
+ expect(input.prop('spellCheck')).toEqual(false);
+ });
});
test('prop "value"', () => {
diff --git a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
index ce77ffbb..80bb0c29 100644
--- a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
+++ b/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');
diff --git a/packages/react-native-web/src/modules/StaticContainer/__tests__/index-test.js b/packages/react-native-web/src/modules/StaticContainer/__tests__/index-test.js
deleted file mode 100644
index 93a298e6..00000000
--- a/packages/react-native-web/src/modules/StaticContainer/__tests__/index-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticContainer', () => {
- test.skip('NO TEST COVERAGE', () => {});
-});
diff --git a/packages/react-native-web/src/modules/StaticRenderer/__tests__/index-test.js b/packages/react-native-web/src/modules/StaticRenderer/__tests__/index-test.js
deleted file mode 100644
index 4ebb8957..00000000
--- a/packages/react-native-web/src/modules/StaticRenderer/__tests__/index-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticRenderer', () => {
- test.skip('NO TEST COVERAGE', () => {});
-});