kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use jest for testing

Browse Source 
Thanks to @paularmstrong:
https://github.com/necolas/react-native-web/pull/249
This commit is contained in:
Nicolas Gallagher
2016-11-09 09:52:49 -08:00
parent 4beae0dd78
commit fa14995a35
45 changed files with 3273 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
karma.config.js
View File

@@ -1,62 +0,0 @@
const webpack = require('webpack')
const testEntry = 'src/tests.webpack.js'
module.exports = function (config) {
config.set({
browsers: process.env.TRAVIS ? [ 'Firefox' ] : [ 'Chrome' ],
browserNoActivityTimeout: 60000,
client: {
captureConsole: true,
mocha: { ui: 'tdd' },
useIframe: true
},
files: [
testEntry
],
frameworks: [ 'mocha' ],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-mocha',
'karma-mocha-reporter',
'karma-sourcemap-loader',
'karma-webpack'
],
preprocessors: {
[testEntry]: [ 'webpack', 'sourcemap' ]
},
reporters: process.env.TRAVIS ? [ 'dots' ] : [ 'mocha' ],
singleRun: true,
webpack: {
devtool: 'inline-source-map',
// required by 'enzyme'
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { cacheDirectory: true }
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('test')
}
})
]
},
webpackServer: {
noInfo: true
}
})
}

29
package.json
View File

@@ -14,8 +14,8 @@
"examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
"lint": "eslint src",
"prepublish": "npm run build && npm run build:umd",
"test": "karma start karma.config.js",
"test:watch": "npm run test -- --no-single-run"
"test": "jest",
"test:watch": "npm run test -- --watch"
},
"dependencies": {
"animated": "^0.1.3",
@@ -23,7 +23,7 @@
"fbjs": "^0.8.4",
"inline-style-prefixer": "^2.0.1",
"lodash": "^4.15.0",
"react-dom": "^15.3.1",
"react-dom": "^15.3.2",
"react-textarea-autosize": "^4.0.4",
"react-timer-mixin": "^0.13.3"
},
@@ -41,23 +41,16 @@
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-react": "^6.1.2",
"file-loader": "^0.9.0",
"karma": "^1.2.0",
"karma-browserstack-launcher": "^1.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.1.1",
"karma-mocha-reporter": "^2.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.0.2",
"jest": "^16.0.2",
"node-libs-browser": "^0.5.3",
"react": "^15.3.1",
"react-addons-test-utils": "^15.3.1",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",
"react-test-renderer": "^15.3.2",
"url-loader": "^0.5.7",
"webpack": "^1.13.2"
},
"peerDependencies": {
"react": "^15.3.1"
"react": "^15.3.2"
},
"author": "Nicolas Gallagher",
"license": "BSD-3-Clause",
@@ -73,5 +66,9 @@
"react-component",
"react-native",
"web"
]
],
"jest": {
"testEnvironment": "jsdom",
"timers": "fake"
}
}

0
src/apis/AppRegistry/__tests__/index-test.js
View File

9
src/apis/AppRegistry/__tests__/renderApplication-test.js
View File

