unit tests improvement

beekai-oss · Feb 5, 2019 · 93d75cb · 93d75cb
1 parent e7a1a29
commit 93d75cb
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 62 deletions.
diff --git a/test/__snapshots__/simpleImg.test.js.snap b/test/__snapshots__/simpleImg.test.js.snap
@@ -27,26 +27,20 @@ exports[`SimpleImg should render background color 1`] = `
     }
     width={100}
   />
-  <Animate
-    durationSeconds={1}
-    endStyle={
+  <div
+    className="img className"
+    height={1000}
+    style={
       Object {
         "background": "red",
-        "height": 1000,
+        "height": "100%",
         "left": 0,
-        "opacity": 0,
         "position": "absolute",
         "top": 0,
+        "transition": "all 1s linear 0s",
         "width": "100%",
       }
     }
-    onCompleteStyle={
-      Object {
-        "display": "none",
-      }
-    }
-    play={false}
-    render={[Function]}
   />
 </span>
 `;
@@ -78,26 +72,20 @@ exports[`SimpleImg should render correctly 1`] = `
     }
     width={100}
   />
-  <Animate
-    durationSeconds={1}
-    endStyle={
+  <div
+    className="img className"
+    height={1000}
+    style={
       Object {
         "background": "white",
-        "height": 1000,
+        "height": "100%",
         "left": 0,
-        "opacity": 0,
         "position": "absolute",
         "top": 0,
+        "transition": "all 1s linear 0s",
         "width": "100%",
       }
     }
-    onCompleteStyle={
-      Object {
-        "display": "none",
-      }
-    }
-    play={false}
-    render={[Function]}
   />
 </span>
 `;
@@ -129,26 +117,20 @@ exports[`SimpleImg should render only span when place holder src is not supplied
     }
     width={100}
   />
-  <Animate
-    durationSeconds={1}
-    endStyle={
+  <div
+    className="img className"
+    height={1000}
+    style={
       Object {
         "background": "white",
-        "height": 1000,
+        "height": "100%",
         "left": 0,
-        "opacity": 0,
         "position": "absolute",
         "top": 0,
+        "transition": "all 1s linear 0s",
         "width": "100%",
       }
     }
-    onCompleteStyle={
-      Object {
-        "display": "none",
-      }
-    }
-    play={false}
-    render={[Function]}
   />
 </span>
 `;
@@ -181,25 +163,23 @@ exports[`SimpleImg should render out as image data 1`] = `
     }
     width={100}
   />
-  <Animate
-    durationSeconds={1}
-    endStyle={
+  <img
+    alt="alt"
+    className="img className"
+    height={1000}
+    sizes="sizes"
+    src="data:image//test"
+    style={
       Object {
-        "height": 1000,
+        "height": "100%",
         "left": 0,
-        "opacity": 0,
         "position": "absolute",
         "top": 0,
+        "transition": "all 1s linear 0s",
         "width": "100%",
       }
     }
-    onCompleteStyle={
-      Object {
-        "display": "none",
-      }
-    }
-    play={false}
-    render={[Function]}
+    width={100}
   />
 </span>
 `;
@@ -232,25 +212,23 @@ exports[`SimpleImg should render out placeholder as image 1`] = `
     }
     width={100}
   />
-  <Animate
-    durationSeconds={1}
-    endStyle={
+  <img
+    alt="alt"
+    className="img className"
+    height={1000}
+    sizes="sizes"
+    src="/test/image.jpg"
+    style={
       Object {
-        "height": 1000,
+        "height": "100%",
         "left": 0,
-        "opacity": 0,
         "position": "absolute",
         "top": 0,
+        "transition": "all 1s linear 0s",
         "width": "100%",
       }
     }
-    onCompleteStyle={
-      Object {
-        "display": "none",
-      }
-    }
-    play={false}
-    render={[Function]}
+    width={100}
   />
 </span>
 `;
diff --git a/test/simpleImg.test.js b/test/simpleImg.test.js
@@ -3,8 +3,6 @@ import renderer from 'react-test-renderer';
 import { shallow, mount } from 'enzyme';
 import { SimpleImg } from '../src/simpleImg';
 
-jest.mock('react-simple-animate', () => ({ Animate: 'Animate' }));
-
 const appendImageRef = jest.fn();
 const removeImageRef = jest.fn();
 const removeImgLoadingRef = jest.fn();
@@ -126,4 +124,61 @@ describe('SimpleImg', () => {
     tree.instance().setDocumentLoaded();
     expect(tree.state('isDocumentLoad')).toBeTruthy();
   });
+
+  it('should remove image refs on componentWillUnmount', () => {
+    const deleteSpy = jest.fn();
+    const getSpy = jest.fn();
+
+    window.__REACT_SIMPLE_IMG__ = {
+      observer: {
+        observe: () => {},
+        unobserve: () => {},
+      },
+      imgLoadingRefs: {
+        set: () => {},
+        delete: deleteSpy,
+        get: getSpy,
+        has: () => true,
+      },
+    };
+
+    const tree = shallow(<SimpleImg {...{ ...props, useContext: false }} />);
+    const instance = tree.instance();
+    getSpy.mockReturnValueOnce({
+      src: 'test',
+    });
+    instance.element = {
+      current: 1,
+    };
+    instance.componentWillUnmount();
+
+    expect(getSpy).toBeCalled();
+    expect(deleteSpy).toBeCalled();
+  });
+
+  it('should remove image ref when component update and finished loaded', () => {
+    const removeImageRefSpy = jest.fn();
+    window.__REACT_SIMPLE_IMG__ = {
+      observer: {
+        observe: () => {},
+        unobserve: () => {},
+      },
+      imgLoadingRefs: {
+        set: () => {},
+        has: () => true,
+      },
+    };
+
+    const tree = shallow(<SimpleImg {...{ ...props, mountedImages: new Set([1]), removeImageRef: removeImageRefSpy, useContext: true }} />);
+    const instance = tree.instance();
+    instance.element = {
+      current: 1,
+    };
+
+    tree.setState({
+      isDocumentLoad: true,
+    });
+
+    expect(removeImageRefSpy).toBeCalled();
+  });
 });