fix(Presets): Removed unnecessary presets, changed API

added scaleBounds props, added new tests
react-armenia · Apr 2, 2017 · 09adc4a · 09adc4a
1 parent e3294a0
commit 09adc4a
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 134 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["react-native-stage-0", "react-native"]
+  "presets": ["react-native"]
 }
diff --git a/README.md b/README.md
@@ -8,6 +8,10 @@
 ```sh
 $ npm install react-native-view-editable --save
 ```
+or
+```sh
+$ yarn add react-native-view-editable
+```
 
 ### Usage
 ```javascript

diff --git a/__tests__/ViewEditor.js b/__tests__/ViewEditor.js
@@ -13,13 +13,45 @@ function getValueForKey(arr, key) {
 describe('ViewEditor Component', () => {
 	let component = null;
 	const onMoveCallback = jest.fn();
+	const onMoveEndCallback = jest.fn();
+	const fakeEvent = {
+		nativeEvent: {
+			changedTouches: 0,
+			identifier: 0,
+			locationX: 0,
+			locationY: 0,
+			pageX: 0,
+			pageY: 0,
+			target: 0,
+			timestamp: 0,
+			touches: {
+				pageX: 1,
+				pageY: 1,
+				locationX: 1,
+				locationY: 1
+			}
+		}
+	};
+	const fakeGestureState = {
+		numberActiveTouches: 1,
+		stateID: 1,
+		moveX: 1,
+		moveY: 1,
+		x0: 1,
+		y0: 1,
+		dx: 1,
+		dy: 1,
+		vx: 1,
+		vy: 1
+	};
 
 	beforeEach(() => {
 		component = renderer.create(
 			<ViewEditor
 				minScale={1}
 				maxScale={20}
 				onMove={onMoveCallback}
+				onMoveEnd={onMoveEndCallback}
 			>
 				<View>
 					<Text>Hello World</Text>
@@ -32,75 +64,62 @@ describe('ViewEditor Component', () => {
 		const componentJSON = component.toJSON();
 		expect(componentJSON).toMatchSnapshot();
 	});
-	it('should contain transform prop', () => {
-		// $FlowFixMe
-		const componentJSON = component.toJSON();
-		expect(componentJSON.props.style.transform).toBeInstanceOf(Array);
-	});
-	it('should add translateX and translateY props correctly', () => {
-		// $FlowFixMe
-		const componentJSON = component.toJSON();
-		const translateX = getValueForKey(componentJSON.props.style.transform, 'translateX');
-		const translateY = getValueForKey(componentJSON.props.style.transform, 'translateY');
+	describe('transformation', () => {
+		it('should contain transform prop', () => {
+			// $FlowFixMe
+			const componentJSON = component.toJSON();
+			expect(componentJSON.props.style.transform).toBeInstanceOf(Array);
+		});
+		it('should add translateX and translateY props correctly', () => {
+			// $FlowFixMe
+			const componentJSON = component.toJSON();
+			const translateX = getValueForKey(componentJSON.props.style.transform, 'translateX');
+			const translateY = getValueForKey(componentJSON.props.style.transform, 'translateY');
 
-		expect(translateX).toBeDefined();
-		expect(translateY).toBeDefined();
+			expect(translateX).toBeDefined();
+			expect(translateY).toBeDefined();
 
-		expect(translateX).toBe(0);
-		expect(translateY).toBe(0);
-	});
-	it('should add scale and rotate angle correctly', () => {
-		// $FlowFixMe
-		const componentJSON = component.toJSON();
-		const rotate = getValueForKey(componentJSON.props.style.transform, 'rotate');
-		const scale = getValueForKey(componentJSON.props.style.transform, 'scale');
+			expect(translateX).toBe(0);
+			expect(translateY).toBe(0);
+		});
+		it('should add scale and rotate angle correctly', () => {
+			// $FlowFixMe
+			const componentJSON = component.toJSON();
+			const rotate = getValueForKey(componentJSON.props.style.transform, 'rotate');
+			const scale = getValueForKey(componentJSON.props.style.transform, 'scale');
 
-		expect(rotate).toBeDefined();
-		expect(scale).toBeDefined();
+			expect(rotate).toBeDefined();
+			expect(scale).toBeDefined();
 
-		// expect(rotate).toBe('0deg');
-		expect(scale).toBe(1);
+			// expect(rotate).toBe('0deg');
+			expect(scale).toBe(1);
+		});
 	});
-	it('should call _getTransforms function and return transform values', () => {
-		// $FlowFixMe
-		const instance = component.getInstance();
-		expect(instance._getTransforms()).toBeInstanceOf(Object);
-		expect(instance._getTransforms().transform.length).toBe(4);
+	describe('_getTransforms method', () => {
+		it('should call _getTransforms function and return Object', () => {
+			// $FlowFixMe
+			const instance = component.getInstance();
+			expect(instance._getTransforms()).toBeInstanceOf(Object);
+		});
+		it('should return all transformation objects correctly', () => {
+			const instance = component.getInstance();
+			expect(instance._getTransforms().transform.length).toBe(4);
+		});
 	});
-	it('should call onMove prop on panning', () => {
+	describe('onMoveEnd prop', () => {
 		// $FlowFixMe
-		const instance = component.getInstance();
-		const fakeEvent = {
-			nativeEvent: {
-				changedTouches: 0,
-				identifier: 0,
-				locationX: 0,
-				locationY: 0,
-				pageX: 0,
-				pageY: 0,
-				target: 0,
-				timestamp: 0,
-				touches: {
-					pageX: 1,
-					pageY: 1,
-					locationX: 1,
-					locationY: 1
-				}
-			}
-		};
-		const fakeGestureState = {
-			numberActiveTouches: 1,
-			stateID: 1,
-			moveX: 1,
-			moveY: 1,
-			x0: 1,
-			y0: 1,
-			dx: 1,
-			dy: 1,
-			vx: 1,
-			vy: 1
-		};
-		instance._handlePanResponderMove(fakeEvent, fakeGestureState);
-		expect(onMoveCallback).toHaveBeenCalled();
+		it('should be called on touches release', () => {
+			const instance = component.getInstance();
+			instance._handlePanResponderEnd(fakeEvent, fakeGestureState);
+			expect(onMoveEndCallback).toHaveBeenCalled();
+		})
+	});
+	describe('onMove prop', () => {
+		it('should call onMove prop on panning', () => {
+			// $FlowFixMe
+			const instance = component.getInstance();
+			instance._handlePanResponderMove(fakeEvent, fakeGestureState);
+			expect(onMoveCallback).toHaveBeenCalled();
+		});
 	});
 });
diff --git a/__tests__/__snapshots__/common.js.snap b/__tests__/__snapshots__/common.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Common utils should generate array for given range 1`] = `
+exports[`Common utils generateArray should generate array for given range 1`] = `
 Array [
   0,
   1,

diff --git a/__tests__/common.js b/__tests__/common.js
@@ -2,9 +2,11 @@ import React from 'react';
 import { generateArray } from '../lib/utils';
 
 describe('Common utils', () => {
-	it('should generate array for given range', () => {
-		const arr = generateArray(360);
-		expect(arr.length).toBe(360);
-		expect(arr).toMatchSnapshot();
+	describe('generateArray', () => {
+		it('should generate array for given range', () => {
+			const arr = generateArray(360);
+			expect(arr.length).toBe(360);
+			expect(arr).toMatchSnapshot();
+		});
 	});
 });
diff --git a/__tests__/geometry.js b/__tests__/geometry.js
@@ -15,40 +15,53 @@ describe('Geometry calculations', () => {
 		{ pageX: 10, pageY: 5, locationX: 0, locationY: 0 },
 		{ pageX: 4, pageY: 5, locationX: 0, locationY: 0 }
 	];
-
-	it('should pow absolute values of two numbers', () => {
-		const a = -2;
-		const b = 5;
-		expect(pow2abs(2, 5)).toBe(9);
+	describe('pow2abs', () => {
+		it('should pow absolute values of two numbers', () => {
+			const a = -2;
+			const b = 5;
+			expect(pow2abs(2, 5)).toBe(9);
+		});
 	});
-	it('Return center of two coordinates', () => {
-		const result = {
-			x: 7,
-			y: 5
-		};
-		expect(centerTouches(touches)).toEqual(result)
+	describe('centerTouches', () => {
+		it('Return center of two coordinates', () => {
+			const result = {
+				x: 7,
+				y: 5
+			};
+			expect(centerTouches(touches)).toEqual(result)
+		});
 	});
-	it('should convert number to degree string', () => {
-		const number = 10;
-		const result = `${number}deg`;
-		expect(numberToDegree(number)).toBe(result);
+	describe('numberToDegree', () => {
+		it('should convert number to degree string', () => {
+			const number = 10;
+			const result = `${number}deg`;
+			expect(numberToDegree(number)).toBe(result);
+		});
 	});
-	it('should convert degree string to number', () => {
-		const degree = '10deg';
-		const result = 10;
-		expect(degreeToNumber(degree)).toBe(result);
+	describe('degreeToNumber', () => {
+		it('should convert degree string to number', () => {
+			const degree = '10deg';
+			const result = 10;
+			expect(degreeToNumber(degree)).toBe(result);
+		});
 	});
-	it('should return distance of two points(touches)', () => {
-		const result = 6;
-		expect(distanceBetweenTouches(touches)).toBe(result);
+	describe('distanceBetweenTouches', () => {
+		it('should return distance of two points(touches)', () => {
+			const result = 6;
+			expect(distanceBetweenTouches(touches)).toBe(result);
+		});
 	});
-	it('should convert number to degree', () => {
-		const angle = 90;
-		const result = angle * 180 / Math.PI
-		expect(toDeg(angle)).toBe(result);
+	describe('toDeg', () => {
+		it('should convert number to degree', () => {
+			const angle = 90;
+			const result = angle * 180 / Math.PI
+			expect(toDeg(angle)).toBe(result);
+		});
 	});
-	it('should return positive angle of two points', () => {
-		const result = 180;
-		expect(angle(touches)).toBe(result);
+	describe('angle', () => {
+		it('should return angle of two points', () => {
+			const result = 180;
+			expect(angle(touches)).toBe(result);
+		});
 	});
 });