working on provider unit tests

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

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/test/simpleImg.test.js b/test/simpleImg.test.js
@@ -156,16 +156,11 @@ describe('SimpleImg', () => {
     expect(deleteSpy).toBeCalled();
   });
 
-  it('should remove image ref when component update and finished loaded', () => {
+  it('should remove image ref when component update and finished loaded with context', () => {
     const removeImageRefSpy = jest.fn();
     window.__REACT_SIMPLE_IMG__ = {
       observer: {
         observe: () => {},
-        unobserve: () => {},
-      },
-      imgLoadingRefs: {
-        set: () => {},
-        has: () => true,
       },
     };
 
@@ -181,4 +176,24 @@ describe('SimpleImg', () => {
 
     expect(removeImageRefSpy).toBeCalled();
   });
+
+  it('should remove image ref when component update and finished loaded with context', () => {
+    window.__REACT_SIMPLE_IMG__ = {
+      observer: {
+        observe: () => {},
+      },
+    };
+
+    const tree = shallow(<SimpleImg {...{ ...props, mountedImages: new Set([1]), useContext: false }} />);
+    const instance = tree.instance();
+    instance.element = {
+      current: 1,
+    };
+
+    tree.setProps({
+      src: 'test',
+    });
+
+    expect(tree.state('loaded')).toBeTruthy();
+  });
 });
diff --git a/test/simpleImgProvider.test.js b/test/simpleImgProvider.test.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import SimpleImgProvider from '../src/simpleImgProvider';
 
 const IntersectionObserverSpy = jest.fn();
 const observeSpy = jest.fn();
 const unobserveSpy = jest.fn();
 let IntersectionObserver;
-let tree;
 
 describe('SimpleImgProvider', () => {
   beforeEach(() => {
@@ -16,15 +15,14 @@ describe('SimpleImgProvider', () => {
     global.IntersectionObserver = IntersectionObserverSpy;
     global.IntersectionObserver.prototype.observe = observeSpy;
     global.IntersectionObserver.prototype.unobserve = unobserveSpy;
-    tree = mount(<SimpleImgProvider>test</SimpleImgProvider>);
   });
 
   afterEach(() => {
     global.IntersectionObserver = IntersectionObserver;
   });
 
   it('should render correctly', () => {
-    tree = renderer.create(
+    const tree = renderer.create(
       <SimpleImgProvider>
         <div>test</div>
       </SimpleImgProvider>,
@@ -34,10 +32,12 @@ describe('SimpleImgProvider', () => {
 
   describe('when window load event triggered', () => {
     it('should initialise IntersectionObserver and observe each images', () => {
+      mount(<SimpleImgProvider>test</SimpleImgProvider>);
       expect(IntersectionObserverSpy).toHaveBeenCalled();
     });
 
     it('should remove image from will mount images and update state', () => {
+      const tree = mount(<SimpleImgProvider>test</SimpleImgProvider>);
       tree.setState({
         mountedImages: new Set(['image', 'image1']),
       });
@@ -46,6 +46,7 @@ describe('SimpleImgProvider', () => {
     });
 
     it('should remove image from will mount images and update state', () => {
+      const tree = mount(<SimpleImgProvider>test</SimpleImgProvider>);
       tree.setState({
         mountedImages: new Set(['image', 'image1']),
       });
@@ -54,6 +55,7 @@ describe('SimpleImgProvider', () => {
     });
 
     describe('when all will mount images removed', () => {
+      const tree = mount(<SimpleImgProvider>test</SimpleImgProvider>);
       it('should remove image and reset mounted images', () => {
         tree.setState({
           mountedImages: new Set(['image1']),
@@ -63,4 +65,21 @@ describe('SimpleImgProvider', () => {
       });
     });
   });
+
+  it('should clear all images ref when component unmount', () => {
+    const tree = shallow(<SimpleImgProvider />);
+    const instance = tree.instance();
+    instance.imageLoadRefs = [{ src: 'test' }];
+    instance.componentWillUnmount();
+    expect(instance.imageLoadRefs).toEqual([{ src: '' }]);
+  });
+
+  it.only('should should start the observer when app loaded', () => {
+    Object.defineProperty(document, 'readyState', {
+      get() {
+        return 'loading';
+      },
+    });
+    // const tree = shallow(<SimpleImgProvider />);
+  });
 });