@@ -1,16 +1,15 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import { prerenderApplication } from '../renderApplication';
import React from 'react';
const component = () => <div />;
suite('apis/AppRegistry/renderApplication', () => {
describe('apis/AppRegistry/renderApplication', () => {
test('prerenderApplication', () => {
const { html, styleElement } = prerenderApplication(component, {});
assert.ok(html.indexOf('<div ') > -1);
assert.equal(styleElement.type, 'style');
expect(html.indexOf('<div ') > -1).toBeTruthy();
expect(styleElement.type).toEqual('style');
});
});

21
src/apis/AppState/__tests__/index-test.js
View File

@@ -1,31 +1,30 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import AppState from '..';
import assert from 'assert';
suite('apis/AppState', () => {
describe('apis/AppState', () => {
const handler = () => {};
teardown(() => {
afterEach(() => {
try { AppState.removeEventListener('change', handler); } catch (e) {}
});
suite('addEventListener', () => {
describe('addEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
assert.throws(() => AppState.addEventListener('foo', handler));
assert.doesNotThrow(() => AppState.addEventListener('change', handler));
expect(() => AppState.addEventListener('foo', handler)).toThrow();
expect(() => AppState.addEventListener('change', handler)).not.toThrow();
});
});
suite('removeEventListener', () => {
describe('removeEventListener', () => {
test('throws if the handler is not registered', () => {
assert.throws(() => AppState.removeEventListener('change', handler));
expect(() => AppState.removeEventListener('change', handler)).toThrow();
});
test('throws if the provided "eventType" is not supported', () => {
AppState.addEventListener('change', handler);
assert.throws(() => AppState.removeEventListener('foo', handler));
assert.doesNotThrow(() => AppState.removeEventListener('change', handler));
expect(() => AppState.removeEventListener('foo', handler)).toThrow();
expect(() => AppState.removeEventListener('change', handler)).not.toThrow();
});
});
});

11
src/apis/AsyncStorage/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,11 @@
exports[`apis/AsyncStorage mergeLocalStorageItem should have same behavior as react-native 1`] = `
Object {
"age": 31,
"name": "Chris",
"traits": Object {
"eyes": "blue",
"hair": "brown",
"shoe_size": 10,
},
}
`;

29
src/apis/AsyncStorage/__tests__/index-test.js
View File

@@ -1,5 +1,4 @@
/* eslint-env mocha */
import assert from 'assert';
/* eslint-env jasmine, jest */
import AsyncStorage from '..';
const waterfall = (fns, cb) => {
@@ -20,9 +19,21 @@ const waterfall = (fns, cb) => {
_waterfall();
};
suite('apis/AsyncStorage', () => {
suite('mergeLocalStorageItem', () => {
const obj = {};
const mockLocalStorage = {
getItem(key) {
return obj[key];
},
setItem(key, value) {
obj[key] = value;
}
};
const originalLocalStorage = window.localStorage;
describe('apis/AsyncStorage', () => {
describe('mergeLocalStorageItem', () => {
test('should have same behavior as react-native', (done) => {
window.localStorage = mockLocalStorage;
// https://facebook.github.io/react-native/docs/asyncstorage.html
const UID123_object = {
name: 'Chris',
@@ -33,6 +44,7 @@ suite('apis/AsyncStorage', () => {
age: 31,
traits: { eyes: 'blue', shoe_size: 10 }
};
waterfall([
(cb) => {
AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
@@ -52,12 +64,9 @@ suite('apis/AsyncStorage', () => {
.catch(cb);
}
], (err, result) => {
assert.equal(err, null);
assert.deepEqual(result, {
'name': 'Chris', 'age': 31, 'traits': {
'shoe_size': 10, 'hair': 'brown', 'eyes': 'blue'
}
});
expect(err).toEqual(null);
expect(result).toMatchSnapshot();
window.localStorage = originalLocalStorage;
done();
});
});

4
src/apis/Dimensions/__tests__/index-test.js
View File

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

31
src/apis/I18nManager/__tests__/index-test.js
View File

@@ -1,45 +1,44 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import I18nManager from '..';
suite('apis/I18nManager', () => {
suite('when RTL not enabled', () => {
setup(() => {
describe('apis/I18nManager', () => {
describe('when RTL not enabled', () => {
beforeEach(() => {
I18nManager.setPreferredLanguageRTL(false);
});
test('is "false" by default', () => {
assert.equal(I18nManager.isRTL, false);
assert.equal(document.documentElement.getAttribute('dir'), 'ltr');
expect(I18nManager.isRTL).toEqual(false);
expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
});
test('is "true" when forced', () => {
I18nManager.forceRTL(true);
assert.equal(I18nManager.isRTL, true);
assert.equal(document.documentElement.getAttribute('dir'), 'rtl');
expect(I18nManager.isRTL).toEqual(true);
expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
I18nManager.forceRTL(false);
});
});
suite('when RTL is enabled', () => {
setup(() => {
describe('when RTL is enabled', () => {
beforeEach(() => {
I18nManager.setPreferredLanguageRTL(true);
});
teardown(() => {
afterEach(() => {
I18nManager.setPreferredLanguageRTL(false);
});
test('is "true" by default', () => {
assert.equal(I18nManager.isRTL, true);
assert.equal(document.documentElement.getAttribute('dir'), 'rtl');
expect(I18nManager.isRTL).toEqual(true);
expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
});
test('is "false" when not allowed', () => {
I18nManager.allowRTL(false);
assert.equal(I18nManager.isRTL, false);
assert.equal(document.documentElement.getAttribute('dir'), 'ltr');
expect(I18nManager.isRTL).toEqual(false);
expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
I18nManager.allowRTL(true);
});
});

23
src/apis/NetInfo/__tests__/index-test.js
View File

@@ -1,32 +1,31 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import NetInfo from '..';
suite('apis/NetInfo', () => {
suite('isConnected', () => {
describe('apis/NetInfo', () => {
describe('isConnected', () => {
const handler = () => {};
teardown(() => {
afterEach(() => {
try { NetInfo.isConnected.removeEventListener('change', handler); } catch (e) {}
});
suite('addEventListener', () => {
describe('addEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
assert.throws(() => NetInfo.isConnected.addEventListener('foo', handler));
assert.doesNotThrow(() => NetInfo.isConnected.addEventListener('change', handler));
expect(() => NetInfo.isConnected.addEventListener('foo', handler)).toThrow();
expect(() => NetInfo.isConnected.addEventListener('change', handler)).not.toThrow();
});
});
suite('removeEventListener', () => {
describe('removeEventListener', () => {
test('throws if the handler is not registered', () => {
assert.throws(() => NetInfo.isConnected.removeEventListener('change', handler));
expect(() => NetInfo.isConnected.removeEventListener('change', handler)).toThrow;
});
test('throws if the provided "eventType" is not supported', () => {
NetInfo.isConnected.addEventListener('change', handler);
assert.throws(() => NetInfo.isConnected.removeEventListener('foo', handler));
assert.doesNotThrow(() => NetInfo.isConnected.removeEventListener('change', handler));
expect(() => NetInfo.isConnected.removeEventListener('foo', handler)).toThrow;
expect(() => NetInfo.isConnected.removeEventListener('change', handler)).not.toThrow;
});
});
});

4
src/apis/PixelRatio/__tests__/index-test.js
View File

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

18
src/apis/StyleSheet/__tests__/__snapshots__/expandStyle-test.js.snap Normal file
View File

@@ -0,0 +1,18 @@
exports[`apis/StyleSheet/expandStyle shortform -> longform 1`] = `
Object {
"borderBottomColor": "white",
"borderBottomStyle": "solid",
"borderBottomWidth": "1px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"marginBottom": "25px",
"marginLeft": "10px",
"marginRight": "10px",
"marginTop": "50px",
}
`;

107
src/apis/StyleSheet/__tests__/__snapshots__/i18nStyle-test.js.snap Normal file
View File

@@ -0,0 +1,107 @@
exports[`apis/StyleSheet/i18nStyle LTR mode does not auto-flip 1`] = `
Object {
"borderBottomLeftRadius": 20,
"borderBottomRightRadius": "2rem",
"borderLeftColor": "red",
"borderLeftStyle": "solid",
"borderLeftWidth": 5,
"borderRightColor": "blue",
"borderRightStyle": "dotted",
"borderRightWidth": 6,
"borderTopLeftRadius": 10,
"borderTopRightRadius": "1rem",
"left": 1,
"marginLeft": 7,
"marginRight": 8,
"paddingLeft": 9,
"paddingRight": 10,
"right": 2,
"textAlign": "left",
"textShadowOffset": Object {
"height": 10,
"width": "1rem",
},
"writingDirection": "ltr",
}
`;
exports[`apis/StyleSheet/i18nStyle LTR mode normalizes properties 1`] = `
Object {
"borderBottomLeftRadius": 20,
"borderBottomRightRadius": "2rem",
"borderLeftColor": "red",
"borderLeftStyle": "solid",
"borderLeftWidth": 5,
"borderRightColor": "blue",
"borderRightStyle": "dotted",
"borderRightWidth": 6,
"borderTopLeftRadius": 10,
"borderTopRightRadius": "1rem",
"left": 1,
"marginLeft": 7,
"marginRight": 8,
"paddingLeft": 9,
"paddingRight": 10,
"right": 2,
"textAlign": "left",
"textShadowOffset": Object {
"height": 10,
"width": "1rem",
},
"writingDirection": "ltr",
}
`;
exports[`apis/StyleSheet/i18nStyle RTL mode does auto-flip 1`] = `
Object {
"borderBottomLeftRadius": "2rem",
"borderBottomRightRadius": 20,
"borderLeftColor": "blue",
"borderLeftStyle": "dotted",
"borderLeftWidth": 6,
"borderRightColor": "red",
"borderRightStyle": "solid",
"borderRightWidth": 5,
"borderTopLeftRadius": "1rem",
"borderTopRightRadius": 10,
"left": 2,
"marginLeft": 8,
"marginRight": 7,
"paddingLeft": 10,
"paddingRight": 9,
"right": 1,
"textAlign": "right",
"textShadowOffset": Object {
"height": 10,
"width": "-1rem",
},
"writingDirection": "rtl",
}
`;
exports[`apis/StyleSheet/i18nStyle RTL mode normalizes properties 1`] = `
Object {
"borderBottomLeftRadius": 20,
"borderBottomRightRadius": "2rem",
"borderLeftColor": "red",
"borderLeftStyle": "solid",
"borderLeftWidth": 5,
"borderRightColor": "blue",
"borderRightStyle": "dotted",
"borderRightWidth": 6,
"borderTopLeftRadius": 10,
"borderTopRightRadius": "1rem",
"left": 1,
"marginLeft": 7,
"marginRight": 8,
"paddingLeft": 9,
"paddingRight": 10,
"right": 2,
"textAlign": "left",
"textShadowOffset": Object {
"height": 10,
"width": "-1rem",
},
"writingDirection": "ltr",
}
`;

10
src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,10 @@
exports[`apis/StyleSheet resolve 1`] = `
Object {
"className": "test __style_df __style_pebn",
"style": Object {
"display": null,
"opacity": 1,
"pointerEvents": null,
},
}
`;

7
src/apis/StyleSheet/__tests__/createReactStyleObject-test.js
View File

@@ -1,13 +1,12 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import createReactStyleObject from '../createReactStyleObject';
suite('apis/StyleSheet/createReactStyleObject', () => {
describe('apis/StyleSheet/createReactStyleObject', () => {
test('converts ReactNative style to ReactDOM style', () => {
const reactNativeStyle = { display: 'flex', marginVertical: 0, opacity: 0 };
const expectedStyle = { display: 'flex', marginTop: '0px', marginBottom: '0px', opacity: 0 };
assert.deepEqual(createReactStyleObject(reactNativeStyle), expectedStyle);
expect(createReactStyleObject(reactNativeStyle)).toEqual(expectedStyle);
});
});

30
src/apis/StyleSheet/__tests__/expandStyle-test.js
View File

@@ -1,11 +1,10 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import expandStyle from '../expandStyle';
suite('apis/StyleSheet/expandStyle', () => {
describe('apis/StyleSheet/expandStyle', () => {
test('shortform -> longform', () => {
const initial = {
const style = {
borderStyle: 'solid',
boxSizing: 'border-box',
borderBottomColor: 'white',
@@ -16,24 +15,7 @@ suite('apis/StyleSheet/expandStyle', () => {
margin: 10
};
const expected = {
borderBottomStyle: 'solid',
borderLeftStyle: 'solid',
borderRightStyle: 'solid',
boxSizing: 'border-box',
borderBottomColor: 'white',
borderTopStyle: 'solid',
borderTopWidth: '0px',
borderLeftWidth: '0px',
borderRightWidth: '0px',
borderBottomWidth: '1px',
marginTop: '50px',
marginBottom: '25px',
marginLeft: '10px',
marginRight: '10px'
};
assert.deepEqual(expandStyle(initial), expected);
expect(expandStyle(style)).toMatchSnapshot();
});
test('textAlignVertical', () => {
@@ -45,7 +27,7 @@ suite('apis/StyleSheet/expandStyle', () => {
verticalAlign: 'middle'
};
assert.deepEqual(expandStyle(initial), expected);
expect(expandStyle(initial)).toEqual(expected);
});
test('flex', () => {
@@ -61,6 +43,6 @@ suite('apis/StyleSheet/expandStyle', () => {
flexBasis: 'auto'
};
assert.deepEqual(expandStyle(initial), expected);
expect(expandStyle(initial)).toEqual(expected);
});
});

53
src/apis/StyleSheet/__tests__/i18nStyle-test.js
View File

@@ -1,10 +1,9 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import I18nManager from '../../I18nManager';
import i18nStyle from '../i18nStyle';
const initial = {
const style = {
borderLeftColor: 'red',
borderRightColor: 'blue',
borderTopLeftRadius: 10,
@@ -26,66 +25,44 @@ const initial = {
writingDirection: 'ltr'
};
const initialNoI18n = Object.keys(initial).reduce((acc, prop) => {
const styleNoI18n = Object.keys(style).reduce((acc, prop) => {
const newProp = `${prop}$noI18n`;
acc[newProp] = initial[prop];
acc[newProp] = style[prop];
return acc;
}, {});
const expected = {
borderLeftColor: 'blue',
borderRightColor: 'red',
borderTopLeftRadius: '1rem',
borderTopRightRadius: 10,
borderBottomLeftRadius: '2rem',
borderBottomRightRadius: 20,
borderLeftStyle: 'dotted',
borderRightStyle: 'solid',
borderLeftWidth: 6,
borderRightWidth: 5,
left: 2,
marginLeft: 8,
marginRight: 7,
paddingLeft: 10,
paddingRight: 9,
right: 1,
textAlign: 'right',
textShadowOffset: { width: '-1rem', height: 10 },
writingDirection: 'rtl'
};
suite('apis/StyleSheet/i18nStyle', () => {
suite('LTR mode', () => {
setup(() => {
describe('apis/StyleSheet/i18nStyle', () => {
describe('LTR mode', () => {
beforeEach(() => {
I18nManager.allowRTL(false);
});
teardown(() => {
afterEach(() => {
I18nManager.allowRTL(true);
});
test('does not auto-flip', () => {
assert.deepEqual(i18nStyle(initial), initial);
expect(i18nStyle(style)).toMatchSnapshot();
});
test('normalizes properties', () => {
assert.deepEqual(i18nStyle(initialNoI18n), initial);
expect(i18nStyle(styleNoI18n)).toMatchSnapshot();
});
});
suite('RTL mode', () => {
setup(() => {
describe('RTL mode', () => {
beforeEach(() => {
I18nManager.forceRTL(true);
});
teardown(() => {
afterEach(() => {
I18nManager.forceRTL(false);
});
test('does auto-flip', () => {
assert.deepEqual(i18nStyle(initial), expected);
expect(i18nStyle(style)).toMatchSnapshot();
});
test('normalizes properties', () => {
assert.deepEqual(i18nStyle(initialNoI18n), initial);
expect(i18nStyle(styleNoI18n)).toMatchSnapshot();
});
});
});

53
src/apis/StyleSheet/__tests__/index-test.js
View File

@@ -1,71 +1,54 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import { getDefaultStyleSheet } from '../css';
import isPlainObject from 'lodash/isPlainObject';
import StyleSheet from '..';
suite('apis/StyleSheet', () => {
setup(() => {
describe('apis/StyleSheet', () => {
beforeEach(() => {
StyleSheet._reset();
});
test('absoluteFill', () => {
assert(Number.isInteger(StyleSheet.absoluteFill) === true);
expect(Number.isInteger(StyleSheet.absoluteFill) === true).toBeTruthy();
});
test('absoluteFillObject', () => {
assert.ok(isPlainObject(StyleSheet.absoluteFillObject) === true);
expect(isPlainObject(StyleSheet.absoluteFillObject) === true).toBeTruthy();
});
suite('create', () => {
describe('create', () => {
test('replaces styles with numbers', () => {
const style = StyleSheet.create({ root: { opacity: 1 } });
assert(Number.isInteger(style.root) === true);
expect(Number.isInteger(style.root) === true).toBeTruthy();
});
test('renders a style sheet in the browser', () => {
StyleSheet.create({ root: { color: 'red' } });
assert.equal(
document.getElementById('__react-native-style').textContent,
getDefaultStyleSheet()
);
expect(document.getElementById('__react-native-style').textContent).toEqual(getDefaultStyleSheet());
});
});
test('flatten', () => {
assert(typeof StyleSheet.flatten === 'function');
expect(typeof StyleSheet.flatten === 'function').toBeTruthy();
});
test('hairlineWidth', () => {
assert(Number.isInteger(StyleSheet.hairlineWidth) === true);
expect(Number.isInteger(StyleSheet.hairlineWidth) === true).toBeTruthy();
});
test('render', () => {
assert.equal(
StyleSheet.render().props.dangerouslySetInnerHTML.__html,
getDefaultStyleSheet()
);
expect(StyleSheet.render().props.dangerouslySetInnerHTML.__html).toEqual(getDefaultStyleSheet());
});
test('resolve', () => {
assert.deepEqual(
StyleSheet.resolve({
className: 'test',
style: {
display: 'flex',
opacity: 1,
pointerEvents: 'box-none'
}
}),
{
className: 'test __style_df __style_pebn',
style: {
display: null,
opacity: 1,
pointerEvents: null
}
expect(StyleSheet.resolve({
className: 'test',
style: {
display: 'flex',
opacity: 1,
pointerEvents: 'box-none'
}
);
})).toMatchSnapshot();
});
});

11
src/apis/StyleSheet/__tests__/normalizeValue-test.js
View File

@@ -1,14 +1,13 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import normalizeValue from '../normalizeValue';
suite('apis/StyleSheet/normalizeValue', () => {
describe('apis/StyleSheet/normalizeValue', () => {
test('normalizes property values requiring units', () => {
assert.deepEqual(normalizeValue('margin', 0), '0px');
expect(normalizeValue('margin', 0)).toEqual('0px');
});
test('ignores unitless property values', () => {
assert.deepEqual(normalizeValue('flexGrow', 1), 1);
assert.deepEqual(normalizeValue('scale', 2), 2);
expect(normalizeValue('flexGrow', 1)).toEqual(1);
expect(normalizeValue('scale', 2)).toEqual(2);
});
});

20
src/apis/StyleSheet/__tests__/processTextShadow-test.js
View File

@@ -1,9 +1,8 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import processTextShadow from '../processTextShadow';
suite('apis/StyleSheet/processTextShadow', () => {
describe('apis/StyleSheet/processTextShadow', () => {
test('textShadowOffset', () => {
const style = {
textShadowColor: 'red',
@@ -11,14 +10,11 @@ suite('apis/StyleSheet/processTextShadow', () => {
textShadowRadius: 5
};
assert.deepEqual(
processTextShadow(style),
{
textShadow: '2px 2px 5px red',
textShadowColor: null,
textShadowOffset: null,
textShadowRadius: null
}
);
expect(processTextShadow(style)).toEqual({
textShadow: '2px 2px 5px red',
textShadowColor: null,
textShadowOffset: null,
textShadowRadius: null
});
});
});

21
src/apis/StyleSheet/__tests__/processTransform-test.js
View File

@@ -1,9 +1,8 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import processTransform from '../processTransform';
suite('apis/StyleSheet/processTransform', () => {
describe('apis/StyleSheet/processTransform', () => {
test('transform', () => {
const style = {
transform: [
@@ -13,10 +12,7 @@ suite('apis/StyleSheet/processTransform', () => {
]
};
assert.deepEqual(
processTransform(style),
{ transform: 'scaleX(20) translateX(20px) rotate(20deg)' }
);
expect(processTransform(style)).toEqual({ transform: 'scaleX(20) translateX(20px) rotate(20deg)' });
});
test('transformMatrix', () => {
@@ -24,12 +20,9 @@ suite('apis/StyleSheet/processTransform', () => {
transformMatrix: [ 1, 2, 3, 4, 5, 6 ]
};
assert.deepEqual(
processTransform(style),
{
transform: 'matrix3d(1,2,3,4,5,6)',
transformMatrix: null
}
);
expect(processTransform(style)).toEqual({
transform: 'matrix3d(1,2,3,4,5,6)',
transformMatrix: null
});
});
});

10
src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js
View File

@@ -1,17 +1,13 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import processVendorPrefixes from '../processVendorPrefixes';
suite('apis/StyleSheet/processVendorPrefixes', () => {
describe('apis/StyleSheet/processVendorPrefixes', () => {
test('handles array values', () => {
const style = {
display: [ '-webkit-flex', 'flex' ]
};
assert.deepEqual(
processVendorPrefixes(style),
{ display: 'flex' }
);
expect(processVendorPrefixes(style)).toEqual({ display: 'flex' });
});
});

88
src/apis/UIManager/__tests__/index-test.js
View File

@@ -1,6 +1,5 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import UIManager from '..';
const createNode = (style = {}) => {
@@ -13,47 +12,52 @@ const createNode = (style = {}) => {
let defaultBodyMargin;
suite('apis/UIManager', () => {
setup(() => {
describe('apis/UIManager', () => {
beforeEach(() => {
// remove default body margin so we can predict the measured offsets
defaultBodyMargin = document.body.style.margin;
document.body.style.margin = 0;
});
teardown(() => {
afterEach(() => {
document.body.style.margin = defaultBodyMargin;
});
suite('measure', () => {
describe('measure', () => {
test('provides correct layout to callback', () => {
const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
document.body.appendChild(node);
node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: 100, left: 100 }));
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
assert.equal(x, 100);
assert.equal(y, 100);
assert.equal(width, 5000);
assert.equal(height, 5000);
assert.equal(pageX, 100);
assert.equal(pageY, 100);
expect(x).toEqual(100);
expect(y).toEqual(100);
expect(width).toEqual(5000);
expect(height).toEqual(5000);
expect(pageX).toEqual(100);
expect(pageY).toEqual(100);
});
// test values account for scroll position
window.scrollTo(200, 200);
node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: -100, left: -100 }));
node.parentNode.getBoundingClientRect = jest.fn(() => ({ top: -200, left: -200 }));
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
assert.equal(x, 100);
assert.equal(y, 100);
assert.equal(width, 5000);
assert.equal(height, 5000);
assert.equal(pageX, -100);
assert.equal(pageY, -100);
expect(x).toEqual(100);
expect(y).toEqual(100);
expect(width).toEqual(5000);
expect(height).toEqual(5000);
expect(pageX).toEqual(-100);
expect(pageY).toEqual(-100);
});
document.body.removeChild(node);
});
});
suite('measureLayout', () => {
describe('measureLayout', () => {
test('provides correct layout to onSuccess callback', () => {
const node = createNode({ height: '10px', width: '10px' });
const middle = createNode({ padding: '20px' });
@@ -62,18 +66,25 @@ suite('apis/UIManager', () => {
context.appendChild(middle);
document.body.appendChild(context);
node.getBoundingClientRect = jest.fn(() => ({
width: 10,
height: 10,
top: 40,
left: 40
}));
UIManager.measureLayout(node, context, () => {}, (x, y, width, height) => {
assert.equal(x, 40);
assert.equal(y, 40);
assert.equal(width, 10);
assert.equal(height, 10);
expect(x).toEqual(40);
expect(y).toEqual(40);
expect(width).toEqual(10);
expect(height).toEqual(10);
});
document.body.removeChild(context);
});
});
suite('measureInWindow', () => {
describe('measureInWindow', () => {
test('provides correct layout to callback', () => {
const node = createNode({ height: '10px', width: '10px' });
const middle = createNode({ padding: '20px' });
@@ -82,18 +93,25 @@ suite('apis/UIManager', () => {
context.appendChild(middle);
document.body.appendChild(context);
node.getBoundingClientRect = jest.fn(() => ({
width: 10,
height: 10,
top: 40,
left: 40
}));
UIManager.measureInWindow(node, (x, y, width, height) => {
assert.equal(x, 40);
assert.equal(y, 40);
assert.equal(width, 10);
assert.equal(height, 10);
expect(x).toEqual(40);
expect(y).toEqual(40);
expect(width).toEqual(10);
expect(height).toEqual(10);
});
document.body.removeChild(context);
});
});
suite('updateView', () => {
describe('updateView', () => {
const componentStub = {
_reactInternalInstance: {
_currentElement: { _owner: {} },
@@ -106,14 +124,14 @@ suite('apis/UIManager', () => {
node.className = 'existing';
const props = { className: 'extra' };
UIManager.updateView(node, props, componentStub);
assert.equal(node.getAttribute('class'), 'existing extra');
expect(node.getAttribute('class')).toEqual('existing extra');
});
test('adds correct DOM styles to existing style', () => {
const node = createNode({ color: 'red' });
const props = { style: { marginVertical: 0, opacity: 0 } };
UIManager.updateView(node, props, componentStub);
assert.equal(node.getAttribute('style'), 'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;');
expect(node.getAttribute('style')).toEqual('color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;');
});
test('replaces input and textarea text', () => {
@@ -123,18 +141,18 @@ suite('apis/UIManager', () => {
const valueProp = { value: 'expected-value' };
UIManager.updateView(node, textProp);
assert.equal(node.value, 'expected-text');
expect(node.value).toEqual('expected-text');
UIManager.updateView(node, valueProp);
assert.equal(node.value, 'expected-value');
expect(node.value).toEqual('expected-value');
});
test('sets other attribute values', () => {
const node = createNode();
const props = { 'aria-level': '4', 'data-of-type': 'string' };
UIManager.updateView(node, props);
assert.equal(node.getAttribute('aria-level'), '4');
assert.equal(node.getAttribute('data-of-type'), 'string');
expect(node.getAttribute('aria-level')).toEqual('4');
expect(node.getAttribute('data-of-type')).toEqual('string');
});
});
});

4
src/components/ActivityIndicator/__tests__/index-test.js
View File

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

1149
src/components/Image/__tests__/__snapshots__/index-test.js.snap Normal file
View File

File diff suppressed because it is too large Load Diff

188
src/components/Image/__tests__/index-test.js
View File

@@ -1,182 +1,94 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import Image from '../';
import React from 'react';
import StyleSheet from '../../../apis/StyleSheet';
import { mount, shallow } from 'enzyme';
import renderer from 'react-test-renderer';
jest.mock('react-dom');
const originalImage = window.Image;
describe('components/Image', () => {
beforeEach(() => {
window.Image = jest.fn(() => ({}));
});
afterEach(() => {
window.Image = originalImage;
});
suite('components/Image', () => {
test('sets correct accessibility role"', () => {
const image = shallow(<Image />);
assert.equal(image.prop('accessibilityRole'), 'img');
const component = renderer.create(<Image />);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessibilityLabel"', () => {
const accessibilityLabel = 'accessibilityLabel';
const image = shallow(<Image accessibilityLabel={accessibilityLabel} />);
assert.equal(image.prop('accessibilityLabel'), accessibilityLabel);
const component = renderer.create(<Image accessibilityLabel='accessibilityLabel' />);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessible"', () => {
const accessible = false;
const image = shallow(<Image accessible={accessible} />);
assert.equal(image.prop('accessible'), accessible);
const component = renderer.create(<Image accessible={false} />);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "children"', () => {
const children = <div className='unique' />;
const wrapper = shallow(<Image>{children}</Image>);
assert.equal(wrapper.contains(children), true);
const component = renderer.create(<Image children={children} />);
expect(component.toJSON()).toMatchSnapshot();
});
suite('prop "defaultSource"', () => {
describe('prop "defaultSource"', () => {
test('sets background image when value is an object', () => {
const defaultSource = { uri: 'https://google.com/favicon.ico' };
const image = shallow(<Image defaultSource={defaultSource} />);
const style = StyleSheet.flatten(image.prop('style'));
assert(style.backgroundImage.indexOf(defaultSource.uri) > -1);
const component = renderer.create(<Image defaultSource={defaultSource} />);
expect(component.toJSON()).toMatchSnapshot();
});
test('sets background image when value is a string', () => {
// emulate require-ed asset
const defaultSource = 'https://google.com/favicon.ico';
const image = shallow(<Image defaultSource={defaultSource} />);
const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage;
assert(backgroundImage.indexOf(defaultSource) > -1);
const component = renderer.create(<Image defaultSource={defaultSource} />);
expect(component.toJSON()).toMatchSnapshot();
});
test('sets "height" and "width" styles if missing', () => {
const defaultSource = { uri: 'https://google.com/favicon.ico', height: 10, width: 20 };
const image = mount(<Image defaultSource={defaultSource} />);
const html = image.html();
assert(html.indexOf('height: 10px') > -1);
assert(html.indexOf('width: 20px') > -1);
const component = renderer.create(<Image defaultSource={defaultSource} />);
expect(component.toJSON()).toMatchSnapshot();
});
test('does not override "height" and "width" styles', () => {
const defaultSource = { uri: 'https://google.com/favicon.ico', height: 10, width: 20 };
const image = mount(<Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />);
const html = image.html();
assert(html.indexOf('height: 20px') > -1);
assert(html.indexOf('width: 40px') > -1);
const component = renderer.create(<Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />);
expect(component.toJSON()).toMatchSnapshot();
});
});
test('prop "onError"', function (done) {
this.timeout(5000);
const image = mount(<Image onError={onError} source={{ uri: 'https://google.com/favicon.icox' }} />);
function onError(e) {
assert.ok(e.nativeEvent.error);
image.unmount();
done();
}
});
test('prop "onLoad"', function (done) {
this.timeout(5000);
const image = mount(<Image onLoad={onLoad} source={{ uri: 'https://google.com/favicon.ico' }} />);
function onLoad(e) {
assert.equal(e.nativeEvent.type, 'load');
const hasBackgroundImage = (image.html()).indexOf('url(&quot;https://google.com/favicon.ico&quot;)') > -1;
assert.equal(hasBackgroundImage, true);
image.unmount();
done();
}
});
test('prop "onLoadEnd"', function (done) {
this.timeout(5000);
const image = mount(<Image onLoadEnd={onLoadEnd} source={{ uri: 'https://google.com/favicon.ico' }} />);
function onLoadEnd() {
assert.ok(true);
const hasBackgroundImage = (image.html()).indexOf('url(&quot;https://google.com/favicon.ico&quot;)') > -1;
assert.equal(hasBackgroundImage, true);
image.unmount();
done();
}
});
test('prop "onLoadStart"', function (done) {
this.timeout(5000);
mount(<Image onLoadStart={onLoadStart} source={{ uri: 'https://google.com/favicon.ico' }} />);
function onLoadStart() {
assert.ok(true);
done();
}
});
suite('prop "resizeMode"', () => {
const getBackgroundSize = (image) => StyleSheet.flatten(image.prop('style')).backgroundSize;
test('value "contain"', () => {
const image = shallow(<Image resizeMode={Image.resizeMode.contain} />);
assert.equal(getBackgroundSize(image), 'contain');
});
test('value "cover"', () => {
const image = shallow(<Image resizeMode={Image.resizeMode.cover} />);
assert.equal(getBackgroundSize(image), 'cover');
});
test('value "none"', () => {
const image = shallow(<Image resizeMode={Image.resizeMode.none} />);
assert.equal(getBackgroundSize(image), 'auto');
});
test('value "stretch"', () => {
const image = shallow(<Image resizeMode={Image.resizeMode.stretch} />);
assert.equal(getBackgroundSize(image), '100% 100%');
});
test('no value', () => {
const image = shallow(<Image />);
assert.equal(getBackgroundSize(image), 'cover');
describe('prop "resizeMode"', () => {
[
Image.resizeMode.contain,
Image.resizeMode.cover,
Image.resizeMode.none,
Image.resizeMode.stretch,
undefined
].forEach((resizeMode) => {
test(`value "${resizeMode}"`, () => {
const component = renderer.create(<Image resizeMode={resizeMode} />);
expect(component.toJSON()).toMatchSnapshot();
});
});
});
suite('prop "source"', function () {
this.timeout(5000);
test('sets background image when value is an object', (done) => {
const source = { uri: 'https://google.com/favicon.ico' };
const image = mount(<Image onLoad={onLoad} source={source} />);
function onLoad(e) {
const src = e.nativeEvent.target.src;
assert.equal(src, source.uri);
image.unmount();
done();
}
});
test('sets background image when value is a string', (done) => {
// emulate require-ed asset
const source = 'https://google.com/favicon.ico';
const image = mount(<Image onLoad={onLoad} source={source} />);
function onLoad(e) {
const src = e.nativeEvent.target.src;
assert.equal(src, source);
image.unmount();
done();
}
});
});
suite('prop "style"', () => {
test('converts "resizeMode" property', () => {
const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />);
assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain');
});
test('removes "resizeMode" property', () => {
const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />);
assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined);
describe('prop "style"', () => {
test('correctly supports "resizeMode" property', () => {
const component = renderer.create(<Image style={{ resizeMode: Image.resizeMode.contain }} />);
expect(component.toJSON()).toMatchSnapshot();
});
});
test('prop "testID"', () => {
const testID = 'testID';
const image = shallow(<Image testID={testID} />);
assert.equal(image.prop('testID'), testID);
const component = renderer.create(<Image testID='testID' />);
expect(component.toJSON()).toMatchSnapshot();
});
});

4
src/components/ListView/__tests__/index-test.js
View File

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

15
src/components/ProgressBar/__tests__/index-test.js
View File

@@ -1,20 +1,19 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import React from 'react';
import { shallow } from 'enzyme';
import ProgressBar from '..';
suite('components/ProgressBar', () => {
suite('progress', () => {
test('value as percentage is set to "aria-valuenow"', () => {
describe('components/ProgressBar', () => {
describe('progress', () => {
it('value as percentage is set to "aria-valuenow"', () => {
const component = shallow(<ProgressBar progress={0.5} />);
assert(component.prop('aria-valuenow') === 50);
expect(component.prop('aria-valuenow') === 50).toBeTruthy();
});
test('is ignored when "indeterminate" is "true"', () => {
it('is ignored when "indeterminate" is "true"', () => {
const component = shallow(<ProgressBar indeterminate progress={0.5} />);
assert(component.prop('aria-valuenow') === null);
expect(component.prop('aria-valuenow') === null).toBeTruthy();
});
});
});

4
src/components/ScrollView/__tests__/index-test.js
View File

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

4
src/components/StaticContainer/__tests__/index-test.js
View File

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

4
src/components/StaticRenderer/__tests__/index-test.js
View File

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

843
src/components/Switch/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,843 @@
exports[`components/Switch disabled when "false" a default checkbox is rendered 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"MozUserSelect": "none",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitUserSelect": "none",
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"cursor": "pointer",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msUserSelect": "none",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"userSelect": "none",
"width": "40px",
}
}>
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
"borderBottomRightRadius": "10px",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "10px",
"borderTopRightRadius": "10px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"bottom": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "70%",
"left": "0px",
"listStyle": "none",
"marginBottom": "auto",
"marginLeft": "auto",
"marginRight": "auto",
"marginTop": "auto",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"width": "90%",
}
} />
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitAlignSelf": "flex-start",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
"borderBottomLeftRadius": "100%",
"borderBottomRightRadius": "100%",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "100%",
"borderTopRightRadius": "100%",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxShadow": "0px 1px 3px rgba(0,0,0,0.5)",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"width": "20px",
}
} />
<input
checked={false}
className=""
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
style={
Object {
"bottom": "0px",
"cursor": "inherit",
"height": "100%",
"left": "0px",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"opacity": 0,
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"top": "0px",
"width": "100%",
}
}
type="checkbox" />
</div>
`;
exports[`components/Switch disabled when "true" a disabled checkbox is rendered 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"MozUserSelect": "none",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitUserSelect": "none",
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"cursor": "default",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msUserSelect": "none",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"userSelect": "none",
"width": "40px",
}
}>
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"backgroundColor": "#D5D5D5",
"borderBottomLeftRadius": "10px",
"borderBottomRightRadius": "10px",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "10px",
"borderTopRightRadius": "10px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"bottom": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "70%",
"left": "0px",
"listStyle": "none",
"marginBottom": "auto",
"marginLeft": "auto",
"marginRight": "auto",
"marginTop": "auto",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"width": "90%",
}
} />
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitAlignSelf": "flex-start",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#BDBDBD",
"borderBottomLeftRadius": "100%",
"borderBottomRightRadius": "100%",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "100%",
"borderTopRightRadius": "100%",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxShadow": "0px 1px 3px rgba(0,0,0,0.5)",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"width": "20px",
}
} />
<input
checked={false}
className=""
disabled={true}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
style={
Object {
"bottom": "0px",
"cursor": "inherit",
"height": "100%",
"left": "0px",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"opacity": 0,
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"top": "0px",
"width": "100%",
}
}
type="checkbox" />
</div>
`;
exports[`components/Switch value when "false" an unchecked checkbox is rendered 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"MozUserSelect": "none",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitUserSelect": "none",
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"cursor": "pointer",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msUserSelect": "none",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"userSelect": "none",
"width": "40px",
}
}>
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
"borderBottomRightRadius": "10px",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "10px",
"borderTopRightRadius": "10px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"bottom": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "70%",
"left": "0px",
"listStyle": "none",
"marginBottom": "auto",
"marginLeft": "auto",
"marginRight": "auto",
"marginTop": "auto",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"width": "90%",
}
} />
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitAlignSelf": "flex-start",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
"borderBottomLeftRadius": "100%",
"borderBottomRightRadius": "100%",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "100%",
"borderTopRightRadius": "100%",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxShadow": "0px 1px 3px rgba(0,0,0,0.5)",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexItemAlign": "start",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"width": "20px",
}
} />
<input
checked={false}
className=""
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
style={
Object {
"bottom": "0px",
"cursor": "inherit",
"height": "100%",
"left": "0px",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"opacity": 0,
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"top": "0px",
"width": "100%",
}
}
type="checkbox" />
</div>
`;
exports[`components/Switch value when "true" a checked checkbox is rendered 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"MozUserSelect": "none",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitUserSelect": "none",
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"cursor": "pointer",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"msUserSelect": "none",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"userSelect": "none",
"width": "40px",
}
}>
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"backgroundColor": "#A3D3CF",
"borderBottomLeftRadius": "10px",
"borderBottomRightRadius": "10px",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "10px",
"borderTopRightRadius": "10px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"bottom": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "70%",
"left": "0px",
"listStyle": "none",
"marginBottom": "auto",
"marginLeft": "auto",
"marginRight": "auto",
"marginTop": "auto",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "background-color 0.1s",
"width": "90%",
}
} />
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitAlignSelf": "flex-end",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "background-color 0.1s",
"alignItems": "stretch",
"alignSelf": "flex-end",
"backgroundColor": "#009688",
"borderBottomLeftRadius": "100%",
"borderBottomRightRadius": "100%",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopLeftRadius": "100%",
"borderTopRightRadius": "100%",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxShadow": "0px 1px 3px rgba(0,0,0,0.5)",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"height": "20px",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexItemAlign": "end",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
"transition": "background-color 0.1s",
"width": "20px",
}
} />
<input
checked={true}
className=""
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
style={
Object {
"bottom": "0px",
"cursor": "inherit",
"height": "100%",
"left": "0px",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"opacity": 0,
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "absolute",
"right": "0px",
"top": "0px",
"width": "100%",
}
}
type="checkbox" />
</div>
`;

38
src/components/Switch/__tests__/index-test.js
View File

@@ -1,46 +1,50 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
// import { shallow } from 'enzyme';
import Switch from '..';
suite('components/Switch', () => {
suite('disabled', () => {
jest.mock('react-dom');
describe('components/Switch', () => {
describe('disabled', () => {
test('when "false" a default checkbox is rendered', () => {
const component = shallow(<Switch />);
assert(component.find('input').length === 1);
const component = renderer.create(<Switch />);
expect(component.toJSON()).toMatchSnapshot();
});
test('when "true" a disabled checkbox is rendered', () => {
const component = shallow(<Switch disabled />);
assert(component.find('input').prop('disabled') === true);
const component = renderer.create(<Switch disabled />);
expect(component.toJSON()).toMatchSnapshot();
});
});
suite('onValueChange', () => {
/*
describe('onValueChange', () => {
test('when value is "false" it receives "true"', () => {
const handleValueChange = (value) => assert(value === true);
const handleValueChange = (value) => expect(value === true).toBeTruthy();
const component = shallow(<Switch onValueChange={handleValueChange} value={false} />);
component.find('input').simulate('click');
});
test('when value is "true" it receives "false"', () => {
const handleValueChange = (value) => assert(value === false);
const handleValueChange = (value) => expect(value === false).toBeTruthy();
const component = shallow(<Switch onValueChange={handleValueChange} value />);
component.find('input').simulate('click');
});
});
*/
suite('value', () => {
describe('value', () => {
test('when "false" an unchecked checkbox is rendered', () => {
const component = shallow(<Switch value={false} />);
assert(component.find('input').prop('checked') === false);
const component = renderer.create(<Switch value={false} />);
expect(component.toJSON()).toMatchSnapshot();
});
test('when "true" a checked checkbox is rendered', () => {
const component = shallow(<Switch value />);
assert(component.find('input').prop('checked') === true);
const component = renderer.create(<Switch value />);
expect(component.toJSON()).toMatchSnapshot();
});
});
});

86
src/components/Text/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,86 @@
exports[`components/Text prop "children" 1`] = `
<span
className=""
onClick={[Function]}
style={
Object {
"borderBottomWidth": "0px",
"borderLeftWidth": "0px",
"borderRightWidth": "0px",
"borderTopWidth": "0px",
"color": "inherit",
"display": "inline",
"font": "inherit",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"textDecoration": "none",
"wordWrap": "break-word",
}
}>
children
</span>
`;
exports[`components/Text prop "selectable" 1`] = `
<span
className=""
onClick={[Function]}
style={
Object {
"borderBottomWidth": "0px",
"borderLeftWidth": "0px",
"borderRightWidth": "0px",
"borderTopWidth": "0px",
"color": "inherit",
"display": "inline",
"font": "inherit",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"textDecoration": "none",
"wordWrap": "break-word",
}
} />
`;
exports[`components/Text prop "selectable" 2`] = `
<span
className=""
onClick={[Function]}
style={
Object {
"MozUserSelect": "none",
"WebkitUserSelect": "none",
"borderBottomWidth": "0px",
"borderLeftWidth": "0px",
"borderRightWidth": "0px",
"borderTopWidth": "0px",
"color": "inherit",
"display": "inline",
"font": "inherit",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"msUserSelect": "none",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"textDecoration": "none",
"userSelect": "none",
"wordWrap": "break-word",
}
} />
`;

40
src/components/Text/__tests__/index-test.js
View File

@@ -1,41 +1,23 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import React from 'react';
import renderer from 'react-test-renderer';
import Text from '../';
import { mount, shallow } from 'enzyme';
suite('components/Text', () => {
jest.mock('react-dom');
describe('components/Text', () => {
test('prop "children"', () => {
const children = 'children';
const text = shallow(<Text>{children}</Text>);
assert.equal(text.prop('children'), children);
const component = renderer.create(<Text>children</Text>);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "numberOfLines"');
test('prop "onLayout"', (done) => {
mount(<Text onLayout={onLayout} />);
function onLayout(e) {
const { layout } = e.nativeEvent;
assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 });
done();
}
});
test('prop "onPress"', (done) => {
const text = mount(<Text onPress={onPress} />);
text.simulate('click');
function onPress(e) {
assert.ok(e.nativeEvent);
done();
}
});
test('prop "selectable"', () => {
let text = shallow(<Text />);
assert.equal(text.prop('style').userSelect, undefined);
text = shallow(<Text selectable={false} />);
assert.equal(text.prop('style').userSelect, 'none');
let component = renderer.create(<Text />);
expect(component.toJSON()).toMatchSnapshot();
component = renderer.create(<Text selectable={false} />);
expect(component.toJSON()).toMatchSnapshot();
});
});

85
src/components/TextInput/__tests__/index-test.js
View File

@@ -1,6 +1,5 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import React from 'react';
import StyleSheet from '../../../apis/StyleSheet';
import TextareaAutosize from 'react-textarea-autosize';
@@ -20,23 +19,23 @@ const testIfDocumentIsFocused = (message, fn) => {
}
};
suite('components/TextInput', () => {
describe('components/TextInput', () => {
test('prop "autoComplete"', () => {
// on
let input = findNativeInput(shallow(<TextInput />));
assert.equal(input.prop('autoComplete'), 'on');
expect(input.prop('autoComplete')).toEqual('on');
// off
input = findNativeInput(shallow(<TextInput autoComplete='off' />));
assert.equal(input.prop('autoComplete'), 'off');
expect(input.prop('autoComplete')).toEqual('off');
});
test('prop "autoFocus"', () => {
// false
let input = findNativeInput(mount(<TextInput />));
assert.equal(input.prop('autoFocus'), undefined);
expect(input.prop('autoFocus')).toEqual(undefined);
// true
input = findNativeInput(mount(<TextInput autoFocus />));
assert.equal(input.prop('autoFocus'), true);
expect(input.prop('autoFocus')).toEqual(true);
});
testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
@@ -44,53 +43,53 @@ suite('components/TextInput', () => {
// false
let input = findNativeInput(mount(<TextInput defaultValue={defaultValue} />));
input.simulate('focus');
assert.equal(input.node.value, defaultValue);
expect(input.node.value).toEqual(defaultValue);
// true
input = findNativeInput(mount(<TextInput clearTextOnFocus defaultValue={defaultValue} />));
input.simulate('focus');
assert.equal(input.node.value, '');
expect(input.node.value).toEqual('');
});
test('prop "defaultValue"', () => {
const defaultValue = 'defaultValue';
const input = findNativeInput(shallow(<TextInput defaultValue={defaultValue} />));
assert.equal(input.prop('defaultValue'), defaultValue);
expect(input.prop('defaultValue')).toEqual(defaultValue);
});
test('prop "editable"', () => {
// true
let input = findNativeInput(shallow(<TextInput />));
assert.equal(input.prop('readOnly'), false);
expect(input.prop('readOnly')).toEqual(false);
// false
input = findNativeInput(shallow(<TextInput editable={false} />));
assert.equal(input.prop('readOnly'), true);
expect(input.prop('readOnly')).toEqual(true);
});
test('prop "keyboardType"', () => {
// default
let input = findNativeInput(shallow(<TextInput />));
assert.equal(input.prop('type'), 'text');
expect(input.prop('type')).toEqual('text');
input = findNativeInput(shallow(<TextInput keyboardType='default' />));
assert.equal(input.prop('type'), 'text');
expect(input.prop('type')).toEqual('text');
// email-address
input = findNativeInput(shallow(<TextInput keyboardType='email-address' />));
assert.equal(input.prop('type'), 'email');
expect(input.prop('type')).toEqual('email');
// numeric
input = findNativeInput(shallow(<TextInput keyboardType='numeric' />));
assert.equal(input.prop('type'), 'number');
expect(input.prop('type')).toEqual('number');
// phone-pad
input = findNativeInput(shallow(<TextInput keyboardType='phone-pad' />));
assert.equal(input.prop('type'), 'tel');
expect(input.prop('type')).toEqual('tel');
// url
input = findNativeInput(shallow(<TextInput keyboardType='url' />));
assert.equal(input.prop('type'), 'url');
expect(input.prop('type')).toEqual('url');
});
test('prop "maxLength"', () => {
let input = findNativeInput(shallow(<TextInput />));
assert.equal(input.prop('maxLength'), undefined);
expect(input.prop('maxLength')).toEqual(undefined);
input = findNativeInput(shallow(<TextInput maxLength={10} />));
assert.equal(input.prop('maxLength'), '10');
expect(input.prop('maxLength')).toEqual(10);
});
test('prop "maxNumberOfLines"', () => {
@@ -107,25 +106,25 @@ suite('components/TextInput', () => {
value={generateValue()}
/>
));
assert.equal(input.prop('maxRows'), 3);
expect(input.prop('maxRows')).toEqual(3);
});
test('prop "multiline"', () => {
// false
let input = findNativeInput(shallow(<TextInput />));
assert.equal(input.length, 1);
expect(input.length).toEqual(1);
// true
input = findNativeTextarea(shallow(<TextInput multiline />));
assert.equal(input.length, 1);
expect(input.length).toEqual(1);
});
test('prop "numberOfLines"', () => {
// missing multiline
let input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
assert.equal(input.length, 1);
expect(input.length).toEqual(1);
// with multiline
input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={2} />));
assert.equal(input.length, 1);
expect(input.length).toEqual(1);
input = findNativeTextarea(shallow(
<TextInput
@@ -133,14 +132,14 @@ suite('components/TextInput', () => {
numberOfLines={3}
/>
));
assert.equal(input.prop('minRows'), 3);
expect(input.prop('minRows')).toEqual(3);
});
test('prop "onBlur"', (done) => {
const input = findNativeInput(mount(<TextInput onBlur={onBlur} />));
input.simulate('blur');
function onBlur(e) {
assert.ok(e);
expect(e).toBeTruthy();
done();
}
});
@@ -149,7 +148,7 @@ suite('components/TextInput', () => {
const input = findNativeInput(mount(<TextInput onChange={onChange} />));
input.simulate('change');
function onChange(e) {
assert.ok(e);
expect(e).toBeTruthy();
done();
}
});
@@ -159,7 +158,7 @@ suite('components/TextInput', () => {
const input = findNativeInput(mount(<TextInput onChangeText={onChangeText} />));
input.simulate('change', { target: { value: newText } });
function onChangeText(text) {
assert.equal(text, newText);
expect(text).toEqual(newText);
done();
}
});
@@ -168,7 +167,7 @@ suite('components/TextInput', () => {
const input = findNativeInput(mount(<TextInput onFocus={onFocus} />));
input.simulate('focus');
function onFocus(e) {
assert.ok(e);
expect(e).toBeTruthy();
done();
}
});
@@ -179,36 +178,36 @@ suite('components/TextInput', () => {
const input = findNativeInput(mount(<TextInput defaultValue='12345' onSelectionChange={onSelectionChange} />));
input.simulate('select', { target: { selectionStart: 0, selectionEnd: 3 } });
function onSelectionChange(e) {
assert.equal(e.nativeEvent.selection.end, 3);
assert.equal(e.nativeEvent.selection.start, 0);
expect(e.nativeEvent.selection.end).toEqual(3);
expect(e.nativeEvent.selection.start).toEqual(0);
done();
}
});
test('prop "placeholder"', () => {
let textInput = shallow(<TextInput />);
assert.equal(findPlaceholder(textInput).length, 0);
expect(findPlaceholder(textInput).length).toEqual(0);
textInput = shallow(<TextInput placeholder={placeholderText} />);
assert.equal(findPlaceholder(textInput).length, 1);
expect(findPlaceholder(textInput).length).toEqual(1);
});
test('prop "placeholderTextColor"', () => {
let placeholderElement = findPlaceholder(shallow(<TextInput placeholder={placeholderText} />));
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'darkgray');
expect(StyleSheet.flatten(placeholderElement.prop('style')).color).toEqual('darkgray');
placeholderElement = findPlaceholder(
shallow(<TextInput placeholder={placeholderText} placeholderTextColor='red' />)
);
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'red');
expect(StyleSheet.flatten(placeholderElement.prop('style')).color).toEqual('red');
});
test('prop "secureTextEntry"', () => {
let input = findNativeInput(shallow(<TextInput secureTextEntry />));
assert.equal(input.prop('type'), 'password');
expect(input.prop('type')).toEqual('password');
// ignored for multiline
input = findNativeTextarea(shallow(<TextInput multiline secureTextEntry />));
assert.equal(input.prop('type'), undefined);
expect(input.prop('type')).toEqual(undefined);
});
testIfDocumentIsFocused('prop "selectTextOnFocus"', () => {
@@ -216,8 +215,8 @@ suite('components/TextInput', () => {
// false
let input = findNativeInput(mount(<TextInput defaultValue={text} />));
input.node.focus();
assert.equal(input.node.selectionEnd, 4);
assert.equal(input.node.selectionStart, 4);
expect(input.node.selectionEnd).toEqual(4);
expect(input.node.selectionStart).toEqual(4);
// true
input = findNativeInput(mount(<TextInput defaultValue={text} selectTextOnFocus />));
// input.node.focus()
@@ -235,13 +234,13 @@ suite('components/TextInput', () => {
const textInput = shallow(<TextInput style={styles.root} />);
const input = findNativeInput(textInput);
const borderWidth = StyleSheet.flatten(textInput.prop('style')).borderWidth;
assert.equal(borderWidth, 1, 'expected View styles to be applied to the "View"');
assert.equal(input.prop('style').textAlign, 'center', 'expected Text styles to be applied to the "input"');
expect(borderWidth).toEqual(1);
expect(input.prop('style').textAlign).toEqual('center');
});
test('prop "value"', () => {
const value = 'value';
const input = findNativeInput(shallow(<TextInput value={value} />));
assert.equal(input.prop('value'), value);
expect(input.prop('value')).toEqual(value);
});
});

4
src/components/Touchable/__tests__/index-test.js
View File

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

525
src/components/View/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,525 @@
exports[`components/View prop "children" 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
}>
<div
className=" __style_df"
data-testid="1"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
</div>
`;
exports[`components/View prop "pointerEvents" 1`] = `
<div
className=" __style_df __style_pebo"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"pointerEvents": null,
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View prop "style" 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View prop "style" 2`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexGrow": 1,
"WebkitFlexShrink": 1,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexGrow": 1,
"flexShrink": 1,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 1,
"msFlexPositive": 1,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View prop "style" 3`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 1,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 1,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 1,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View prop "style" 4`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexGrow": 1,
"WebkitFlexShrink": 2,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexGrow": 1,
"flexShrink": 2,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 2,
"msFlexPositive": 1,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View rendered element is a "div" by default 1`] = `
<div
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
`;
exports[`components/View rendered element is a "span" when inside <View accessibilityRole="button" /> 1`] = `
<button
className=" __style_df"
role="button"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
}
type="button">
<span
className=" __style_df"
style={
Object {
"MozBoxSizing": "border-box",
"WebkitAlignItems": "stretch",
"WebkitBoxAlign": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "vertical",
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"alignItems": "stretch",
"backgroundColor": "transparent",
"borderBottomStyle": "solid",
"borderBottomWidth": "0px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"color": "inherit",
"display": null,
"flexBasis": "auto",
"flexDirection": "column",
"flexShrink": 0,
"font": "inherit",
"listStyle": "none",
"marginBottom": "0px",
"marginLeft": "0px",
"marginRight": "0px",
"marginTop": "0px",
"minHeight": "0px",
"minWidth": "0px",
"msFlexAlign": "stretch",
"msFlexDirection": "column",
"msFlexNegative": 0,
"msPreferredSize": "auto",
"paddingBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"position": "relative",
"textAlign": "inherit",
"textDecoration": "none",
}
} />
</button>
`;

53
src/components/View/__tests__/index-test.js
View File

@@ -1,55 +1,46 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import includes from 'lodash/includes';
import React from 'react';
import renderer from 'react-test-renderer';
import View from '../';
import { mount, shallow } from 'enzyme';
suite('components/View', () => {
suite('rendered element', () => {
jest.mock('react-dom');
describe('components/View', () => {
describe('rendered element', () => {
test('is a "div" by default', () => {
const view = shallow(<View />);
assert.equal(view.is('div'), true);
const component = renderer.create(<View />);
expect(component.toJSON()).toMatchSnapshot();
});
test('is a "span" when inside <View accessibilityRole="button" />', () => {
const view = mount(<View accessibilityRole='button'><View /></View>);
assert.equal(view.find('span').length, 1);
const component = renderer.create(<View accessibilityRole='button'><View /></View>);
expect(component.toJSON()).toMatchSnapshot();
});
});
test('prop "children"', () => {
const children = <View testID='1' />;
const view = shallow(<View>{children}</View>);
assert.equal(view.prop('children'), children);
});
test('prop "onLayout"', (done) => {
mount(<View onLayout={onLayout} />);
function onLayout(e) {
const { layout } = e.nativeEvent;
assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 });
done();
}
const component = renderer.create(<View>{children}</View>);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "pointerEvents"', () => {
const view = shallow(<View pointerEvents='box-only' />);
assert.ok(includes(view.prop('className'), '__style_pebo') === true);
const component = renderer.create(<View pointerEvents='box-only' />);
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "style"', () => {
const view = shallow(<View />);
assert.equal(view.prop('style').flexShrink, 0);
let component = renderer.create(<View />);
expect(component.toJSON()).toMatchSnapshot();
const flexView = shallow(<View style={{ flex: 1 }} />);
assert.equal(flexView.prop('style').flexShrink, 1);
component = renderer.create(<View style={{ flex: 1 }} />);
expect(component.toJSON()).toMatchSnapshot();
const flexShrinkView = shallow(<View style={{ flexShrink: 1 }} />);
assert.equal(flexShrinkView.prop('style').flexShrink, 1);
component = renderer.create(<View style={{ flexShrink: 1 }} />);
expect(component.toJSON()).toMatchSnapshot();
const flexAndShrinkView = shallow(<View style={{ flex: 1, flexShrink: 2 }} />);
assert.equal(flexAndShrinkView.prop('style').flexShrink, 2);
component = renderer.create(<View style={{ flex: 1, flexShrink: 2 }} />);
expect(component.toJSON()).toMatchSnapshot();
});
});

66
src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,66 @@
exports[`modules/createDOMElement prop "accessibilityLabel" 1`] = `
<span
aria-label="accessibilityLabel"
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement prop "accessibilityLiveRegion" 1`] = `
<span
aria-live="polite"
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement prop "accessibilityRole" 1`] = `
<header
className=""
role="banner"
style={Object {}} />
`;
exports[`modules/createDOMElement prop "accessibilityRole" 2`] = `
<button
className=""
role="button"
style={Object {}}
type="button" />
`;
exports[`modules/createDOMElement prop "accessible" 1`] = `
<span
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement prop "accessible" 2`] = `
<span
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement prop "accessible" 3`] = `
<span
aria-hidden={true}
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement prop "testID" 1`] = `
<span
className=""
data-testid="Example.testID"
style={Object {}} />
`;
exports[`modules/createDOMElement renders correct DOM element 1`] = `
<span
className=""
style={Object {}} />
`;
exports[`modules/createDOMElement renders correct DOM element 2`] = `
<main
className=""
style={Object {}} />
`;

56
src/modules/createDOMElement/__tests__/index-test.js
View File

@@ -1,60 +1,50 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import createDOMElement from '..';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
suite('modules/createDOMElement', () => {
describe('modules/createDOMElement', () => {
test('renders correct DOM element', () => {
let element = shallow(createDOMElement('span'));
assert.equal(element.is('span'), true);
element = shallow(createDOMElement('main'));
assert.equal(element.is('main'), true);
let component = renderer.create(createDOMElement('span'));
expect(component.toJSON()).toMatchSnapshot();
component = renderer.create(createDOMElement('main'));
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessibilityLabel"', () => {
const accessibilityLabel = 'accessibilityLabel';
const element = shallow(createDOMElement('span', { accessibilityLabel }));
assert.equal(element.prop('aria-label'), accessibilityLabel);
const component = renderer.create(createDOMElement('span', { accessibilityLabel }));
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessibilityLiveRegion"', () => {
const accessibilityLiveRegion = 'polite';
const element = shallow(createDOMElement('span', { accessibilityLiveRegion }));
assert.equal(element.prop('aria-live'), accessibilityLiveRegion);
const component = renderer.create(createDOMElement('span', { accessibilityLiveRegion }));
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessibilityRole"', () => {
const accessibilityRole = 'banner';
let element = shallow(createDOMElement('span', { accessibilityRole }));
assert.equal(element.prop('role'), accessibilityRole);
assert.equal(element.is('header'), true);
const button = 'button';
element = shallow(createDOMElement('span', { accessibilityRole: 'button' }));
assert.equal(element.prop('type'), button);
assert.equal(element.is('button'), true);
let component = renderer.create(createDOMElement('span', { accessibilityRole }));
expect(component.toJSON()).toMatchSnapshot();
component = renderer.create(createDOMElement('span', { accessibilityRole: 'button' }));
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "accessible"', () => {
// accessible (implicit)
let element = shallow(createDOMElement('span', {}));
assert.equal(element.prop('aria-hidden'), null);
let component = renderer.create(createDOMElement('span', {}));
expect(component.toJSON()).toMatchSnapshot();
// accessible (explicit)
element = shallow(createDOMElement('span', { accessible: true }));
assert.equal(element.prop('aria-hidden'), null);
component = renderer.create(createDOMElement('span', { accessible: true }));
expect(component.toJSON()).toMatchSnapshot();
// not accessible
element = shallow(createDOMElement('span', { accessible: false }));
assert.equal(element.prop('aria-hidden'), true);
component = renderer.create(createDOMElement('span', { accessible: false }));
expect(component.toJSON()).toMatchSnapshot();
});
test('prop "testID"', () => {
// no testID
let element = shallow(createDOMElement('span', {}));
assert.equal(element.prop('data-testid'), null);
// with testID
const testID = 'Example.testID';
element = shallow(createDOMElement('span', { testID }));
assert.equal(element.prop('data-testid'), testID);
const component = renderer.create(createDOMElement('span', { testID: 'Example.testID' }));
expect(component.toJSON()).toMatchSnapshot();
});
});

26
src/modules/createDOMElement/index.js
View File

@@ -30,18 +30,24 @@ const createDOMElement = (component, rnProps = {}) => {
const accessibilityComponent = accessibilityRole && roleComponents[accessibilityRole];
const Component = accessibilityComponent || component;
const domProps = {
...other,
...StyleSheet.resolve(other)
};
if (!accessible) { domProps['aria-hidden'] = true; }
if (accessibilityLabel) { domProps['aria-label'] = accessibilityLabel; }
if (accessibilityLiveRegion) { domProps['aria-live'] = accessibilityLiveRegion; }
if (testID) { domProps['data-testid'] = testID; }
if (accessibilityRole) {
domProps.role = accessibilityRole;
if (accessibilityRole === 'button') {
domProps.type = 'button';
}
}
if (type) { domProps.type = type; }
return (
<Component
{...other}
{...StyleSheet.resolve(other)}
aria-hidden={accessible ? null : true}
aria-label={accessibilityLabel}
aria-live={accessibilityLiveRegion}
data-testid={testID}
role={accessibilityRole}
type={accessibilityRole === 'button' ? 'button' : type}
/>
<Component {...domProps} />
);
};

26
src/modules/flattenStyle/__tests__/__snapshots__/index-test.js.snap Normal file
View File

@@ -0,0 +1,26 @@
exports[`modules/flattenStyle should merge style objects 1`] = `
Object {
"opacity": 1,
"order": 2,
}
`;
exports[`modules/flattenStyle should override style properties 1`] = `
Object {
"backgroundColor": "#023c69",
"order": null,
}
`;
exports[`modules/flattenStyle should overwrite properties with \`undefined\` 1`] = `
Object {
"backgroundColor": undefined,
}
`;
exports[`modules/flattenStyle should recursively flatten arrays 1`] = `
Object {
"opacity": 1,
"order": 3,
}
`;

49
src/modules/flattenStyle/__tests__/index-test.js
View File

@@ -1,4 +1,4 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
/**
* Copyright (c) 2015-present, Facebook, Inc.
@@ -9,43 +9,44 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
import assert from 'assert';
import flattenStyle from '..';
suite('modules/flattenStyle', () => {
describe('modules/flattenStyle', () => {
test('should merge style objects', () => {
const style1 = { opacity: 1 };
const style2 = { order: 2 };
const flatStyle = flattenStyle([ style1, style2 ]);
assert.equal(flatStyle.opacity, 1);
assert.equal(flatStyle.order, 2);
const style = flattenStyle([
{ opacity: 1 },
{ order: 2 }
]);
expect(style).toMatchSnapshot();
});
test('should override style properties', () => {
const style1 = { backgroundColor: '#000', order: 1 };
const style2 = { backgroundColor: '#023c69', order: null };
const flatStyle = flattenStyle([ style1, style2 ]);
assert.equal(flatStyle.backgroundColor, '#023c69');
assert.strictEqual(flatStyle.order, null);
const style = flattenStyle([
{ backgroundColor: '#000', order: 1 },
{ backgroundColor: '#023c69', order: null }
]);
expect(style).toMatchSnapshot();
});
test('should overwrite properties with `undefined`', () => {
const style1 = { backgroundColor: '#000' };
const style2 = { backgroundColor: undefined };
const flatStyle = flattenStyle([ style1, style2 ]);
assert.strictEqual(flatStyle.backgroundColor, undefined);
const style = flattenStyle([
{ backgroundColor: '#000' },
{ backgroundColor: undefined }
]);
expect(style).toMatchSnapshot();
});
test('should not fail on falsy values', () => {
assert.doesNotThrow(() => flattenStyle([ null, false, undefined ]));
expect(() => flattenStyle([ null, false, undefined ])).not.toThrow();
});
test('should recursively flatten arrays', () => {
const style1 = { order: 2 };
const style2 = { opacity: 1 };
const style3 = { order: 3 };
const flatStyle = flattenStyle([ null, [], [ style1, style2 ], style3 ]);
assert.equal(flatStyle.order, 3);
assert.equal(flatStyle.opacity, 1);
const style = flattenStyle([
null,
[],
[ { order: 2 }, { opacity: 1 } ],
{ order: 3 }
]);
expect(style).toMatchSnapshot();
});
});

19
src/modules/multiplyStyleLengthValue/__tests__/index-test.js
View File

@@ -1,19 +1,18 @@
/* eslint-env mocha */
/* eslint-env jasmine, jest */
import assert from 'assert';
import multiplyStyleLengthValue from '..';
suite('modules/multiplyStyleLengthValue', () => {
describe('modules/multiplyStyleLengthValue', () => {
test('number', () => {
assert.equal(multiplyStyleLengthValue(2, -1), -2);
assert.equal(multiplyStyleLengthValue(2, 2), 4);
assert.equal(multiplyStyleLengthValue(2.5, 2), 5);
expect(multiplyStyleLengthValue(2, -1)).toEqual(-2);
expect(multiplyStyleLengthValue(2, 2)).toEqual(4);
expect(multiplyStyleLengthValue(2.5, 2)).toEqual(5);
});
test('length', () => {
assert.equal(multiplyStyleLengthValue('2rem', -1), '-2rem');
assert.equal(multiplyStyleLengthValue('2px', 2), '4px');
assert.equal(multiplyStyleLengthValue('2.5em', 2), '5em');
assert.equal(multiplyStyleLengthValue('2e3px', 2), '4000px');
expect(multiplyStyleLengthValue('2rem', -1)).toEqual('-2rem');
expect(multiplyStyleLengthValue('2px', 2)).toEqual('4px');
expect(multiplyStyleLengthValue('2.5em', 2)).toEqual('5em');
expect(multiplyStyleLengthValue('2e3px', 2)).toEqual('4000px');
});
});