mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
Add 'Image' tests
This commit is contained in:
@@ -10,7 +10,7 @@ export default {
|
||||
transform: PropTypes.string
|
||||
}
|
||||
|
||||
export const ImageDefaultStyles = {
|
||||
export const ImageDefaultStyle = {
|
||||
backgroundColor: 'lightGray',
|
||||
borderWidth: 0,
|
||||
maxWidth: '100%'
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
|
||||
64
src/modules/Image/index.spec.js
Normal file
64
src/modules/Image/index.spec.js
Normal 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'
|
||||
)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user