Add unit tests

Author: Aljullu

src/components/LazyLoadComponent.spec.js

@@ -7,6 +7,9 @@ import Adapter from 'enzyme-adapter-react-16';
 import LazyLoadComponent from './LazyLoadComponent.jsx';
 import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
+
+jest.mock('../utils/intersection-observer');
 
 configure({ adapter: new Adapter() });
 
@@ -16,6 +19,16 @@ const {
 } = ReactTestUtils;
 
 describe('LazyLoadComponent', function() {
+  const windowIntersectionObserver = window.IntersectionObserver;
+
+  beforeEach(() => {
+    isIntersectionObserverAvailable.mockImplementation(() => false);
+  });
+
+  afterEach(() => {
+    window.IntersectionObserver = windowIntersectionObserver;
+  });
+
   it('renders a PlaceholderWithTracking when scrollPosition is undefined', function() {
     const lazyLoadComponent = mount(
       <LazyLoadComponent
@@ -30,6 +43,28 @@ describe('LazyLoadComponent', function() {
     expect(placeholderWithTracking.length).toEqual(1);
   });
 
+  it('renders a PlaceholderWithoutTracking when scrollPosition is undefined but IntersectionObserver is available', function() {
+    isIntersectionObserverAvailable.mockImplementation(() => true);
+    window.IntersectionObserver = jest.fn(function() {
+      this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+    });
+
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        style={{ marginTop: 100000 }}>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    const placeholderWithTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithTracking);
+    const placeholderWithoutTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithoutTracking);
+
+    expect(placeholderWithTracking.length).toEqual(0);
+    expect(placeholderWithoutTracking.length).toEqual(1);
+  });
+
   it('renders a PlaceholderWithoutTracking when scrollPosition is defined', function() {
     const lazyLoadComponent = mount(
       <LazyLoadComponent
@@ -39,9 +74,12 @@ describe('LazyLoadComponent', function() {
       </LazyLoadComponent>
     );
 
+    const placeholderWithTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithTracking);
     const placeholderWithoutTracking = scryRenderedComponentsWithType(
       lazyLoadComponent.instance(), PlaceholderWithoutTracking);
 
+    expect(placeholderWithTracking.length).toEqual(0);
     expect(placeholderWithoutTracking.length).toEqual(1);
   });
 

src/components/PlaceholderWithoutTracking.jsx

@@ -16,7 +16,8 @@ class PlaceholderWithoutTracking extends React.Component {
         const { threshold } = props;
 
         this.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver(
-          this.checkIntersections, { rootMargin: threshold + 'px' });
+          this.checkIntersections, { rootMargin: threshold + 'px' }
+        );
       }
     }
   }
@@ -120,7 +121,7 @@ PlaceholderWithoutTracking.propTypes = {
   scrollPosition: PropTypes.shape({
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
-  }).isRequired,
+  }),
   className: PropTypes.string,
   height: PropTypes.number,
   placeholder: PropTypes.element,

src/utils/intersection-observer.spec.js

@@ -0,0 +1,21 @@
+import isIntersectionObserverAvailable from './intersection-observer';
+
+describe('isIntersectionObserverAvailable', function() {
+  it('returns true if IntersectionObserver is available', function() {
+    window.IntersectionObserver = {};
+    window.IntersectionObserverEntry = {
+      prototype: {
+        isIntersecting: () => null,
+      },
+    };
+
+    expect(isIntersectionObserverAvailable()).toBe(true);
+  });
+
+  it('returns false if IntersectionObserver is not available', function() {
+    delete window.IntersectionObserver;
+    delete window.IntersectionObserverEntry;
+
+    expect(isIntersectionObserverAvailable()).toBe(false);
+  });
+});