From 6fce8b737cf5b6eed31a394f3ca8181b293c90f2 Mon Sep 17 00:00:00 2001
From: Mila Frerichs <mila.frerichs@gmail.com>
Date: Fri, 21 Aug 2015 12:11:17 +0200
Subject: [PATCH 1/5] Update search to follow active pages "pattern"

use "minutesAgo" dimension from GA to determine which pageviews are new
ones and which search results to display.
use pageviews instead of activeusers to streamline the metrics we use.
Use handlebars and template helper instead of mustache for faster
rendering
---
 karma.conf.js                |   2 +
 public/index.html            |   9 ++
 public/javascripts/search.js | 113 +++++++--------------
 tests/searchSpec.js          | 183 +++++++++++++++++++++++++++++++++++
 4 files changed, 229 insertions(+), 78 deletions(-)
 create mode 100644 tests/searchSpec.js

diff --git a/karma.conf.js b/karma.conf.js
index 063ae3c..c0f849d 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,6 +7,7 @@ module.exports = function(config) {
       'public/javascripts/vendor/handlebars-v3.0.3.js',
       'public/javascripts/helper/templateHelper.js',
       'public/javascripts/landing-pages.js',
+      'public/javascripts/search.js',
       'public/javascripts/traffic.js',
       'tests/**/*Spec.js',
       'tests/fixtures/**/*'
@@ -16,6 +17,7 @@ module.exports = function(config) {
     ],
     preprocessors: {
       'public/javascripts/*.js': ['coverage'],
+      'public/javascripts/helper/*.js': ['coverage'],
       'tests/**/*.json'   : ['json_fixtures']
     },
     jsonFixturesPreprocessor: {
diff --git a/public/index.html b/public/index.html
index cc15ca8..1c1be0c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -103,6 +103,15 @@ <h2 class="brick-heading">Most popular pages</h2>
       {{/pages}}
     </script>
 
+    <script type="template" id="search-result-items">
+      {{#pages}}
+      <li>
+        <div>
+          <a href="http://{{ url }}" target="_blank">{{ term }}</a>
+        </div>
+      </li>
+      {{/pages}}
+    </script>
     <script type="template" id="search-result-item">
       <li>
         <div>
diff --git a/public/javascripts/search.js b/public/javascripts/search.js
index 865691d..2ab6980 100644
--- a/public/javascripts/search.js
+++ b/public/javascripts/search.js
@@ -12,12 +12,12 @@
     nextRefresh: 0,
     limit: 20,
 
-    endpoint: function(profileId){
+    endpoint: function(){
       return "/realtime?"
         + "ids=ga:"+matrix.settings.profileId+"&"
-        + "metrics=rt:activeVisitors&"
-        + "dimensions=rt:pagePath,rt:keyword&"
-        //+ "sort=-rt:activeVisitors&"
+        + "metrics=rt:pageViews&"
+        + "dimensions=rt:pagePath,rt:keyword,rt:minutesAgo,rt:deviceCategory&"
+        + "sort=rt:minutesAgo&"
         + "max-results=10000";
     },
     safeTerm: function(term){
@@ -47,97 +47,54 @@
       return true;
     },
     addTerm: function(term, count, url){
-      var i, _i;
-      for(i=0, _i=search.terms.length; i<_i;  i++){
-        if(search.terms[i].term === term){
-          search.terms[i].nextTick = count;
-          return true;
-        }
-      }
-      search.terms.push({
-        term: term,
-        total: 0,
-        nextTick: count,
-        currentTick: 0,
-        url: url
-      });
-    },
-    zeroNextTicks: function(){
-      var i, _i, newTerms = [];
-      for(i=0, _i=search.terms.length; i<_i;  i++){
-        search.terms[i].nextTick = 0;
+      var i;
+      for(i=0;i<count;i++) {
+        search.terms.push({
+          term: term,
+          total: count,
+          url: url
+        });
       }
     },
-    addNextTickValues: function(data){
-      var i, _i, term, url;
+    parseData: function(data) {
+      var i, _i, term, url, source, minutesAgo,
+      termColumn = 1, urlColumn = 0,
+      minutesAgoColumn = 2, countColumn = 4, maxMinutes = 2;
 
       for(i=0,_i=data.rows.length; i<_i; i++){
-        term = data.rows[i][1].split(' — ');
-        url = data.rows[i][0];
-
-        if(term[0] !== 'Search' && search.safeTerm(term[0])){
-          search.addTerm(term[0], root.parseInt(data.rows[i][2], 10), url);
+        term = data.rows[i][termColumn];
+        url = data.rows[i][urlColumn];
+        minutesAgo = root.parseInt(data.rows[i][minutesAgoColumn]);
+        if(minutesAgo < maxMinutes) {
+          if(term !== 'Search' && search.safeTerm(term)){
+            search.addTerm(term, root.parseInt(data.rows[i][countColumn], 10), url);
+          }
+        }else {
+          break;
         }
 
       }
     },
-    addTimeIndexValues: function(){
-      var i, _i, j, _j, term, time, newPeople, nonZeroTerms = [];
-      for(i=0, _i=search.terms.length; i<_i;  i++){
-        term = search.terms[i];
-        newPeople = term.currentTick < term.nextTick ? term.nextTick - term.currentTick : 0;
-        term.total = term.total + newPeople;
-        term.currentTick = term.nextTick;
-        if(newPeople > 0){
-          for(j=0,_j=newPeople; j<_j; j++){
-            search.newTerms.push(term.term);
-            search.newURLs.push(term.url);
-          }
-        }
-        if(term.currentTick > 0){
-          nonZeroTerms.push(term);
-        }
+    parseResponse: function(error, data){
+      if(error) { return -1; }
+      if(data.hasOwnProperty('rows')) {
+        search.terms = [];
+        search.parseData(data);
+        search.refreshResults();
+      }else {
+        return -1;
       }
-      search.newTerms.sort(function(){
-        return Math.floor((Math.random() * 3) - 1)
-      });
-      search.terms = nonZeroTerms;
     },
-    parseResponse: function(data){
-      var term, i, _i;
-
-      search.zeroNextTicks();
-      search.addNextTickValues(data);
-      search.addTimeIndexValues();
-    },
-    displayResults: function(){
-      var term = search.newTerms.pop();
-      var url = search.newURLs.pop();
-      var el = search.el;
-      if(term){
-        var tempList = el.ol().template("search-result-item", { term: term, url: url });
-        root.matrix.manager.animateInto(tempList.firstElementChild, el,
-                                        search.limit);
-        setTimeout(search.displayResults,
-                   (search.nextRefresh - Date.now())/search.newTerms.length);
-      } else {
-        setTimeout(search.displayResults, 5000);
-      }
+    refreshResults: function() {
+      templateHelper.prependTemplate(search.el, "search-result-items", {pages: search.terms });
     },
     init: function(){
       search.el = document.getElementById('search-terms');
       search.reload();
-      search.displayResults();
       window.setInterval(search.reload, 60e3);
-      document.addEventListener(
-          "visibilitychange",
-          function() { root.matrix.manager.positionFixups(search); },
-          false);
     },
     reload: function(){
-      var endpoint = search.endpoint(root.matrix.settings.profileId);
-      search.nextRefresh = Date.now() + 60e3;
-      d3.json(endpoint, search.parseResponse);
+      d3.json(search.endpoint(), search.parseResponse);
     }
   };
 
diff --git a/tests/searchSpec.js b/tests/searchSpec.js
new file mode 100644
index 0000000..a9393da
--- /dev/null
+++ b/tests/searchSpec.js
@@ -0,0 +1,183 @@
+describe('traffic', function() {
+  beforeEach(function() {
+    window.matrix.settings = {
+      profileId: ''
+    };
+    subject =  window.matrix.search;
+    sandbox = sinon.sandbox.create();
+    server = sinon.fakeServer.create();
+  });
+  afterEach(function() {
+    sandbox.restore();
+    server.restore();
+  });
+  describe('#init', function() {
+    beforeEach(function() {
+      $('body').append('<div id="search-terms"></div>');
+      sandbox.stub(Handlebars, 'compile');
+    });
+    it("calls reload", function() {
+      mock = sandbox.mock(subject).expects("reload").once();
+      subject.init();
+      mock.verify();
+    });
+    it("calls reload with interval of 1 minute", function() {
+      clock = sinon.useFakeTimers(Date.now());
+      mock = sandbox.mock(subject).expects("reload").twice();
+      subject.init();
+      clock.tick(60000);
+      mock.verify();
+      clock.restore();
+    });
+  });
+  describe('#reload', function() {
+    it("calls endpoint", function() {
+      sandbox.stub(d3, "json");
+      mock = sandbox.mock(subject).expects("endpoint").once();
+      subject.reload();
+      mock.verify();
+    });
+    context('json returned', function(){
+      beforeEach(function() {
+        stub = sandbox.stub(d3, 'json');
+      });
+      it("calls parseResponse", function() {
+        mock = sandbox.mock(subject).expects("parseResponse").once();
+        subject.reload();
+        stub.callArgWith(1, {}, {});
+        mock.verify();
+      });
+    });
+  });
+  describe('#parseResponse', function() {
+    context("error parsing json", function() {
+      it("returns withpout parsing", function() {
+        mock = sandbox.mock(subject).expects("parseData").never();
+        subject.parseResponse({}, null);
+        mock.verify();
+      });
+      it("does not refresh the results", function() {
+        mock = sandbox.mock(subject).expects("refreshResults").never();
+        subject.parseResponse({}, null);
+        mock.verify();
+      });
+    });
+    context("no error parsing json", function() {
+      context("has data from GA", function() {
+        it("calls parseData", function() {
+          sandbox.stub(subject, 'refreshResults');
+          mock = sandbox.mock(subject).expects("parseData").once();
+          subject.parseResponse(null, {rows: []});
+          mock.verify();
+        });
+        it("refreshes the results", function() {
+          mock = sandbox.mock(subject).expects("refreshResults").once();
+          subject.parseResponse(null, {rows: []});
+          mock.verify();
+        });
+      });
+      context("no rows (no data from GA)", function() {
+        it("does not call parseData", function() {
+          mock = sandbox.mock(subject).expects("parseData").never();
+          subject.parseResponse(null, {});
+          mock.verify();
+        });
+      });
+    });
+  });
+  describe('#parseData', function() {
+    beforeEach(function() {
+      data = { rows: [ ["url1", "keyword 1", "00", "DESKTOP", "1"],["url1", "keyword 2", "01", "DESKTOP", "1"],["url1", "keyword 3", "01", "DESKTOP", "1"],["url1", "keyowrd 4", "02", "DESKTOP", "1"]]};
+    });
+    it("calls addTerm for every row less than two minutes ago", function() {
+      mock = sandbox.mock(subject).expects("addTerm").thrice();
+      subject.parseData(data);
+      mock.verify();
+    });
+    it("calls addTerm for every row", function() {
+      data = { rows: [ ["url1", "keyword", "00", "DESKTOP", "1"]]};
+      mock = sandbox.mock(subject).expects("addTerm").withArgs("keyword", 1, "url1");
+      subject.parseData(data);
+      mock.verify();
+    });
+    context('Search Term', function() {
+      beforeEach(function(){
+      data = { rows: [ ["url1", "Search", "00", "DESKTOP", "1"]]};
+      });
+      it("does not call addTerm for the row", function() {
+        mock = sandbox.mock(subject).expects("addTerm").never();
+        subject.parseData(data);
+        mock.verify();
+      });
+    });
+  });
+  describe('#addTerm', function() {
+    beforeEach(function() {
+      subject.terms = [];
+    });
+    it("adds new items to terms", function() {
+      result = { term: 'Test', total: 1, url: 'url' }
+      subject.addTerm("Test", 1, "url", "source");
+      expect(subject.terms[0]).to.eql(result);
+    });
+  });
+  describe('#refreshResults', function() {
+    beforeEach(function() {
+      subject.terms = [{ term: 'Test', total: 1, url: 'url', source: 'source' }];
+    });
+    it("shows all terms", function() {
+    });
+    it("calls handlebars template", function() {
+    });
+  });
+  describe('#endpoint', function() {
+    it('returns the path to the servers realtime endpoint', function() {
+      var result = '/realtime?ids=ga:&'+
+        'metrics=rt:pageViews&'+
+        'dimensions=rt:pagePath,rt:keyword,rt:minutesAgo,rt:deviceCategory&'+
+        'sort=rt:minutesAgo&max-results=10000';
+      expect(subject.endpoint()).to.eql(result);
+    });
+    context('with profileId', function() {
+      beforeEach(function() {
+        window.matrix.settings = {
+          profileId: 'Test'
+        };
+      });
+      it('returns correct profile Id in the endpoint path', function() {
+      var result = '/realtime?ids=ga:Test&'+
+        'metrics=rt:pageViews&'+
+        'dimensions=rt:pagePath,rt:keyword,rt:minutesAgo,rt:deviceCategory&'+
+        'sort=rt:minutesAgo&max-results=10000';
+      expect(subject.endpoint()).to.eql(result);
+      });
+    });
+  });
+  describe("safeTerm", function() {
+    context("email address", function() {
+      it("is not safe", function() {
+        expect(subject.safeTerm("iw@jwi.de")).to.eq(false);
+      });
+    });
+    context("just numbers", function() {
+      it("is not safe", function() {
+        expect(subject.safeTerm("432913")).to.eq(false);
+      });
+    });
+    context("no search term", function() {
+      it("is not safe", function() {
+        expect(subject.safeTerm("(not set)")).to.eq(false);
+      });
+    });
+    context("search term secured by google", function() {
+      it("is not safe", function() {
+        expect(subject.safeTerm("(not provided)")).to.eq(false);
+      });
+    });
+    context("503 request", function() {
+      it("is not safe", function() {
+        expect(subject.safeTerm("Sorry, we are experiencing technical difficulties (503 error)")).to.eq(false);
+      });
+    });
+  });
+});

From 1b89fafc21cf898e8f45b7869c5e9617e11b416b Mon Sep 17 00:00:00 2001
From: Mila Frerichs <mila.frerichs@gmail.com>
Date: Tue, 1 Sep 2015 14:26:35 +0200
Subject: [PATCH 2/5] Add deviceCategory to search

---
 public/javascripts/search.js | 12 +++++++-----
 tests/searchSpec.js          |  4 ++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/javascripts/search.js b/public/javascripts/search.js
index e3ff8b2..9589730 100644
--- a/public/javascripts/search.js
+++ b/public/javascripts/search.js
@@ -46,28 +46,30 @@
       }
       return true;
     },
-    addTerm: function(term, count, url){
+    addTerm: function(term, count, url, deviceCategory){
       var i;
       for(i=0;i<count;i++) {
         search.terms.push({
           term: term,
           total: count,
-          url: url
+          url: url,
+          deviceCategory: deviceCategory
         });
       }
     },
     parseData: function(data) {
-      var i, _i, term, url, source, minutesAgo,
+      var i, _i, term, url, source, minutesAgo, deviceCategory,
       termColumn = 1, urlColumn = 0,
-      minutesAgoColumn = 2, countColumn = 4, maxMinutes = 2;
+      minutesAgoColumn = 2, deviceCategoryColumn = 3, countColumn = 4, maxMinutes = 2;
 
       for(i=0,_i=data.rows.length; i<_i; i++){
         term = data.rows[i][termColumn];
         url = data.rows[i][urlColumn];
+        deviceCategory = data.rows[i][deviceCategoryColumn].toLowerCase();
         minutesAgo = root.parseInt(data.rows[i][minutesAgoColumn]);
         if(minutesAgo < maxMinutes) {
           if(term !== 'Search' && search.safeTerm(term)){
-            search.addTerm(term, root.parseInt(data.rows[i][countColumn], 10), url);
+            search.addTerm(term, root.parseInt(data.rows[i][countColumn], 10), url, deviceCategory);
           }
         }else {
           break;
diff --git a/tests/searchSpec.js b/tests/searchSpec.js
index 4df306c..2457f84 100644
--- a/tests/searchSpec.js
+++ b/tests/searchSpec.js
@@ -116,8 +116,8 @@ describe('traffic', function() {
       subject.terms = [];
     });
     it("adds new items to terms", function() {
-      result = { term: 'Test', total: 1, url: 'url' }
-      subject.addTerm("Test", 1, "url", "source");
+      result = { term: 'Test', total: 1, url: 'url', deviceCategory: 'desktop' }
+      subject.addTerm("Test", 1, "url", "desktop");
       expect(subject.terms[0]).to.eql(result);
     });
   });

From 273734d665bcfd775f570d2d794e2c928f78bef8 Mon Sep 17 00:00:00 2001
From: Mila Frerichs <mila.frerichs@gmail.com>
Date: Tue, 1 Sep 2015 14:28:01 +0200
Subject: [PATCH 3/5] Show device tyle on live search results

show the same style as the active pages for live search results
---
 public/index.html            |  6 +++++-
 public/stylesheets/base.css  | 27 +++++++++++++++------------
 public/stylesheets/base.scss | 36 ++++++++++++++++++++----------------
 3 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7967d39..218d5e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -125,7 +125,9 @@ <h2 class="brick-heading">Most popular pages</h2>
     <script type="template" id="search-result-items">
       {{#pages}}
       <li>
-        <div>
+        <div class="device-type {{deviceCategory}}"></div>
+        <div class="link">
+          <i class="{{deviceClass deviceCategory}}"></i>
           <a href="http://{{ url }}" target="_blank">{{ term }}</a>
         </div>
       </li>
@@ -133,7 +135,9 @@ <h2 class="brick-heading">Most popular pages</h2>
     </script>
     <script type="template" id="search-result-item">
       <li>
+        <div class="device-type {{deviceCategory}}"></div>
         <div>
+          <i class="{{deviceClass deviceCategory}}"></i>
           <a href="http://{{ url }}" target="_blank">{{ term }}</a>
         </div>
       </li>
diff --git a/public/stylesheets/base.css b/public/stylesheets/base.css
index 3257a05..4947b99 100644
--- a/public/stylesheets/base.css
+++ b/public/stylesheets/base.css
@@ -105,6 +105,21 @@ h2 {
       .bricks .brick .search-terms ul li a {
         color: inherit;
         text-decoration: none; }
+  .bricks .device-type {
+    width: 5px;
+    height: 80%;
+    background: #fff;
+    display: block;
+    position: absolute; }
+    .bricks .device-type.mobile, .bricks .device-type.tablet {
+      background: #265c8d; }
+    .bricks .device-type.desktop {
+      background: #1b406d; }
+  .bricks .link {
+    padding-left: 1em; }
+    .bricks .link i {
+      color: #717171;
+      font-size: 0.75em; }
   .bricks .searches ul li {
     margin: 0;
     padding: 0.5em 0;
@@ -122,18 +137,6 @@ h2 {
       opacity: 1.0; }
     .bricks .searches ul li:nth-child(2) {
       opacity: 0.7; }
-    .bricks .searches ul li .device-type {
-      width: 5px;
-      height: 80%;
-      background: #fff;
-      display: block;
-      position: absolute; }
-      .bricks .searches ul li .device-type.mobile, .bricks .searches ul li .device-type.tablet {
-        background: #265c8d; }
-      .bricks .searches ul li .device-type.desktop {
-        background: #1b406d; }
-    .bricks .searches ul li .link {
-      padding-left: 1em; }
 
 .top-bar {
   background: #00010D;
diff --git a/public/stylesheets/base.scss b/public/stylesheets/base.scss
index 746ad2e..f8dc7a5 100644
--- a/public/stylesheets/base.scss
+++ b/public/stylesheets/base.scss
@@ -126,6 +126,26 @@ h2{
     }
 
   }
+  .device-type {
+    width: 5px;
+    height: 80%;
+    background: #fff;
+    display: block;
+    position: absolute;
+    &.mobile, &.tablet {
+      background: $mobile-color;
+    }
+    &.desktop {
+      background: $desktop-color;
+    }
+  }
+  .link {
+    padding-left: 1em ;
+    i {
+      color: #717171;
+      font-size: 0.75em;
+    }
+  }
 
   .searches ul li {
     margin: 0;
@@ -145,22 +165,6 @@ h2{
 
     &:nth-child(1) { opacity: 1.0; }
     &:nth-child(2) { opacity: 0.7; }
-    .device-type {
-      width: 5px;
-      height: 80%;
-      background: #fff;
-      display: block;
-      position: absolute;
-      &.mobile, &.tablet {
-        background: $mobile-color;
-      }
-      &.desktop {
-        background: $desktop-color;
-      }
-    }
-    .link {
-      padding-left: 1em ;
-    }
   }
 }
 

From e28364229c3f947065acc197287c6d9a91fadc07 Mon Sep 17 00:00:00 2001
From: Mila Frerichs <mila.frerichs@gmail.com>
Date: Tue, 1 Sep 2015 14:48:30 +0200
Subject: [PATCH 4/5] Add search to karma saucelabs file

---
 karma.saucelabs.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/karma.saucelabs.js b/karma.saucelabs.js
index fdfa17e..01cd91b 100644
--- a/karma.saucelabs.js
+++ b/karma.saucelabs.js
@@ -37,6 +37,7 @@ module.exports = function(config) {
       'public/javascripts/helpers/helper.js',
       'public/javascripts/helper/templateHelper.js',
       'public/javascripts/landing-pages.js',
+      'public/javascripts/search.js',
       'public/javascripts/traffic.js',
       'tests/**/*Spec.js',
       'tests/fixtures/**/*'

From 17b6985e3cabb7ed2da7a70530a658b22c09dda3 Mon Sep 17 00:00:00 2001
From: Mila Frerichs <mila.frerichs@gmail.com>
Date: Tue, 1 Sep 2015 16:29:01 +0200
Subject: [PATCH 5/5] Add test for template call

---
 tests/searchSpec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tests/searchSpec.js b/tests/searchSpec.js
index 2457f84..2129f33 100644
--- a/tests/searchSpec.js
+++ b/tests/searchSpec.js
@@ -128,6 +128,9 @@ describe('traffic', function() {
     it("shows all terms", function() {
     });
     it("calls handlebars template", function() {
+      mock = sandbox.mock(templateHelper).expects("prependTemplate").once();
+      subject.refreshResults();
+      mock.verify();
     });
   });
   describe('#endpoint', function() {