feat(core/lifecycle-event): emits render when render

When all the widgets are finished rendering for each search response.

Author: Alexandre Stanislawski

example/app.js

@@ -159,4 +159,8 @@ search.addWidget(
   })
 );
 
+search.once('render', function() {
+  document.querySelector('.search').className = 'row search search--visible';
+});
+
 search.start();

example/index.html

@@ -17,7 +17,7 @@
       <h1>Instant search demo <small>using instantsearch.js</small></h1>
     </div>
 
-    <div class="row">
+    <div class="row search search--hidden">
       <div class="col-md-3">
         <div class="panel panel-default" id="categories"></div>
 

example/style.css

@@ -8,6 +8,18 @@ body {
   padding: 2em 0;
 }
 
+.search {
+  transition: opacity 200ms;
+}
+
+.search--hidden {
+  opacity: 0;
+}
+
+.search--visible {
+
+}
+
 /* Hits widget */
 .hit + .hit {
   margin-top: 1em;

lib/InstantSearch.js

@@ -5,14 +5,17 @@ var forEach = require('lodash/collection/forEach');
 var merge = require('lodash/object/merge');
 var union = require('lodash/array/union');
 
-class InstantSearch {
+var EventEmitter = require('events').EventEmitter;
+
+class InstantSearch extends EventEmitter {
   constructor({
     appId = null,
     apiKey = null,
     indexName = null,
     numberLocale = 'en-EN',
     searchParameters = {}
   }) {
+    super();
     if (appId === null || apiKey === null || indexName === null) {
       var usage = `
 Usage: instantsearch({
@@ -92,6 +95,7 @@ Usage: instantsearch({
         helper
       });
     }, this);
+    this.emit('render');
   }
 
   _init(state, helper) {

lib/__tests__/InstantSearch-test.js

@@ -176,4 +176,54 @@ describe('InstantSearch lifecycle', () => {
       expect(algoliasearchHelper.args[0][2].values).toEqual([-2, -1, 0, 1, 3, 4, 2]);
     });
   });
+
+  context('when render happens', () => {
+    var render = sinon.spy();
+    beforeEach(() => {
+      render.reset();
+      var widgets = range(5).map(() => { return {render}; });
+
+      widgets.forEach(search.addWidget, search);
+
+      search.start();
+    });
+
+    it('emits render when all render are done (using on)', () => {
+      var onRender = sinon.spy();
+      search.on('render', onRender);
+
+      expect(render.callCount).toEqual(0);
+      expect(onRender.callCount).toEqual(0);
+
+      helper.emit('result', {}, helper.state);
+
+      expect(render.callCount).toEqual(5);
+      expect(onRender.callCount).toEqual(1);
+      expect(render.calledBefore(onRender)).toBe(true);
+
+      helper.emit('result', {}, helper.state);
+
+      expect(render.callCount).toEqual(10);
+      expect(onRender.callCount).toEqual(2);
+    });
+
+    it('emits render when all render are done (using once)', () => {
+      var onRender = sinon.spy();
+      search.once('render', onRender);
+
+      expect(render.callCount).toEqual(0);
+      expect(onRender.callCount).toEqual(0);
+
+      helper.emit('result', {}, helper.state);
+
+      expect(render.callCount).toEqual(5);
+      expect(onRender.callCount).toEqual(1);
+      expect(render.calledBefore(onRender)).toBe(true);
+
+      helper.emit('result', {}, helper.state);
+
+      expect(render.callCount).toEqual(10);
+      expect(onRender.callCount).toEqual(1);
+    });
+  });
 });

package.json

@@ -61,6 +61,7 @@
     "algoliasearch": "^3.8.0",
     "algoliasearch-helper": "^2.5.0",
     "classnames": "^2.1.5",
+    "events": "^1.1.0",
     "hogan.js": "^3.0.2",
     "lodash": "^3.10.1",
     "react": "^0.14.0",