Updating react and tests

leandrowd · Apr 24, 2017 · 41d1199 · 41d1199
1 parent 76c7822
commit 41d1199
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,9 @@
     "browserify": "^12.0.1",
     "changelog": "^1.0.7",
     "connect-modrewrite": "^0.9.0",
+    "create-react-class": "^15.5.2",
     "css-loader": "^0.25.0",
+    "enzyme": "^2.8.2",
     "gh-pages": "^0.11.0",
     "gulp": "^3.8.9",
     "gulp-clean-css": "^2.0.12",
@@ -72,9 +74,10 @@
     "gulp-uglify": "^2.0.0",
     "gulp-util": "^3.0.0",
     "jest-cli": "^14.1.0",
-    "react": "^0.14.5",
-    "react-addons-test-utils": "^0.14.2",
-    "react-dom": "^0.14.2",
+    "prop-types": "^15.5.8",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "vinyl-source-stream": "^1.1.0",

diff --git a/src/__tests__/Carousel.js b/src/__tests__/Carousel.js
@@ -1,19 +1,16 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
 import ReactDOM from 'react-dom';
+import { shallow, mount } from 'enzyme';
 
 describe("Slider", function() {
-	const findByTag = TestUtils.scryRenderedDOMComponentsWithTag;
-	const findByClass = TestUtils.scryRenderedDOMComponentsWithClass;
-
 	jest.autoMockOff();
 
 	const Carousel = require('../components/Carousel');
 
 	let component, componentInstance, totalChildren, lastItemIndex;
 
 	const renderComponent = props => {
-		componentInstance = TestUtils.renderIntoDocument(
+		component = mount(
 	  		<Carousel {...props}>
 	  			<img src="assets/1.jpeg" />
 				<img src="assets/2.jpeg" />
@@ -25,6 +22,8 @@ describe("Slider", function() {
 	  		</Carousel>
 	  	);
 
+        componentInstance = component.instance();
+
         totalChildren = componentInstance.props.children.length;
         lastItemIndex = totalChildren - 1;
 	}
@@ -33,13 +32,6 @@ describe("Slider", function() {
 		renderComponent({});
 	});
 
-	afterEach(function() {
-		if (componentInstance && componentInstance.isMounted()) {
-	      // Only components with a parent will be unmounted
-	      ReactDOM.unmountComponentAtNode(document);
-	    }
-  	});
-
   	describe("Basics", () => {
         describe("DisplayName", () => {
             it('should be Slider', () => {
@@ -59,7 +51,11 @@ describe("Slider", function() {
                 useKeyboardArrows: false,
                 autoPlay: false,
                 stopOnHover: true,
-                interval: 3000
+                interval: 3000,
+                transitionTime: 350,
+                swipeScrollTolerance: 5,
+                dynamicHeight: false,
+                emulateTouch: false
             };
 
             Object.keys(props).forEach(prop => {
@@ -278,7 +274,7 @@ describe("Slider", function() {
     });
 
 	it("should add a thumb-wrapper container", () => {
-		expect(findByClass(componentInstance, 'thumbs-wrapper').length).toBe(1);
+		expect(component.find('.thumbs-wrapper').length).toBe(1);
 	});
 
 	describe("Moving", () => {
@@ -294,10 +290,10 @@ describe("Slider", function() {
 		});
 
 		it("should update the position of the Carousel if selectedItem is changed", () => {
-			TestUtils.Simulate.click(componentInstance['item2']);
+			component.ref('item2').simulate('click');
 			expect(componentInstance.state.selectedItem).toBe(2);
 
-			TestUtils.Simulate.click(componentInstance['item3']);
+            component.ref('item3').simulate('click');
 			expect(componentInstance.state.selectedItem).toBe(3);
 		});
 	})
@@ -306,10 +302,10 @@ describe("Slider", function() {
 		it("should set the index as selectedItem when clicked", () => {
 			expect(componentInstance.state.selectedItem).toBe(0);
 
-			TestUtils.Simulate.click(componentInstance['item1']);
+            component.ref('item1').simulate('click');
 			expect(componentInstance.state.selectedItem).toBe(1);
 
-			TestUtils.Simulate.click(componentInstance['item3']);
+            component.ref('item3').simulate('click');
 			expect(componentInstance.state.selectedItem).toBe(3);
 		});
 
@@ -318,7 +314,7 @@ describe("Slider", function() {
 
 			renderComponent({onClickItem: mockedFunction});
 
-			TestUtils.Simulate.click(componentInstance['item1']);
+            component.ref('item1').simulate('click');
 			expect(mockedFunction).toBeCalled();
 		});
 	})
@@ -329,20 +325,20 @@ describe("Slider", function() {
 		});
 
 		it("should disable the left arrow if we are showing the first item", () => {
-			TestUtils.Simulate.click(componentInstance['item0']);
+			component.ref('item0').simulate('click');
 			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(1);
 		});
 
 		it("should enable the left arrow if we are showing other than the first item", () => {
-			TestUtils.Simulate.click(componentInstance['item1']);
+			component.ref('item1').simulate('click');
 			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(0);
 		});
 
 		it("should disable the right arrow if we reach the lastPosition", () => {
-			TestUtils.Simulate.click(componentInstance['item1']);
+			component.ref('item1').simulate('click');
 			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(0);
 
-			TestUtils.Simulate.click(componentInstance['item6']);
+			component.ref('item6').simulate('click');
 			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(1);
 		});
 	});
@@ -355,12 +351,12 @@ describe("Slider", function() {
         });
 
         it("should enable the prev arrow if we are showing the first item", () => {
-            TestUtils.Simulate.click(componentInstance['item0']);
+            component.ref('item0').simulate('click');
             expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(0);
         });
 
         it("should enable the right arrow if we reach the lastPosition", () => {
-            TestUtils.Simulate.click(componentInstance['item6']);
+            component.ref('item6').simulate('click');
             expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(0);
         });
 

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -1,37 +1,40 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
+var PropTypes = require('prop-types');
+var CreateReactClass = require('create-react-class');
 var klass = require('../cssClasses');
 var merge = require('../object-assign');
 var CSSTranslate = require('../CSSTranslate');
 var Swipe = require('react-easy-swipe');
 var Thumbs = require('./Thumbs');
+var customPropTypes = require('../customPropTypes');
 
 // react-swipe was compiled using babel
 Swipe = Swipe.default;
 
-module.exports = React.createClass({
+module.exports = CreateReactClass({
     displayName: 'Slider',
     propTypes: {
-        children: React.PropTypes.node.isRequired,
-        showArrows: React.PropTypes.bool,
-        showStatus: React.PropTypes.bool,
-        showIndicators: React.PropTypes.bool,
-        infiniteLoop: React.PropTypes.bool,
-        showThumbs: React.PropTypes.bool,
-        selectedItem: React.PropTypes.number,
-        onClickItem: React.PropTypes.func,
-        onClickThumb: React.PropTypes.func,
-        onChange: React.PropTypes.func,
-        axis: React.PropTypes.oneOf(['horizontal', 'vertical']),
-        width: React.PropTypes.string,
-        useKeyboardArrows: React.PropTypes.bool,
-        autoPlay: React.PropTypes.bool,
-        stopOnHover: React.PropTypes.bool,
-        interval: React.PropTypes.number,
-        transitionTime: React.PropTypes.number,
-        swipeScrollTolerance: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
-        dynamicHeight: React.PropTypes.bool,
-        emulateTouch: React.PropTypes.bool
+        children: PropTypes.node.isRequired,
+        showArrows: PropTypes.bool,
+        showStatus: PropTypes.bool,
+        showIndicators: PropTypes.bool,
+        infiniteLoop: PropTypes.bool,
+        showThumbs: PropTypes.bool,
+        selectedItem: PropTypes.number,
+        onClickItem: PropTypes.func,
+        onClickThumb: PropTypes.func,
+        onChange: PropTypes.func,
+        axis: PropTypes.oneOf(['horizontal', 'vertical']),
+        width: customPropTypes.unit,
+        useKeyboardArrows: PropTypes.bool,
+        autoPlay: PropTypes.bool,
+        stopOnHover: PropTypes.bool,
+        interval: PropTypes.number,
+        transitionTime: PropTypes.number,
+        swipeScrollTolerance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        dynamicHeight: PropTypes.bool,
+        emulateTouch: PropTypes.bool
     },
 
     getDefaultProps () {
@@ -104,7 +107,7 @@ module.exports = React.createClass({
         this.autoPlay();
 
         if (this.props.stopOnHover) {
-            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            var carouselWrapper = this.refs['carouselWrapper'];
             carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
             carouselWrapper.addEventListener('touchstart', this.stopOnHover);
             carouselWrapper.addEventListener('mouseleave', this.autoPlay);
@@ -116,7 +119,7 @@ module.exports = React.createClass({
         this.clearAutoPlay();
 
         if (this.props.stopOnHover) {
-            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            var carouselWrapper = this.refs['carouselWrapper'];
             carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
             carouselWrapper.removeEventListener('touchstart', this.stopOnHover);
             carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
@@ -186,7 +189,7 @@ module.exports = React.createClass({
 
     updateSizes () {
         var isHorizontal = this.props.axis === 'horizontal';
-        var firstItem = ReactDOM.findDOMNode(this.item0);
+        var firstItem = this.refs.item0;
         var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
 
         this.setState({
@@ -256,7 +259,7 @@ module.exports = React.createClass({
     },
 
     onSwipeMove(delta) {
-        var list = ReactDOM.findDOMNode(this.itemList);
+        var list = ReactDOM.findDOMNode(this.refs.itemList);
         var isHorizontal = this.props.axis === 'horizontal';
 
         var initialBoundry = 0;
@@ -342,7 +345,7 @@ module.exports = React.createClass({
             var itemClass = klass.ITEM(true, index === this.state.selectedItem);
 
             return (
-                <li ref={node => this["item" + index] = node} key={"itemKey" + index} className={itemClass}
+                <li ref={"item" + index} key={"itemKey" + index} className={itemClass}
                     onClick={ this.handleClickItem.bind(this, index, item) }>
                     { item }
                 </li>
@@ -385,14 +388,17 @@ module.exports = React.createClass({
     },
 
     getInitialImage () {
-        var selectedItem = this.props.selectedItem;
-        var images = ReactDOM.findDOMNode(this['item' + selectedItem]).getElementsByTagName('img');
+        const selectedItem = this.props.selectedItem;
+        const item = this.refs[`item${selectedItem}`];
+        const images = item && item.getElementsByTagName('img');
         return images && images[selectedItem];
     },
 
     getVariableImageHeight (position) {
-        if (this.state.hasMount && this[`item${position}`].getElementsByTagName('img').length > 0) {
-            const image = this[`item${position}`].getElementsByTagName('img')[0];
+        const item = this.refs[`item${position}`];
+        const images = item && item.getElementsByTagName('img');
+        if (this.state.hasMount && images.length > 0) {
+            const image = images[0];
 
             if (!image.complete) {
                 // if the image is still loading, the size won't be available so we trigger a new render after it's done
@@ -404,7 +410,7 @@ module.exports = React.createClass({
                 image.addEventListener('load', onImageLoad);
             }
 
-            const height = this[`item${position}`].getElementsByTagName('img')[0].clientHeight;
+            const height = image.clientHeight;
             return height > 0 ? height : null;
         }
 
@@ -458,7 +464,7 @@ module.exports = React.createClass({
             onSwipeStart: this.onSwipeStart,
             onSwipeEnd: this.onSwipeEnd,
             style: itemListStyles,
-            ref: node => this.itemList = node
+            ref: 'itemList'
         };
 
         var containerStyles = {};
@@ -486,10 +492,10 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className={this.props.className} ref={node => this.carouselWrapper = node}>
+            <div className={this.props.className} ref="carouselWrapper">
                 <div className={klass.CAROUSEL(true)} style={{width: this.props.width || '100%'}}>
                     <button type="button" className={klass.ARROW_PREV(!hasPrev)} onClick={this.decrement} />
-                    <div className={klass.WRAPPER(true, this.props.axis)} style={containerStyles} ref={node => this.itemsWrapper = node}>
+                    <div className={klass.WRAPPER(true, this.props.axis)} style={containerStyles} ref="itemsWrapper">
                         <Swipe tagName="ul" {...swiperProps} allowMouseEvents={this.props.emulateTouch}>
                             { this.renderItems() }
                         </Swipe>

diff --git a/src/components/Thumbs.js b/src/components/Thumbs.js
@@ -1,5 +1,7 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
+var PropTypes = require('prop-types');
+var CreateReactClass = require('create-react-class');
 var klass = require('../cssClasses');
 var outerWidth = require('../dimensions').outerWidth;
 var CSSTranslate = require('../CSSTranslate');
@@ -8,12 +10,12 @@ var Swipe = require('react-easy-swipe');
 // react-swipe was compiled using babel
 Swipe = Swipe.default;
 
-module.exports = React.createClass({
+module.exports = CreateReactClass({
 
     propsTypes: {
-        children: React.PropTypes.element.isRequired,
-        transitionTime: React.PropTypes.number,
-        selectedItem: React.PropTypes.number
+        children: PropTypes.element.isRequired,
+        transitionTime: PropTypes.number,
+        selectedItem: PropTypes.number
     },
 
     getDefaultProps () {

diff --git a/src/customPropTypes.js b/src/customPropTypes.js
@@ -0,0 +1,9 @@
+export const unit = (props, propName, componentName) => {
+    if (!/(pt|px|em|rem|vw|vh|%)$/.test(props[propName])) {
+        return new Error(
+            'Invalid prop `' + propName + '` supplied to' +
+              ' `' + componentName + '`. Validation failed. It needs to be a size unit like pt, px, em, rem, vw, %'
+        );
+    }
+};
+
diff --git a/stories/index.js b/stories/index.js
@@ -78,7 +78,7 @@ storiesOf('Carousel', module)
     </Carousel>
   ))
   .add('fixed width', () => (
-    <Carousel width="700">
+    <Carousel width="700px">
         { baseChildren.props.children }
     </Carousel>
   ))