From 80325b981750424397e540a762fe6494452211ce Mon Sep 17 00:00:00 2001 From: Ethan Selzer Date: Thu, 19 Apr 2018 21:42:18 -0700 Subject: [PATCH] Introduce Positive Space Lens --- README.md | 9 + example/src/components/Header.js | 3 + example/src/components/Lens.js | 62 +++++++ example/src/pages/Home.js | 1 + example/src/pages/Lens.js | 40 ++++ example/src/router.js | 2 + src/ReactImageMagnify.js | 30 ++- .../negative-space}/Lens.js | 0 .../negative-space}/LensBottom.js | 2 +- .../negative-space}/LensLeft.js | 2 +- .../negative-space}/LensRight.js | 2 +- .../negative-space}/LensTop.js | 2 +- .../negative-space}/index.js | 6 +- src/lens/positive-space/assets/texture.gif | Bin 0 -> 327 bytes .../assets/textured-lens-data-uri.js | 1 + src/lens/positive-space/index.js | 124 +++++++++++++ test/lens/lens.spec.js | 2 +- ...ed-lens.spec.js => negative-space.spec.js} | 6 +- test/lens/positive-space.spec.js | 172 ++++++++++++++++++ test/react-image-magnify.spec.js | 109 ++++++----- 20 files changed, 518 insertions(+), 57 deletions(-) create mode 100644 example/src/components/Lens.js create mode 100644 example/src/pages/Lens.js rename src/{shaded-lens => lens/negative-space}/Lens.js (100%) rename src/{shaded-lens => lens/negative-space}/LensBottom.js (95%) rename src/{shaded-lens => lens/negative-space}/LensLeft.js (95%) rename src/{shaded-lens => lens/negative-space}/LensRight.js (95%) rename src/{shaded-lens => lens/negative-space}/LensTop.js (94%) rename src/{shaded-lens => lens/negative-space}/index.js (82%) create mode 100644 src/lens/positive-space/assets/texture.gif create mode 100644 src/lens/positive-space/assets/textured-lens-data-uri.js create mode 100644 src/lens/positive-space/index.js rename test/lens/{shaded-lens.spec.js => negative-space.spec.js} (90%) create mode 100644 test/lens/positive-space.spec.js diff --git a/README.md b/README.md index 920aaafe..81a44abb 100644 --- a/README.md +++ b/README.md @@ -94,6 +94,8 @@ See more usage examples in the [example project](https://github.com/ethanselzer/ | isHintEnabled | Boolean| false | Enable hint feature. | | hintTextMouse | String |Hover to Zoom| Hint text for mouse. | | hintTextTouch | String |Long-Touch to Zoom| Hint text for touch. | +| shouldUsePositiveSpaceLens | Boolean| false | Specify a positive space lens in place of the default negative space lens. | +| lensComponent | Function | (Provided) | Specify a custom lens component. | ### Small Image ``` @@ -179,6 +181,13 @@ Thanks to the following community members for opening Issues and Pull Requests. @spiderbites @Akarshit @eddy20vt +@evannoronha +@benjaminadk +@nilsklimm +@m4recek +@yaser-ali-vp +@carlgunderson +@tojvan You are awesome! ✨💫 diff --git a/example/src/components/Header.js b/example/src/components/Header.js index 6c23e5db..7dcf1a9e 100644 --- a/example/src/components/Header.js +++ b/example/src/components/Header.js @@ -39,6 +39,8 @@ class Navigation extends React.Component { return 2.5; case '/external' : return 2.6; + case '/lens' : + return 2.7; case '/image-magnify' : return 3.1; case '/support' : @@ -69,6 +71,7 @@ class Navigation extends React.Component { Enlarged Image Container Dimensions Carousel Integration External Enlarged Image + Alternate Lens Docs diff --git a/example/src/components/Lens.js b/example/src/components/Lens.js new file mode 100644 index 00000000..9964aab9 --- /dev/null +++ b/example/src/components/Lens.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react'; +import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify'; +import SpacedSpan from '../components/SpacedSpan'; + +import '../styles/examples.css'; + +import watchImg687 from '../images/wristwatch_687.jpg'; +import watchImg1200 from '../images/wristwatch_1200.jpg'; + +export default class BasicExample extends Component { + render() { + return ( +
+
+ +
+
+

Alternate Lens

+

+ Specify a positive space design + in place of the default negative space design. +

+

+ Optionally override the default appearance by specifying a custom style, for example: +

+ 
+                        lensStyle: {

+                          background: 'hsla(0, 0%, 100%, .3)',

+                          border: '1px solid #ccc'

+                        }
+
+

+ Support for a custom lens is provided by + the lensComponent prop. +

+

+ Please see + + + source code + + + for details. +

+
+
+
+ ); + } +} diff --git a/example/src/pages/Home.js b/example/src/pages/Home.js index ab85d61f..93e5a40d 100644 --- a/example/src/pages/Home.js +++ b/example/src/pages/Home.js @@ -39,6 +39,7 @@ export default class extends Component { Enlarged Image Container Dimensions Carousel Integration External Enlarged Image + Alternate Lens diff --git a/example/src/pages/Lens.js b/example/src/pages/Lens.js new file mode 100644 index 00000000..02334975 --- /dev/null +++ b/example/src/pages/Lens.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import { + Col, + Grid, + Jumbotron, + Row +} from 'react-bootstrap'; +import Helmet from 'react-helmet'; + +import Header from '../components/Header'; +import Lens from '../components/Lens'; + +import 'bootstrap/dist/css/bootstrap.css'; +import '../styles/app.css'; + +export default class extends Component { + render() { + return ( +
+ +
+ + + + + + + + + + + + + + + +
+ ); + } +} diff --git a/example/src/router.js b/example/src/router.js index fdd6da24..a2dd7642 100644 --- a/example/src/router.js +++ b/example/src/router.js @@ -7,6 +7,7 @@ import ResponsiveImages from './pages/ResponsiveImages'; import Hint from './pages/Hint'; import ReactSlickIntegration from './pages/ReactSlickIntegration'; import EnlargedImageContainerDimensions from './pages/EnlargedImageContainerDimensions'; +import Lens from './pages/Lens'; import FixedWidthSmallImage from './pages/FixedWidthSmallImage'; import ExternalEnlargedImage from './pages/ExternalEnlargedImage'; import Support from './pages/Support'; @@ -19,6 +20,7 @@ const Routes = (props) => ( + diff --git a/src/ReactImageMagnify.js b/src/ReactImageMagnify.js index b0fa733e..e4cbdd12 100644 --- a/src/ReactImageMagnify.js +++ b/src/ReactImageMagnify.js @@ -5,7 +5,8 @@ import React from 'react'; import ReactCursorPosition from 'react-cursor-position'; import RenderEnlargedImage from './RenderEnlargedImage'; -import ShadedLens from './shaded-lens'; +import NegativeSpaceLens from './lens/negative-space'; +import PositiveSpaceLens from './lens/positive-space'; import DisplayUntilActive from './hint/DisplayUntilActive'; import Hint from './hint/DefaultHint'; @@ -66,6 +67,8 @@ class ReactImageMagnify extends React.Component { imageClassName: PropTypes.string, imageStyle: PropTypes.object, lensStyle: PropTypes.object, + lensComponent: PropTypes.func, + shouldUsePositiveSpaceLens: PropTypes.bool, smallImage: SmallImageShape, largeImage: LargeImageShape, enlargedImageContainerClassName: PropTypes.string, @@ -96,7 +99,8 @@ class ReactImageMagnify extends React.Component { hintTextMouse: 'Hover to Zoom', hintTextTouch: 'Long-Touch to Zoom', hoverDelayInMs: 250, - hoverOffDelayInMs: 150 + hoverOffDelayInMs: 150, + shouldUsePositiveSpaceLens: false }; componentDidMount() { @@ -249,6 +253,23 @@ class ReactImageMagnify extends React.Component { ); } + get lensComponent() { + const { + shouldUsePositiveSpaceLens, + lensComponent + } = this.props; + + if (lensComponent) { + return lensComponent + } + + if (shouldUsePositiveSpaceLens) { + return PositiveSpaceLens; + } + + return NegativeSpaceLens; + } + render() { const { className, @@ -293,6 +314,8 @@ class ReactImageMagnify extends React.Component { this.enlargedImageContainerDimensions ); + const Lens = this.lensComponent; + return ( } {this.shouldShowLens && - diff --git a/src/shaded-lens/Lens.js b/src/lens/negative-space/Lens.js similarity index 100% rename from src/shaded-lens/Lens.js rename to src/lens/negative-space/Lens.js diff --git a/src/shaded-lens/LensBottom.js b/src/lens/negative-space/LensBottom.js similarity index 95% rename from src/shaded-lens/LensBottom.js rename to src/lens/negative-space/LensBottom.js index b39e0bf6..72df4674 100644 --- a/src/shaded-lens/LensBottom.js +++ b/src/lens/negative-space/LensBottom.js @@ -2,7 +2,7 @@ import React from 'react'; import objectAssign from 'object-assign'; import clamp from 'clamp'; import Lens from './Lens'; -import LensPropTypes from '../prop-types/Lens'; +import LensPropTypes from '../../prop-types/Lens'; const LensBottom = ({ cursorOffset, diff --git a/src/shaded-lens/LensLeft.js b/src/lens/negative-space/LensLeft.js similarity index 95% rename from src/shaded-lens/LensLeft.js rename to src/lens/negative-space/LensLeft.js index 54eeba67..b3eeafc0 100644 --- a/src/shaded-lens/LensLeft.js +++ b/src/lens/negative-space/LensLeft.js @@ -2,7 +2,7 @@ import React from 'react'; import objectAssign from 'object-assign'; import clamp from 'clamp'; import Lens from './Lens'; -import LensPropTypes from '../prop-types/Lens'; +import LensPropTypes from '../../prop-types/Lens'; const LensLeft = ({ cursorOffset, diff --git a/src/shaded-lens/LensRight.js b/src/lens/negative-space/LensRight.js similarity index 95% rename from src/shaded-lens/LensRight.js rename to src/lens/negative-space/LensRight.js index e210a1d4..23f722b8 100644 --- a/src/shaded-lens/LensRight.js +++ b/src/lens/negative-space/LensRight.js @@ -2,7 +2,7 @@ import React from 'react'; import objectAssign from 'object-assign'; import clamp from 'clamp'; import Lens from './Lens'; -import LensPropTypes from '../prop-types/Lens'; +import LensPropTypes from '../../prop-types/Lens'; const LensRight = ({ cursorOffset, diff --git a/src/shaded-lens/LensTop.js b/src/lens/negative-space/LensTop.js similarity index 94% rename from src/shaded-lens/LensTop.js rename to src/lens/negative-space/LensTop.js index 0e3f2257..c48cf206 100644 --- a/src/shaded-lens/LensTop.js +++ b/src/lens/negative-space/LensTop.js @@ -2,7 +2,7 @@ import React from 'react'; import clamp from 'clamp'; import objectAssign from 'object-assign'; import Lens from './Lens'; -import LensPropTypes from '../prop-types/Lens'; +import LensPropTypes from '../../prop-types/Lens'; const LensTop = ({ cursorOffset, diff --git a/src/shaded-lens/index.js b/src/lens/negative-space/index.js similarity index 82% rename from src/shaded-lens/index.js rename to src/lens/negative-space/index.js index 2f4df79c..ee8563fa 100644 --- a/src/shaded-lens/index.js +++ b/src/lens/negative-space/index.js @@ -6,9 +6,9 @@ import LensLeft from './LensLeft'; import LensRight from './LensRight'; import LensBottom from './LensBottom'; -import LensPropTypes from '../prop-types/Lens'; +import LensPropTypes from '../../prop-types/Lens'; -export default function ImageLensShaded(inputProps) { +export default function NegativeSpaceLens(inputProps) { const { style: userSpecifiedStyle } = inputProps; const compositLensStyle = objectAssign( @@ -32,4 +32,4 @@ export default function ImageLensShaded(inputProps) { ); } -ImageLensShaded.propTypes = LensPropTypes; +NegativeSpaceLens.propTypes = LensPropTypes; diff --git a/src/lens/positive-space/assets/texture.gif b/src/lens/positive-space/assets/texture.gif new file mode 100644 index 0000000000000000000000000000000000000000..31c883c6aacc4096fe7c095dd635cb29d312f4be GIT binary patch literal 327 zcmV-N0l5B0Nk%w1VPpVg0Pq0-bD!b(`12w81OWg50RSuj0001F0Av6F0{)DTsmtvT zqXU83im%Rm`wo6$NRHBprs`U@N8PMfRl!poc06S~jpX~qu literal 0 HcmV?d00001 diff --git a/src/lens/positive-space/assets/textured-lens-data-uri.js b/src/lens/positive-space/assets/textured-lens-data-uri.js new file mode 100644 index 00000000..e3fba85a --- /dev/null +++ b/src/lens/positive-space/assets/textured-lens-data-uri.js @@ -0,0 +1 @@ +export default 'data:image/gif;base64,R0lGODlhZABkAPABAHOf4fj48yH5BAEAAAEALAAAAABkAGQAAAL+jI+py+0PowOB2oqvznz7Dn5iSI7SiabqWrbj68bwTLL2jUv0Lvf8X8sJhzmg0Yc8mojM5kmZjEKPzqp1MZVqs7Cr98rdisOXr7lJHquz57YwDV8j3XRb/C7v1vcovD8PwicY8VcISDGY2GDIKKf4mNAoKQZZeXg5aQk5yRml+dgZ2vOpKGraQpp4uhqYKsgKi+H6iln7N8sXG4u7p2s7ykvnyxos/DuMWtyGfKq8fAwd5nzGHN067VUtiv2lbV3GDfY9DhQu7p1pXoU+rr5ODk/j7sSePk9Ub33PlN+4jx8v4JJ/RQQa3EDwzcGFiBLi6AfN4UOGCyXegGjIoh0fisQ0rsD4y+NHjgZFqgB5y2Qfks1UPmEZ0OVLlIcKAAA7'; diff --git a/src/lens/positive-space/index.js b/src/lens/positive-space/index.js new file mode 100644 index 00000000..f1ff08d8 --- /dev/null +++ b/src/lens/positive-space/index.js @@ -0,0 +1,124 @@ +import React, { Component } from 'react'; +import objectAssign from 'object-assign'; +import LensPropTypes from '../../prop-types/Lens'; +import clamp from 'clamp'; +import dataUri from './assets/textured-lens-data-uri'; + +export default class PositiveSpaceLens extends Component { + static propTypes = LensPropTypes + + static defaultProps = { + style: {} + } + + get dimensions() { + const { + cursorOffset: { + x: cursorOffsetX, + y: cursorOffsetY + } + } = this.props; + + return { + width: cursorOffsetX * 2, + height: cursorOffsetY * 2 + }; + } + + get positionOffset() { + const { + cursorOffset: { + x: cursorOffsetX, + y: cursorOffsetY + }, + position: { + x: positionX, + y: positionY + }, + smallImage: { + height: imageHeight, + width: imageWidth + } + } = this.props; + + const { + width, + height + } = this.dimensions + + const top = positionY - cursorOffsetY; + const left = positionX - cursorOffsetX; + const maxTop = imageHeight - height; + const maxLeft = imageWidth - width; + const minOffset = 0; + + return { + top: clamp(top, minOffset, maxTop), + left: clamp(left, minOffset, maxLeft) + }; + } + + get defaultStyle() { + const { fadeDurationInMs } = this.props; + + return { + transition: `opacity ${fadeDurationInMs}ms ease-in`, + backgroundImage: `url(${dataUri})` + }; + } + + get userSpecifiedStyle() { + const { + style + } = this.props; + + return style; + } + + get isVisible() { + const { + isActive, + isPositionOutside + } = this.props; + + return ( + isActive && + !isPositionOutside + ); + } + + get priorityStyle() { + const { + width, + height + } = this.dimensions + + const { + top, + left + } = this.positionOffset + + return { + position: 'absolute', + top: `${top}px`, + left: `${left}px`, + width: `${width}px`, + height: `${height}px`, + opacity: this.isVisible ? 1 : 0 + }; + } + + get compositStyle() { + return objectAssign( + this.defaultStyle, + this.userSpecifiedStyle, + this.priorityStyle + ); + } + + render() { + return ( +
+ ); + } +} diff --git a/test/lens/lens.spec.js b/test/lens/lens.spec.js index 9dace5e1..39c29152 100644 --- a/test/lens/lens.spec.js +++ b/test/lens/lens.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import { render } from 'enzyme'; import { expect } from 'chai'; -import Lens from '../../src/shaded-lens/Lens'; +import Lens from '../../src/lens/negative-space/Lens'; describe('Image Lens', () => { it('applies computed style', () => { diff --git a/test/lens/shaded-lens.spec.js b/test/lens/negative-space.spec.js similarity index 90% rename from test/lens/shaded-lens.spec.js rename to test/lens/negative-space.spec.js index be980dae..e92c92a5 100644 --- a/test/lens/shaded-lens.spec.js +++ b/test/lens/negative-space.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { expect } from 'chai'; -import ImageLensShaded from '../../src/shaded-lens'; +import Lens from '../../src/lens/negative-space'; describe('Shaded Lens', () => { const smallImage = { @@ -26,10 +26,10 @@ describe('Shaded Lens', () => { const defaultBackgroundStyle = { backgroundColor: 'rgba(0,0,0,.4)' }; - let mountedWrapper = mount(); + let mountedWrapper = mount(); beforeEach(() => { - mountedWrapper = mount(); + mountedWrapper = mount(); }); it('applies props to lens elements', () => { diff --git a/test/lens/positive-space.spec.js b/test/lens/positive-space.spec.js new file mode 100644 index 00000000..0662a914 --- /dev/null +++ b/test/lens/positive-space.spec.js @@ -0,0 +1,172 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { expect } from 'chai'; +import Lens from '../../src/lens/positive-space'; + +describe('Positive Space Lens', () => { + const smallImage = { + alt: 'baz', + isFluidWidth: false, + src: 'qux', + srcSet: 'quux', + sizes: 'grault', + width: 6, + height: 8 + }; + + const defaultProps = { + cursorOffset: { x: 1, y: 2 }, + fadeDurationInMs: 100, + isActive: true, + isPositionOutside: false, + position: { x: 3, y: 4 }, + smallImage, + style: {} + }; + + function getComponent(props) { + const compositProps = Object.assign( + {}, + defaultProps, + props + ); + + return shallow( + + ) + } + + let component = getComponent(); + + beforeEach(() => { + component = getComponent(); + }); + + it('defaults style to an empty object', () => { + const component = getComponent({ style: undefined }); + + expect(component.prop('style')).to.exist; + }) + + describe('Computed Functional Style', () => { + it('computes correct height', () => { + expect(component.prop('style').height).to.equal('4px'); + }); + + it('computes correct width', () => { + expect(component.prop('style').width).to.equal('2px'); + }); + + it('prioritizes user specified style over default style', () => { + const component = getComponent({ + style: { + transition: 'foo', + backgroundImage: 'bar' + } + }); + + expect(component.prop('style').transition).to.equal('foo'); + expect(component.prop('style').backgroundImage).to.equal('bar'); + }); + + it('prioritizes computed style over user specified style', () => { + const component = getComponent({ + style: { + position: 'foo', + top: 'bar', + left: 'baz', + width: 'qux', + height: 'grault', + opacity: 'foobar' + } + }); + + expect(component.prop('style')).to.include({ + position: 'absolute', + top: '2px', + left: '2px', + width: '2px', + height: '4px', + opacity: 1 + }); + }); + + describe('top', () => { + it('computes min correctly', () => { + const component = getComponent({ + position: { + x: 1, + y: 1 + } + }); + expect(component.prop('style').top).to.equal('0px') + }); + + it('computes midrange correctly', () => { + expect(component.prop('style').top).to.equal('2px') + }); + + it('computes max correctly', () => { + const component = getComponent({ + position: { + x: 1, + y: 7 + } + }); + expect(component.prop('style').top).to.equal('4px') + }); + }); + + describe('left', () => { + it('computes min correctly', () => { + const component = getComponent({ + cursorOffset: { + x: 2, + y: 2 + }, + position: { + x: 1, + y: 1 + } + }); + expect(component.prop('style').left).to.equal('0px') + }); + + it('computes mindrange correctly', () => { + expect(component.prop('style').left).to.equal('2px'); + }); + + it('computes max correctly', () => { + const component = getComponent({ + cursorOffset: { + x: 2, + y: 2 + }, + position: { + x: 5, + y: 1 + } + }); + expect(component.prop('style').left).to.equal('2px') + }); + }); + + describe('opacity', () => { + it('sets opacity to 1 when active and not outside bounds', () => { + expect(component.prop('style').opacity).to.equal(1); + }); + + it('sets opacity to 0 when not active and not outside bounds', () => { + const component = getComponent({ isActive: false }); + + expect(component.prop('style').opacity).to.equal(0); + }); + + it('sets opacity to 0 when active and outside bounds', () => { + const component = getComponent({ isPositionOutside: true }); + + expect(component.prop('style').opacity).to.equal(0); + }); + }); + }); +}); diff --git a/test/react-image-magnify.spec.js b/test/react-image-magnify.spec.js index 7161cc4c..e1a58ea9 100644 --- a/test/react-image-magnify.spec.js +++ b/test/react-image-magnify.spec.js @@ -6,6 +6,7 @@ import sinon from 'sinon'; import ReactImageMagnify from '../src/ReactImageMagnify'; import Hint from '../src/hint/DefaultHint'; +import PositiveSpaceLens from '../src/lens/positive-space'; import UserDefinedHint from './support/UserDefinedHint'; import { ENLARGED_IMAGE_POSITION } from '../src/constants'; import * as utils from '../src/utils'; @@ -91,7 +92,8 @@ describe('React Image Magnify', () => { shouldHideHintAfterFirstActivation: true, isHintEnabled: false, hintTextMouse: 'Hover to Zoom', - hintTextTouch: 'Long-Touch to Zoom' + hintTextTouch: 'Long-Touch to Zoom', + "shouldUsePositiveSpaceLens": false }); }); @@ -325,39 +327,6 @@ describe('React Image Magnify', () => { expect(style.height).to.equal('auto'); }); - it('provides fixed width smallImage to lens component', () => { - shallowWrapper - .setProps({ fadeDurationInMs: 1 }) - .setState({ isTouchDetected: false }); - - expect(shallowWrapper.find('ImageLensShaded').prop('smallImage')).to.deep.equal(smallImage); - }); - - it('provides fluid width smallImage to lens component', () => { - shallowWrapper.setProps({ - fadeDurationInMs: 1, - smallImage: Object.assign( - {}, - smallImage, - { - isFluidWidth: true, - } - ) - }); - shallowWrapper.setState({ isTouchDetected: false }) - - const expected = Object.assign( - {}, - smallImage, - { - isFluidWidth: true, - width: 0, - height: 0 - } - ); - expect(shallowWrapper.find('ImageLensShaded').prop('smallImage')).to.deep.equal(expected); - }); - it('provides fixed width smallImage to EnlargedImage component', () => { expect(mountedWrapper.find('EnlargedImage').prop('smallImage')).to.deep.equal(smallImage); }); @@ -589,14 +558,6 @@ describe('React Image Magnify', () => { }); }); - it('applies fadeDurationInMs to lens component', () => { - shallowWrapper - .setProps({ fadeDurationInMs: 1 }) - .setState({ isTouchDetected: false }); - - expect(shallowWrapper.find('ImageLensShaded').prop('fadeDurationInMs')).to.deep.equal(1); - }); - it('applies enlargedImageContainerClassName to EnlargedImage component', () => { mountedWrapper.setProps({ enlargedImageContainerClassName: 'foo' }); @@ -831,5 +792,69 @@ describe('React Image Magnify', () => { }); }); }); + + describe('Lens', () => { + it('defaults to negative space lens', () => { + expect(shallowWrapper.find('NegativeSpaceLens')).to.have.lengthOf(1); + }); + + it('can be configured to use positive space lens', () => { + shallowWrapper.setProps({ shouldUsePositiveSpaceLens: true }); + + expect(shallowWrapper.find('PositiveSpaceLens')).to.have.lengthOf(1); + }); + + it('can be configured to use a custom lens component', () => { + shallowWrapper.setProps({ lensComponent: PositiveSpaceLens }); + + expect(shallowWrapper.find('PositiveSpaceLens')).to.have.lengthOf(1); + }); + + it('applies fadeDurationInMs to lens component', () => { + shallowWrapper.setProps({ fadeDurationInMs: 1 }); + + expect(shallowWrapper.find('NegativeSpaceLens').prop('fadeDurationInMs')).to.deep.equal(1); + }); + + it('applies lensStyle to lens component', () => { + shallowWrapper.setProps({lensStyle: { foo: 'bar' }}); + + expect(shallowWrapper.find('NegativeSpaceLens').prop('style')).to.deep.equal({ foo: 'bar' }); + }); + + it('provides cursor offset to lens component', () => { + const actual = shallowWrapper.find('NegativeSpaceLens').prop('cursorOffset'); + + expect(actual).to.exist; + }); + + it('provides fixed width smallImage to lens component', () => { + expect(shallowWrapper.find('NegativeSpaceLens').prop('smallImage')).to.deep.equal(smallImage); + }); + + it('provides fluid width smallImage to lens component', () => { + shallowWrapper.setProps({ + fadeDurationInMs: 1, + smallImage: Object.assign( + {}, + smallImage, + { + isFluidWidth: true, + } + ) + }); + + const expected = Object.assign( + {}, + smallImage, + { + isFluidWidth: true, + width: 0, + height: 0 + } + ); + expect(shallowWrapper.find('NegativeSpaceLens').prop('smallImage')).to.deep.equal(expected); + }); + }); }); });