From dfd3c57637669ae219b833615beea2ba45eda71c Mon Sep 17 00:00:00 2001 From: Jouderian Nobre Date: Sat, 28 Oct 2017 17:32:58 -0300 Subject: [PATCH 1/4] test: Add tests to ImageZoom component --- __tests__/tests/components/ImageZoom.js | 56 +++++++++++++++++++++++++ src/components/image-zoom.component.js | 23 ++++++++-- 2 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 __tests__/tests/components/ImageZoom.js diff --git a/__tests__/tests/components/ImageZoom.js b/__tests__/tests/components/ImageZoom.js new file mode 100644 index 000000000..5f282ae58 --- /dev/null +++ b/__tests__/tests/components/ImageZoom.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { ImageZoom } from 'components'; + +describe('', () => { + const defaultProps = { + style: { backgroundColor: 'red' }, + uri: { uri: 'dummy.png' }, + }; + + it('should render clickable image', () => { + const wrapper = shallow(); + + const clickableImg = wrapper.find({ nativeId: 'image-zoom-clickable-img' }); + + expect(clickableImg.length).toBe(1); + }); + + it('should render Modal when the user presses Touchable', () => { + const wrapper = shallow(); + + wrapper.simulate('press'); + + const modal = wrapper.find({ nativeId: 'image-zoom-modal' }); + + expect(modal.length).toBe(1); + }); + + it('should close modal when onRequestClose is called', () => { + const wrapper = shallow(); + wrapper.setState({ imgZoom: true }); + + wrapper.props().onRequestClose(); + + expect(wrapper.state('imgZoom')).toBeFalsy(); + }); + + it('should close modal when the user presses CloseButton', () => { + const wrapper = shallow(); + wrapper.setState({ imgZoom: true }); + + wrapper.find({ nativeId: 'image-zoom-close-button' }).simulate('press'); + + expect(wrapper.state('imgZoom')).toBeFalsy(); + }); + + it('should close modal when the user taps the image', () => { + const wrapper = shallow(); + wrapper.setState({ imgZoom: true }); + + wrapper.find({ nativeId: 'image-zoom-photo-view' }).simulate('tap'); + + expect(wrapper.state('imgZoom')).toBeFalsy(); + }); +}); diff --git a/src/components/image-zoom.component.js b/src/components/image-zoom.component.js index 1d6d13690..dda12afff 100644 --- a/src/components/image-zoom.component.js +++ b/src/components/image-zoom.component.js @@ -68,11 +68,22 @@ export class ImageZoom extends Component { if (this.state.imgZoom) { return ( - this.closeModal()}> + this.closeModal()} + > - this.closeModal()} source={uri} /> + this.closeModal()} + source={uri} + /> - this.closeModal()}> + this.closeModal()} + > @@ -81,7 +92,11 @@ export class ImageZoom extends Component { } return ( - this.openModal()} underlayColor="transparent"> + this.openModal()} + underlayColor="transparent" + > ); From ee309ad33eab9766491438a7559daa1177af6011 Mon Sep 17 00:00:00 2001 From: Jouderian Nobre Date: Sat, 28 Oct 2017 22:37:40 -0300 Subject: [PATCH 2/4] chore: Fix verbiage in ImageZoom test --- __tests__/tests/components/ImageZoom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/tests/components/ImageZoom.js b/__tests__/tests/components/ImageZoom.js index 5f282ae58..10f6ffafc 100644 --- a/__tests__/tests/components/ImageZoom.js +++ b/__tests__/tests/components/ImageZoom.js @@ -17,7 +17,7 @@ describe('', () => { expect(clickableImg.length).toBe(1); }); - it('should render Modal when the user presses Touchable', () => { + it('should render modal when the user presses Touchable', () => { const wrapper = shallow(); wrapper.simulate('press'); From 1b01ecae72f5a6c922c86a682745291b581ab1a7 Mon Sep 17 00:00:00 2001 From: Jouderian Nobre Date: Thu, 2 Nov 2017 23:41:47 -0300 Subject: [PATCH 3/4] perf: Improve method calls in image-zoom component --- src/components/image-zoom.component.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/image-zoom.component.js b/src/components/image-zoom.component.js index dda12afff..a98fc61fc 100644 --- a/src/components/image-zoom.component.js +++ b/src/components/image-zoom.component.js @@ -53,6 +53,9 @@ export class ImageZoom extends Component { this.state = { imgZoom: false, }; + + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); } openModal() { @@ -71,18 +74,18 @@ export class ImageZoom extends Component { this.closeModal()} + onRequestClose={this.closeModal} > this.closeModal()} + onTap={this.closeModal} source={uri} /> this.closeModal()} + onPress={this.closeModal} > @@ -94,7 +97,7 @@ export class ImageZoom extends Component { return ( this.openModal()} + onPress={this.openModal} underlayColor="transparent" > From 6757a3c59e50c414b22cc521bc039bd921529df3 Mon Sep 17 00:00:00 2001 From: Jouderian Nobre Date: Thu, 2 Nov 2017 23:42:39 -0300 Subject: [PATCH 4/4] test: Improve ImageZoom test --- __tests__/tests/components/ImageZoom.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/__tests__/tests/components/ImageZoom.js b/__tests__/tests/components/ImageZoom.js index 10f6ffafc..4bf0c7cf1 100644 --- a/__tests__/tests/components/ImageZoom.js +++ b/__tests__/tests/components/ImageZoom.js @@ -9,7 +9,7 @@ describe('', () => { uri: { uri: 'dummy.png' }, }; - it('should render clickable image', () => { + it('should render clickable image when the component initializes', () => { const wrapper = shallow(); const clickableImg = wrapper.find({ nativeId: 'image-zoom-clickable-img' }); @@ -20,7 +20,7 @@ describe('', () => { it('should render modal when the user presses Touchable', () => { const wrapper = shallow(); - wrapper.simulate('press'); + wrapper.find({ nativeId: 'image-zoom-clickable-img' }).simulate('press'); const modal = wrapper.find({ nativeId: 'image-zoom-modal' }); @@ -31,9 +31,11 @@ describe('', () => { const wrapper = shallow(); wrapper.setState({ imgZoom: true }); - wrapper.props().onRequestClose(); + wrapper.find({ nativeId: 'image-zoom-modal' }).simulate('requestClose'); - expect(wrapper.state('imgZoom')).toBeFalsy(); + const modal = wrapper.find({ nativeId: 'image-zoom-modal' }); + + expect(modal.length).toBe(0); }); it('should close modal when the user presses CloseButton', () => {