diff --git a/src/modules/Image/ImageStylePropTypes.js b/src/modules/Image/ImageStylePropTypes.js index 55bb645a..0d8b3cd5 100644 --- a/src/modules/Image/ImageStylePropTypes.js +++ b/src/modules/Image/ImageStylePropTypes.js @@ -10,7 +10,7 @@ export default { transform: PropTypes.string } -export const ImageDefaultStyles = { +export const ImageDefaultStyle = { backgroundColor: 'lightGray', borderWidth: 0, maxWidth: '100%' diff --git a/src/modules/Image/index.js b/src/modules/Image/index.js index a1dd832c..e6b0288e 100644 --- a/src/modules/Image/index.js +++ b/src/modules/Image/index.js @@ -1,35 +1,34 @@ import { pickProps } from '../filterObjectProps' import { WebStyleComponent } from '../react-native-web-style' -import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes' +import ImageStylePropTypes, { ImageDefaultStyle } from './ImageStylePropTypes' import React, { PropTypes } from 'react' class Image extends React.Component { static propTypes = { - alt: PropTypes.string, - async: PropTypes.bool, + accessibilityLabel: PropTypes.string, className: PropTypes.string, - src: PropTypes.string, + source: PropTypes.string, style: PropTypes.shape(ImageStylePropTypes) } static defaultProps = { - async: true, className: '', - src: 'data:image/gif;base64,' + + source: 'data:image/gif;base64,' + 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' } render() { - const { alt, className, src, style, ...other } = this.props + const { accessibilityLabel, className, source, style, ...other } = this.props const filteredStyle = pickProps(style, Object.keys(ImageStylePropTypes)) - const mergedStyle = { ...ImageDefaultStyles, ...filteredStyle } + const mergedStyle = { ...ImageDefaultStyle, ...filteredStyle } return ( ) diff --git a/src/modules/Image/index.spec.js b/src/modules/Image/index.spec.js new file mode 100644 index 00000000..dfeec773 --- /dev/null +++ b/src/modules/Image/index.spec.js @@ -0,0 +1,64 @@ +import assert from 'assert' +import React from 'react/addons' + +import { ImageDefaultStyle } from './ImageStylePropTypes' +import Image from '.' + +const ReactTestUtils = React.addons.TestUtils + +function shallowRender(component, context = {}) { + const shallowRenderer = React.addons.TestUtils.createRenderer() + shallowRenderer.render(component, context) + return shallowRenderer.getRenderOutput() +} + +suite('Image', () => { + test('defaults', () => { + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) + + assert.equal((root.tagName).toLowerCase(), 'img') + }) + + test('prop "accessibilityLabel"', () => { + const label = 'accessibilityLabel' + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) + + assert.equal(root.getAttribute('alt'), label) + }) + + test('prop "className"', () => { + const className = 'className' + const result = shallowRender() + + assert.ok( + (result.props.className).indexOf(className) > -1, + '"className" was not transferred' + ) + }) + + test('prop "source"', () => { + const source = 'path-to-image' + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) + + assert.equal(root.getAttribute('src'), source) + }) + + test('prop "style"', () => { + const initial = shallowRender() + assert.deepEqual( + initial.props.style, + ImageDefaultStyle, + 'default "style" is incorrect' + ) + + const unsupported = shallowRender() + assert.deepEqual( + unsupported.props.style.unsupported, + null, + 'unsupported "style" properties must not be transferred' + ) + }) +})