feat(poweredBy): automatically add utm link to poweredBy

fixes #711

Author: vvo

src/components/PoweredBy/PoweredBy.js

@@ -5,7 +5,7 @@ class PoweredBy extends React.Component {
     return (
       <div className={this.props.cssClasses.root}>
         Search by
-        <a className={this.props.cssClasses.link} href="https://www.algolia.com/" target="_blank">Algolia</a>
+        <a className={this.props.cssClasses.link} href={this.props.link} target="_blank">Algolia</a>
       </div>
     );
   }
@@ -15,7 +15,8 @@ PoweredBy.propTypes = {
   cssClasses: React.PropTypes.shape({
     root: React.PropTypes.string,
     link: React.PropTypes.string
-  })
+  }),
+  link: React.PropTypes.string.isRequired
 };
 
 export default PoweredBy;

src/components/PoweredBy/__tests__/PoweredBy-test.js

@@ -21,12 +21,13 @@ describe('PoweredBy', () => {
       cssClasses: {
         root: 'pb-root',
         link: 'pb-link'
-      }
+      },
+      link: 'www.google.com'
     });
     expect(out).toEqualJSX(
     <div className="pb-root">
       Search by
-      <a className="pb-link" href="https://www.algolia.com/" target="_blank">Algolia</a>
+      <a className="pb-link" href="www.google.com" target="_blank">Algolia</a>
     </div>);
   });
 

src/widgets/search-box/__tests__/search-box-test.js

@@ -16,20 +16,17 @@ function createHTMLNodeFromString(string) {
   return parent.firstChild;
 }
 
-describe('search-box()', () => {
+describe('searchBox()', () => {
   beforeEach(function() {this.jsdom = jsdom();});
   afterEach(function() {this.jsdom();});
 
-  let ReactDOM;
   let container;
   let state;
   let helper;
   let widget;
   let onHistoryChange;
 
   beforeEach(() => {
-    ReactDOM = {render: sinon.spy()};
-    searchBox.__Rewire__('ReactDOM', ReactDOM);
     state = {
       query: ''
     };
@@ -193,13 +190,17 @@ describe('search-box()', () => {
     it('do not add the poweredBy if not specified', () => {
       widget = searchBox({container});
       widget.init({state, helper, onHistoryChange});
-      expect(ReactDOM.render.notCalled).toBe(true);
+      expect(container.querySelector('.ais-search-box--powered-by')).toBe(null);
     });
 
-    it('add the poweredBy if specified', () => {
+    it('adds the poweredBy if specified', () => {
       widget = searchBox({container, poweredBy: true});
       widget.init({state, helper, onHistoryChange});
-      expect(ReactDOM.render.notCalled).toBe(false);
+      const poweredBy = container.querySelector('.ais-search-box--powered-by');
+      const poweredByLink = poweredBy.querySelector('a');
+      const expectedLink = `https://www.algolia.com/?utm_source=instantsearch.js&utm_medium=website&utm_content=${location.hostname}&utm_campaign=poweredby`;
+      expect(poweredBy).toNotBe(null);
+      expect(poweredByLink.getAttribute('href')).toBe(expectedLink);
     });
   });
 
@@ -405,9 +406,5 @@ describe('search-box()', () => {
       });
     });
   });
-
-  afterEach(() => {
-    searchBox.__ResetDependency__('ReactDOM');
-  });
 });
 

src/widgets/search-box/search-box.js

@@ -103,9 +103,16 @@ function searchBox({
         root: cx(bem('powered-by'), cssClasses.poweredBy),
         link: bem('powered-by-link')
       };
+      let link = 'https://www.algolia.com/?' +
+        'utm_source=instantsearch.js&' +
+        'utm_medium=website&' +
+        `utm_content=${location.hostname}&` +
+        'utm_campaign=poweredby';
+
       ReactDOM.render(
         <PoweredBy
           cssClasses={poweredByCssClasses}
+          link={link}
         />,
         poweredByContainer
       );