Merge pull request #48 from yahoo/addunittest

add unittest for viewport
yahoo · Sep 10, 2015 · 7b805fd · 7b805fd
2 parents 75fa52a + a4a1db8
commit 7b805fd
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 24 deletions.
diff --git a/tests/unit/utils/DebugDashboard.js b/tests/unit/utils/DebugDashboard.js
@@ -32,5 +32,6 @@ describe('clickHandler', function () {
         i13nNode.setDOMNode(domNode);
         var debugDashboard = new DebugDashboard(i13nNode);
         expect(document.getElementById('i13n-debug-0')).to.be.an('object');
+        debugDashboard.destroy();
     });
 });
diff --git a/tests/unit/utils/createI13nNode.js b/tests/unit/utils/createI13nNode.js
@@ -5,6 +5,7 @@
 /* globals describe,it,document,beforeEach,afterEach */
 'use strict';
 
+/* I13nMixin, I13nUtils, ViewportMixin are mainly tested with this higher order component */
 var expect = require('expect.js');
 var jsdom = require('jsdom');
 var mockery = require('mockery');
@@ -23,11 +24,21 @@ var mockData = {
     isViewportEnabled: false
 };
 var MockReactI13n = {};
-var mockViewport = {}
+var mockSubscribeHandler = null;
+var mockSubscribe = {
+    subscribe: function (eventName, handler) {
+        mockSubscribeHandler = handler;
+        return {
+            unsubscribe: function () {
+            }
+        }
+    }
+};
 var mockClickHandler = function () {};
 MockReactI13n.getInstance = function () {
     return mockData.reactI13n;
 };
+
 describe('createI13nNode', function () {
     beforeEach(function (done) {
         jsdom.env('<html><body></body></html>', [], function (err, window) {
@@ -46,7 +57,7 @@ describe('createI13nNode', function () {
             ReactTestUtils = require('react/lib/ReactTestUtils');
 
             mockery.registerMock('../libs/ReactI13n', MockReactI13n);
-            mockery.registerMock('./viewport/ViewportMixin', mockViewport);
+            mockery.registerMock('subscribe-ui-event', mockSubscribe);
             mockery.registerMock('../utils/clickHandler', mockClickHandler);
 
             createI13nNode = require('../../../../dist/utils/createI13nNode');
@@ -65,16 +76,6 @@ describe('createI13nNode', function () {
                     return mockData.isViewportEnabled;
                 }
             };
-
-            mockViewport = {
-                _detectViewport: function () {},
-                _detectHidden: function () {},
-                onEnterViewport: function (handler) {
-                    mockViewport._handleEnterViewport = handler;
-                },
-                subscribeViewportEvents: function () {},
-                unsubscribeViewportEvents: function () {}
-            };
 
             done();
         });
@@ -203,6 +204,7 @@ describe('createI13nNode', function () {
     });
 
     it('should handle scan the links inside if autoScanLinks is enable', function (done) {
+        mockData.isViewportEnabled = false;
         var TestComponent = React.createClass({
             displayName: 'TestComponent',
             render: function() {
@@ -296,29 +298,67 @@ describe('createI13nNode', function () {
     });
 
     it('should handle the case if we enable viewport checking', function (done) {
+        var TestSubComponent = React.createClass({
+            displayName: 'TestSubComponent',
+            render: function() {
+                return React.createElement('div');
+            }
+        });
+        var I13nTestSubComponent = createI13nNode(TestSubComponent);
         var TestComponent = React.createClass({
             displayName: 'TestComponent',
             render: function() {
-                return React.createElement('div');
+                return React.createElement(I13nTestSubComponent);
             }
         });
-        mockData.isViewportEnabled = true;
         var I13nTestComponent = createI13nNode(TestComponent);
-        mockData.reactI13n.execute = function (eventName) {
-            // should get a created event
-            expect(eventName).to.eql('created');
+        mockData.isViewportEnabled = true;
+        var executedArray = [];
+        mockData.reactI13n.execute = function (eventName, payload) {
+            executedArray.push(eventName);
         };
         var container = document.createElement('div');
         var component = React.render(React.createElement(I13nTestComponent, {}), container);
-        expect(rootI13nNode.getChildrenNodes()[0].isInViewport()).to.eql(false);
-        expect(component).to.be.an('object');
-        mockData.reactI13n.execute = function (eventName) {
-            // should get a created event
-            expect(eventName).to.eql('enterViewport');
+        // we wait 500ms and batch the viewport detection, wait 1000ms here util it's finished 
+        setTimeout(function () {
+            expect(executedArray[0]).to.be.equal('created');
+            expect(executedArray[1]).to.be.equal('created');
+            expect(executedArray[2]).to.be.equal('enterViewport');
+            expect(executedArray[3]).to.be.equal('enterViewport');
             done();
+        }, 1000);
+    });
+
+    it('should handle the case if we enable viewport checking with subComponents generated by scanLinks', function (done) {
+        mockData.isViewportEnabled = true;
+        var TestComponent = React.createClass({
+            displayName: 'TestComponent',
+            render: function() {
+                return React.createElement("div", null, 
+                    React.createElement("a", {href: "/foo"}, "foo"), 
+                    React.createElement("button", null, "bar")
+                );
+            }
+        });
+        var I13nTestComponent = createI13nNode(TestComponent);
+        var container = document.createElement('div');
+        // should get three created events
+        var executedArray = [];
+        mockData.reactI13n.execute = function (eventName) {
+            executedArray.push(eventName);
         };
-        mockViewport._handleEnterViewport(); // enter the viewport
-        expect(rootI13nNode.getChildrenNodes()[0].isInViewport()).to.eql(true);
+        var component = React.render(React.createElement(I13nTestComponent, {scanLinks: {enable: true}}), container);
+        // we wait 500ms and batch the viewport detection, wait 1000ms here util it's finished 
+        setTimeout(function () {
+            expect(executedArray[0]).to.be.equal('created');
+            expect(executedArray[1]).to.be.equal('created');
+            expect(executedArray[2]).to.be.equal('created');
+            expect(executedArray[3]).to.be.equal('enterViewport');
+            expect(executedArray[4]).to.be.equal('enterViewport');
+            expect(executedArray[5]).to.be.equal('enterViewport');
+            React.unmountComponentAtNode(container);
+            done();
+        }, 1000);
     });
 
     it('should not cause error if we pass a undefined to createI13nNode', function () {