Merge pull request #59 from lisamartin00/bug/src-empty-string

Default src to undefined instead of empty string

Author: tocker

src/components/Image/Image.js

@@ -15,7 +15,7 @@ class Image extends CloudinaryComponent {
     super(props, context);
     this.handleResize = this.handleResize.bind(this);
 
-    let state = {responsive: false, url: "", breakpoints: defaultBreakpoints};
+    let state = {responsive: false, url: undefined, breakpoints: defaultBreakpoints};
     this.state = Object.assign(state, this.prepareState(props, context));
   }
 

stories/index.js

@@ -61,6 +61,23 @@ storiesOf("Image", module)
       );
     })
   )
+  .add(
+    "responsive image with width/height styles applied",
+    withInfo({ text: "Basic tag" })(() => {
+      return (
+        <div style={{ width: '50%'}}>
+          <Image
+            style={{ width: '100%', height: '100%' }}
+            cloudName="demo"
+            publicId="sample"
+            crop="scale"
+            width="auto"
+            responsive
+          />
+        </div>
+      )
+    })
+  )
   .add(
     "image with alt",
     withInfo({ text: "Demostrate using an img tag attribute" })(() => {

test/ImageTest.js

@@ -32,7 +32,7 @@ describe('Image', () => {
     let tag2 = mount(<div width="300"><Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private" defaultImage="foobar" responsive responsiveUseBreakpoints /></div>);
     let tag = shallow(<Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private" defaultImage="foobar" responsive responsiveUseBreakpoints />);
     expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("");
+    expect(tag.state("url")).to.equal(undefined);
     expect(tag.props()).to.have.property('src');
 
     // We are checking for both snake_case and camelCase keys
@@ -65,4 +65,8 @@ describe('Image', () => {
       tag.setState({cyclicProp: obj1});
       tag.setState({cyclicProp: obj2});
   });
+  it("should render a src property with an undefined value if a src is not defined", function() {
+    let tag = mount(<Image cloudName="demo" />);
+    expect(tag.find('img').prop('src')).to.equal(undefined);
+  });
 });