diff --git a/.travis.yml b/.travis.yml index f13482f9..78d76298 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,4 +6,3 @@ before_script: - sh -e /etc/init.d/xvfb start script: - yarn lint - - yarn test:ci diff --git a/jest-setup-framework.js b/jest-setup-framework.js index fc7b0dce..0d9c7ece 100644 --- a/jest-setup-framework.js +++ b/jest-setup-framework.js @@ -1,4 +1,9 @@ -import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; +import createSerializer from './jest/createSerializer'; +import Enzyme from 'enzyme'; +import { StyleSheet } from './src'; + +const serializer = createSerializer(StyleSheet); Enzyme.configure({ adapter: new Adapter() }); +expect.addSnapshotSerializer(serializer); diff --git a/jest/__tests__/serializer-test.js b/jest/__tests__/serializer-test.js index ef976fee..f34605d6 100644 --- a/jest/__tests__/serializer-test.js +++ b/jest/__tests__/serializer-test.js @@ -4,12 +4,9 @@ import { mount, render, shallow } from 'enzyme'; import React from 'react'; import renderer from 'react-test-renderer'; -import serializer from '../serializer'; -import { StyleSheet, Text, View } from '../../dist'; +import { StyleSheet, Text, View } from '../../src'; import toJson from 'enzyme-to-json'; -expect.addSnapshotSerializer(serializer); - /** * Fixtures */ diff --git a/jest/createSerializer.js b/jest/createSerializer.js new file mode 100644 index 00000000..570c680b --- /dev/null +++ b/jest/createSerializer.js @@ -0,0 +1,56 @@ +const React = require('react'); + +function createSerializer(styleSheet) { + function flattenNodeStyles(node) { + if (node && node.props) { + // check for React elements in any props + const nextProps = Object.keys(node.props).reduce((acc, curr) => { + const value = node.props[curr]; + if (React.isValidElement(value)) { + acc[curr] = flattenNodeStyles(value); + } + return acc; + }, {}); + + // flatten styles and avoid empty objects in snapshots + if (node.props.style) { + const style = styleSheet.flatten(node.props.style); + if (Object.keys(style).length > 0) { + nextProps.style = style; + } else { + delete nextProps.style; + } + } + + const args = [node, nextProps]; + + // recurse over children too + const children = node.children || node.props.children; + if (children) { + if (Array.isArray(children)) { + children.forEach(child => { + args.push(flattenNodeStyles(child)); + }); + } else { + args.push(flattenNodeStyles(children)); + } + } + + return React.cloneElement.apply(React.cloneElement, args); + } + + return node; + } + + function test(value) { + return !!value && value.$$typeof === Symbol.for('react.test.json'); + } + + function print(value, serializer) { + return serializer(flattenNodeStyles(value)); + } + + return { test, print }; +} + +module.exports = createSerializer; diff --git a/jest/serializer.js b/jest/serializer.js index 12461834..8c462ee3 100644 --- a/jest/serializer.js +++ b/jest/serializer.js @@ -1,61 +1,6 @@ -const React = require('react'); +const createSerializer = require('./createSerializer'); const { StyleSheet } = require('../dist'); -function createSerializer(styleSheet) { - function flattenNodeStyles(node) { - if (node && node.props) { - // check for React elements in any props - const nextProps = Object.keys(node.props).reduce((acc, curr) => { - const value = node.props[curr]; - if (React.isValidElement(value)) { - acc[curr] = flattenNodeStyles(value); - } - return acc; - }, {}); - - // flatten styles and avoid empty objects in snapshots - if (node.props.style) { - const style = styleSheet.flatten(node.props.style); - if (Object.keys(style).length > 0) { - nextProps.style = style; - } else { - delete nextProps.style; - } - } - - const args = [node, nextProps]; - - // recurse over children too - const children = node.children || node.props.children; - if (children) { - if (Array.isArray(children)) { - children.forEach(child => { - args.push(flattenNodeStyles(child)); - }); - } else { - args.push(flattenNodeStyles(children)); - } - } - - return React.cloneElement.apply(React.cloneElement, args); - } - - return node; - } - - function test(value) { - return !!value && value.$$typeof === Symbol.for('react.test.json'); - } - - function print(value, serializer) { - return serializer(flattenNodeStyles(value)); - } - - return { test, print }; -} - const serializer = createSerializer(StyleSheet); -createSerializer.test = serializer.test; -createSerializer.print = serializer.print; -module.exports = createSerializer; +module.exports = serializer; diff --git a/package.json b/package.json index c3109842..c2ff0afa 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ ], "scripts": { "benchmark": "cd benchmarks && yarn && webpack && open index.html", - "build": "yarn compile && webpack --config webpack.config.js --sort-assets-by --progress", + "build": "yarn clean-dist && yarn compile && webpack --config webpack.config.js --sort-assets-by --progress", "clean-dist": "del ./dist && mkdir dist", "compile": "babel src -d dist --ignore *-test.js", "docs:build": "cd docs && yarn build", @@ -26,9 +26,8 @@ "lint": "yarn lint:cmd -- babel benchmarks docs jest src", "lint:cmd": "eslint --ignore-path .gitignore --fix", "precommit": "lint-staged", - "release": "yarn clean-dist && yarn lint && yarn build && yarn test && npm publish", - "test": "flow && jest", - "test:ci": "yarn clean-dist && yarn compile && yarn test" + "release": "yarn lint && yarn test && yarn build && npm publish", + "test": "flow && jest" }, "babel": { "presets": [ @@ -85,9 +84,9 @@ "babel-preset-react-native": "^4.0.0", "caniuse-api": "^2.0.0", "del-cli": "^1.1.0", - "enzyme": "^3.0.0", - "enzyme-adapter-react-16": "^1.0.0", - "enzyme-to-json": "^3.0.1", + "enzyme": "^3.1.0", + "enzyme-adapter-react-16": "^1.0.2", + "enzyme-to-json": "^3.1.4", "eslint": "^4.6.1", "eslint-config-prettier": "^2.6.0", "eslint-plugin-promise": "^3.5.0", diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index be9839c1..f4b61597 100644 --- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -26,19 +26,31 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit exports[`apis/AppRegistry/renderApplication getApplication 3`] = ` "" +.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important} +.rn-overflowX-11yh6sk{overflow-x:hidden} +.rn-overflowX-lltvgl{overflow-x:auto} +.rn-overflowY-1rnoaur{overflow-y:auto} +.rn-overflowY-buy8e9{overflow-y:hidden} +.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)} +.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif} +.rn-fontFamily-poiln3{font-family:inherit} +.rn-fontSize-1b43r93{font-size:14px} +.rn-fontSize-7cikom{font-size:inherit} +.rn-whiteSpace-q42fyq{white-space:pre-wrap} +.rn-whiteSpace-irrty{white-space:inherit} +.rn-whiteSpace-3s2u2q{white-space:nowrap} +.rn-wordWrap-qvutc0{word-wrap:break-word} +.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none} +.rn-maxWidth-dnmrzs{max-width:100%} +.rn-textOverflow-1udbk01{text-overflow:ellipsis} +.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center} +.rn-visibility-11j9u27{visibility:hidden} +.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s} +.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s} +.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} +.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation} +.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation} +.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear} +.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused} +.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s} +.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s} +.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity} +.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px} +.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%} +.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px} +.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px} +.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%} +.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px} +.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px} +.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%} +.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px} +.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px} +.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%} +.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px} +.rn-fontWeight-majxgm{font-weight:500} +.rn-textTransform-tsynxw{text-transform:uppercase} +.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start} +.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)} +.rn-borderTopColor-kqr9px{border-top-color:black} +.rn-borderRightColor-q0dj5p{border-right-color:black} +.rn-borderBottomColor-1ah7hsa{border-bottom-color:black} +.rn-borderLeftColor-137uh4u{border-left-color:black} +.rn-resize-1dz5y72{resize:none}" `; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap index 62b31407..6faaa0f7 100644 --- a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap +++ b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap @@ -21,9 +21,139 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit "id": "react-native-stylesheet", "textContent": ".rn-bottom-1p0dtai{bottom:0px} .rn-left-1d2f490{left:0px} +.rn-left-1fe0xdi{left:0%} +.rn-left-7b7h2f{left:100%} .rn-position-u8s1d{position:absolute} +.rn-position-bnwqim{position:relative} .rn-right-zchlnj{right:0px} -.rn-top-ipm5af{top:0px}", +.rn-top-ipm5af{top:0px} +.rn-cursor-1loqt21{cursor:pointer} +.rn-cursor-7q8q6z{cursor:default} +.rn-cursor-1ei5mc7{cursor:inherit} +.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none} +.rn-backgroundColor-wib322{background-color:transparent} +.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)} +.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)} +.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)} +.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)} +.rn-color-homxoj{color:inherit} +.rn-color-1qtguxu{color:rgba(255,255,255,1)} +.rn-color-istcb5{color:rgba(161,161,161,1)} +.rn-font-1lw9tu2{font:inherit} +.rn-textAlign-1ttztb7{text-align:inherit} +.rn-textAlign-q4m81j{text-align:center} +.rn-textDecoration-bauka4{text-decoration:none} +.rn-listStyle-1ebb2ja{list-style:none} +.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch} +.rn-alignItems-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center} +.rn-borderTopStyle-1efd50x{border-top-style:solid} +.rn-borderRightStyle-14skgim{border-right-style:solid} +.rn-borderBottomStyle-rull8r{border-bottom-style:solid} +.rn-borderLeftStyle-mm0ijv{border-left-style:solid} +.rn-borderTopWidth-13yce4e{border-top-width:0px} +.rn-borderRightWidth-fnigne{border-right-width:0px} +.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px} +.rn-borderLeftWidth-gxnn5r{border-left-width:0px} +.rn-boxSizing-deolkf{box-sizing:border-box} +.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex} +.rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex} +.rn-display-1471scf{display:inline} +.rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important} +.rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important} +.rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important} +.rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column} +.rn-flexDirection-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row} +.rn-marginTop-1mnahxq{margin-top:0px} +.rn-marginTop-1t01tom{margin-top:auto} +.rn-marginRight-61z16t{margin-right:0px} +.rn-marginRight-lchren{margin-right:auto} +.rn-marginBottom-p1pxzi{margin-bottom:0px} +.rn-marginBottom-1qahzrx{margin-bottom:auto} +.rn-marginLeft-11wrixw{margin-left:0px} +.rn-marginLeft-1jj8364{margin-left:auto} +.rn-minHeight-ifefl9{min-height:0px} +.rn-minWidth-bcqeeo{min-width:0px} +.rn-paddingTop-wk8lta{padding-top:0px} +.rn-paddingTop-tskmnb{padding-top:8px} +.rn-paddingRight-9aemit{padding-right:0px} +.rn-paddingRight-1pyaxff{padding-right:8px} +.rn-paddingBottom-1mdbw0j{padding-bottom:0px} +.rn-paddingBottom-xd6kpl{padding-bottom:8px} +.rn-paddingLeft-gy4na3{padding-left:0px} +.rn-paddingLeft-1m04atk{padding-left:8px} +.rn-zIndex-1lgpqti{z-index:0} +.rn-zIndex-1wyyakw{z-index:-1} +.rn-backgroundPosition-vvn4in{background-position:center} +.rn-backgroundRepeat-u6sd8q{background-repeat:no-repeat} +.rn-backgroundRepeat-17leim2{background-repeat:repeat} +.rn-backgroundSize-4gszlv{background-size:cover} +.rn-backgroundSize-1sxrcry{background-size:auto} +.rn-backgroundSize-ehq7j7{background-size:contain} +.rn-backgroundSize-x3cy2q{background-size:100% 100%} +.rn-height-1pi2tsx{height:100%} +.rn-height-z80fyv{height:20px} +.rn-height-1r8g8re{height:36px} +.rn-height-4v7adb{height:5px} +.rn-height-1dernwh{height:70%} +.rn-opacity-1272l3b{opacity:0} +.rn-opacity-6dt33c{opacity:1} +.rn-width-13qz1uu{width:100%} +.rn-width-19wmn03{width:20px} +.rn-width-1acpoxo{width:36px} +.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none} +.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate} +.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch} +.rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1} +.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important} +.rn-overflowX-11yh6sk{overflow-x:hidden} +.rn-overflowX-lltvgl{overflow-x:auto} +.rn-overflowY-1rnoaur{overflow-y:auto} +.rn-overflowY-buy8e9{overflow-y:hidden} +.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)} +.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif} +.rn-fontFamily-poiln3{font-family:inherit} +.rn-fontSize-1b43r93{font-size:14px} +.rn-fontSize-7cikom{font-size:inherit} +.rn-whiteSpace-q42fyq{white-space:pre-wrap} +.rn-whiteSpace-irrty{white-space:inherit} +.rn-whiteSpace-3s2u2q{white-space:nowrap} +.rn-wordWrap-qvutc0{word-wrap:break-word} +.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none} +.rn-maxWidth-dnmrzs{max-width:100%} +.rn-textOverflow-1udbk01{text-overflow:ellipsis} +.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center} +.rn-visibility-11j9u27{visibility:hidden} +.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s} +.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s} +.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} +.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation} +.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation} +.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear} +.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused} +.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s} +.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s} +.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity} +.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px} +.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%} +.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px} +.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px} +.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%} +.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px} +.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px} +.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%} +.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px} +.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px} +.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%} +.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px} +.rn-fontWeight-majxgm{font-weight:500} +.rn-textTransform-tsynxw{text-transform:uppercase} +.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start} +.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)} +.rn-borderTopColor-kqr9px{border-top-color:black} +.rn-borderRightColor-q0dj5p{border-right-color:black} +.rn-borderBottomColor-1ah7hsa{border-bottom-color:black} +.rn-borderLeftColor-137uh4u{border-left-color:black} +.rn-resize-1dz5y72{resize:none}", }, ] `; diff --git a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index 008e34ed..36fcf1f2 100644 --- a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -6,20 +6,24 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = ` aria-valuemax="1" aria-valuemin="0" style={ - Array [ - 15, - undefined, - ] + Object { + "alignItems": "center", + "justifyContent": "center", + } } > =0.1.1 <0.2.0-0", errno@^0.1.3: version "0.1.4" @@ -4382,7 +4383,7 @@ react-proxy@^1.1.7: lodash "^4.6.1" react-deep-force-update "^1.0.0" -react-test-renderer@^16.0.0: +react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0: version "16.0.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15" dependencies: @@ -4651,7 +4652,7 @@ ripemd160@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e" -rst-selector-parser@^2.2.1: +rst-selector-parser@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.2.tgz#9927b619bd5af8dc23a76c64caef04edf90d2c65" dependencies: