Add 'Image' tests

This commit is contained in:
Nicolas Gallagher
2015-09-01 17:07:52 -07:00
parent 1417dd2e6a
commit fb7a997256
3 changed files with 73 additions and 10 deletions

View File

@@ -10,7 +10,7 @@ export default {
transform: PropTypes.string
}
export const ImageDefaultStyles = {
export const ImageDefaultStyle = {
backgroundColor: 'lightGray',
borderWidth: 0,
maxWidth: '100%'

View File

@@ -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 (
<WebStyleComponent
{...other}
alt={alt}
alt={accessibilityLabel}
className={`Image ${className}`}
component='img'
src={source}
style={mergedStyle}
/>
)

View File

@@ -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(<Image />)
const root = React.findDOMNode(result)
assert.equal((root.tagName).toLowerCase(), 'img')
})
test('prop "accessibilityLabel"', () => {
const label = 'accessibilityLabel'
const result = ReactTestUtils.renderIntoDocument(<Image accessibilityLabel={label} />)
const root = React.findDOMNode(result)
assert.equal(root.getAttribute('alt'), label)
})
test('prop "className"', () => {
const className = 'className'
const result = shallowRender(<Image className={className} />)
assert.ok(
(result.props.className).indexOf(className) > -1,
'"className" was not transferred'
)
})
test('prop "source"', () => {
const source = 'path-to-image'
const result = ReactTestUtils.renderIntoDocument(<Image source={source} />)
const root = React.findDOMNode(result)
assert.equal(root.getAttribute('src'), source)
})
test('prop "style"', () => {
const initial = shallowRender(<Image />)
assert.deepEqual(
initial.props.style,
ImageDefaultStyle,
'default "style" is incorrect'
)
const unsupported = shallowRender(<Image style={{ unsupported: 'true' }} />)
assert.deepEqual(
unsupported.props.style.unsupported,
null,
'unsupported "style" properties must not be transferred'
)
})
})