From 674d67e91ad0321988f246eef9498b88c520b33a Mon Sep 17 00:00:00 2001 From: Budi Irawan Date: Sat, 5 Sep 2015 15:56:27 +0700 Subject: [PATCH] [added] images component image testing done add docs add comment for props * Merge previous three samples (ImageCircle, ImageRounded, ImageThumbnail) to one sample file (ImageShape) * Add ImageResponsive and ImageShape in ReactPlayground.js * Add Image source include in Samples.js fix the comment * Fix eslint issue on Image.js * Fix eslint issue on ImageSpec.js * remove src and alt * refactor test code to test attribute not props fix eslint --- docs/examples/ImageResponsive.js | 5 +++ docs/examples/ImageShape.js | 17 +++++++++ docs/src/ComponentsPage.js | 17 +++++++++ docs/src/ReactPlayground.js | 1 + docs/src/Samples.js | 2 ++ src/Image.js | 52 +++++++++++++++++++++++++++ test/ImageSpec.js | 61 ++++++++++++++++++++++++++++++++ 7 files changed, 155 insertions(+) create mode 100644 docs/examples/ImageResponsive.js create mode 100644 docs/examples/ImageShape.js create mode 100644 src/Image.js create mode 100644 test/ImageSpec.js diff --git a/docs/examples/ImageResponsive.js b/docs/examples/ImageResponsive.js new file mode 100644 index 0000000000..a224e44ab0 --- /dev/null +++ b/docs/examples/ImageResponsive.js @@ -0,0 +1,5 @@ +const imageResponsiveInstance = ( + +); + +React.render(imageResponsiveInstance, mountNode); diff --git a/docs/examples/ImageShape.js b/docs/examples/ImageShape.js new file mode 100644 index 0000000000..51356c9862 --- /dev/null +++ b/docs/examples/ImageShape.js @@ -0,0 +1,17 @@ +const imageShapeInstance = ( + + + + + + + + + + + + + +); + +React.render(imageShapeInstance, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 8028755876..73b58804dc 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -904,6 +904,22 @@ const ComponentsPage = React.createClass({

Props

+ + {/* Images */} +
+

Images

+ +

Shape

+

Use the rounded, circle and thumbnail props to customise the image.

+ + +

Responsive

+

Use the responsive to scale image nicely to the parent element.

+ + +

Props

+ +
@@ -948,6 +964,7 @@ const ComponentsPage = React.createClass({ Tables Input Utilities + Images Back to top diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js index 8f3ec1d073..b97645a2ea 100644 --- a/docs/src/ReactPlayground.js +++ b/docs/src/ReactPlayground.js @@ -26,6 +26,7 @@ const FormControls = require('../../src/FormControls'); const Glyphicon = require('../../src/Glyphicon'); const Grid = require('../../src/Grid'); const Input = require('../../src/Input'); +const Image = require('../../src/Image'); const Jumbotron = require('../../src/Jumbotron'); const Label = require('../../src/Label'); const ListGroup = require('../../src/ListGroup'); diff --git a/docs/src/Samples.js b/docs/src/Samples.js index 3722bc3dc4..f2c8235683 100644 --- a/docs/src/Samples.js +++ b/docs/src/Samples.js @@ -105,6 +105,8 @@ export default { InputHorizontal: require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'), InputWrapper: require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'), MenuItem: require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'), + ImageResponsive: require('fs').readFileSync(__dirname + '/../examples/ImageResponsive.js', 'utf8'), + ImageShape: require('fs').readFileSync(__dirname + '/../examples/ImageShape.js', 'utf8'), Overlay: require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'), OverlayCustom: require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8') diff --git a/src/Image.js b/src/Image.js new file mode 100644 index 0000000000..cdc96aa5d7 --- /dev/null +++ b/src/Image.js @@ -0,0 +1,52 @@ +import React from 'react'; +import classNames from 'classnames'; + +const Image = React.createClass({ + + propTypes: { + + /** + * Sets image as responsive image + */ + responsive: React.PropTypes.bool, + + /** + * Sets image shape as rounded + */ + rounded: React.PropTypes.bool, + + /** + * Sets image shape as circle + */ + circle: React.PropTypes.bool, + + /** + * Sets image shape as thumbnail + */ + thumbnail: React.PropTypes.bool + }, + + getDefaultProps() { + return { + responsive: false, + rounded: false, + circle: false, + thumbnail: false + }; + }, + + render() { + const classes = { + 'img-responsive': this.props.responsive, + 'img-rounded': this.props.rounded, + 'img-circle': this.props.circle, + 'img-thumbnail': this.props.thumbnail + }; + + return ( + + ); + } +}); + +export default Image; diff --git a/test/ImageSpec.js b/test/ImageSpec.js new file mode 100644 index 0000000000..6597a45ac3 --- /dev/null +++ b/test/ImageSpec.js @@ -0,0 +1,61 @@ +import React from 'react'; +import ReactTestUtils from 'react/lib/ReactTestUtils'; +import Image from '../src/Image'; + +describe('Image', function() { + + it('should be an image', function() { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let image = React.findDOMNode(instance); + + image.nodeName.should.equal('IMG'); + }); + + it('should provide src and alt prop', function() { + let instance = ReactTestUtils.renderIntoDocument( + this is alt + ); + let image = React.findDOMNode(instance); + + assert.equal(image.getAttribute('src'), 'image.jpg'); + assert.equal(image.getAttribute('alt'), 'this is alt'); + }); + + it('should have correct class when responsive prop is set', function() { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let imageClassName = React.findDOMNode(instance).className; + + imageClassName.should.match(/\bimg-responsive\b/); + }); + + it('should have correct class when rounded prop is set', function() { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let imageClassName = React.findDOMNode(instance).className; + + imageClassName.should.match(/\bimg-rounded\b/); + }); + + it('should have correct class when circle prop is set', function() { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let imageClassName = React.findDOMNode(instance).className; + + imageClassName.should.match(/\bimg-circle\b/); + }); + + it('should have correct class when thumbnail prop is set', function() { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let imageClassName = React.findDOMNode(instance).className; + + imageClassName.should.match(/\bimg-thumbnail\b/); + }); +});