We should probably run js tests

.eslintrc

@@ -17,6 +17,7 @@
     "Cookies": false,
     "Clickventure": false,
     "SpecialCoverageLoader": false,
+    "TestHelper": false
   },
   "ecmaFeatures": {
     "arrowFunctions": true,

.travis.yml

@@ -3,15 +3,15 @@ language: python
 sudo: required
 
 matrix:
-    include:
-        # Current production
-        - python: '2.7'
-          env: ELASTICSEARCH_VERSION=1.4.4
-        - python: "3.5"
-          env: ELASTICSEARCH_VERSION=1.4.4
-        # Latest in 1.X line (as of 2016-02-10). For speed, just run future ES version with latest Python
-        - python: '3.5'
-          env: ELASTICSEARCH_VERSION=1.7.5
+  include:
+    # Current production
+    - python: '2.7'
+      env: ELASTICSEARCH_VERSION=1.4.4
+    - python: "3.5"
+      env: ELASTICSEARCH_VERSION=1.4.4
+    # Latest in 1.X line (as of 2016-02-10). For speed, just run future ES version with latest Python
+    - python: '3.5'
+      env: ELASTICSEARCH_VERSION=1.7.5
 cache:
   directories:
     - $HOME/.cache/pip
@@ -30,10 +30,16 @@ install:
 before_script:
   - psql -c "create database bulbs_test;" -U postgres
   - psql -c "create user bulbs WITH superuser PASSWORD 'testing';" -U postgres
-  # Wait for ES startup
-  - until curl http://localhost:9200/; do sleep 1; done
+  - until curl http://localhost:9200/; do sleep 1; done # Wait for ES startup
+  - npm install
+  - 'export DISPLAY=:99.0'
+  - 'sh -e /etc/init.d/xvfb start'
+  - sleep 3 # give xvfb some time to start
+  - 'export CHROME_BIN=chromium-browser'
 script:
   - py.test --cov bulbs --cov-report term-missing
+  - npm run test-ci
+  - npm run lint
   - scripts/lint
 after_success:
   - coveralls

bulbs/ads/static/js/mobile-ad-placer.js

@@ -1,9 +1,10 @@
 'use strict';
 var _ = require('lodash/lodash');
-var adHtml = '<div class="dfp dfp-slot-inread" data-ad-unit="inread"> \
-                Content continues below advertisement \
-              </div>';
-
+var adHtml = [
+  '<div class="dfp dfp-slot-inread" data-ad-unit="inread">',
+  'Content continues below advertisement',
+  '</div>',
+].join('');
 
 var MobileAdPlacer = {
   placeAds: function () {

bulbs/ads/static/js/mobile-ad-placer.test.js

@@ -2,13 +2,12 @@ describe('MobileAdPlacer', function () {
   var mobileAdPlacer = require('./mobile-ad-placer');
   var faker = require('faker');
 
-  var article = '<section class="article-text"></section>'
+  var article = '<section class="article-text"></section>';
   var paragraph351 = '<p>' + faker.lorem.words(351) + '</p>';
-  var paragraph20 = '<p>' + faker.lorem.words(20) + '</p>';
 
   beforeEach(function () {
     $('body').append(article);
-    window.ads = {loadAds: function() { return }};
+    window.ads = {loadAds: function () { return; }};
   });
 
   afterEach(function () {
@@ -19,33 +18,31 @@ describe('MobileAdPlacer', function () {
     $('.article-text').append(paragraph351);
     mobileAdPlacer.placeAds();
     var articleContents = $('.article-text').children();
-    expect($(articleContents[1]).attr('class')).to.equal("dfp dfp-slot-inread");
+    expect($(articleContents[1]).attr('class')).to.equal('dfp dfp-slot-inread');
   });
 
   it('places multiple ads', function () {
     $('.article-text').append(paragraph351);
     $('.article-text').append(paragraph351);
-    adElement = document.createElement('ad');
+    var adElement = document.createElement('ad');
     mobileAdPlacer.placeAds(adElement);
     var ads = $('.article-text').find('.dfp-slot-inread');
     expect(ads.length).to.equal(2);
   });
 
   it('only places ads after paragraph breaks', function () {
-    adElement = document.createElement('ad');
+    var adElement = document.createElement('ad');
     var bigAssParagraph = '<p>' + faker.lorem.words(1000) + '</p>';
     $('.article-text').append(bigAssParagraph);
 
     mobileAdPlacer.placeAds(adElement);
-    var articleContents = $('.article-text').children();
     // sanity check ad is placed
     expect($('.article-text').find('.dfp').length).to.equal(1);
     // not placed within p element
     expect($('p').find('.dfp').length).to.equal(0);
   });
 
   it('places no more than 4 ads', function () {
-    adElement = document.createElement('ad');
     for(var i = 0; i < 5; i++) {
       $('.article-text').append(paragraph351);
     }
@@ -55,7 +52,7 @@ describe('MobileAdPlacer', function () {
   });
 
   it('does not call loadAds() if window.ads is undefined', function () {
-    window.ads = undefined;
+    window.ads = undefined; // eslint-disable-line no-undefined
     expect(mobileAdPlacer.placeAds).to.not.throw(Error);
   });
 });

bulbs/videos/static/videos/js/recirc/main.browserify.js

@@ -1,7 +1,8 @@
+/* eslint no-new: 0 */
 var VideoRecircList = require('./video-recirc-list/video-recirc-list');
 var SeriesVideoList = require('../series/series-video-list/series-video-list');
 
 $(document).ready(function () {
   new VideoRecircList();
   new SeriesVideoList();
-});
+});

bulbs/videos/static/videos/js/recirc/video-recirc-list/video-recirc-list.js

@@ -18,27 +18,27 @@ VideoRecircList.prototype.loadVideoRecirc = function () {
 
 VideoRecircList.prototype.videoRecircFetched = function (data) {
   var that = this;
-  
+
   var recirc = data.videos.slice(0,that.recircCount);
 
   recirc
     .forEach(function (video) {
-    var videoTitle = video.title;
-    var videoHref = '/v/' + video.id;
-    var posterSource = that.bettyUrl + '/' + video.poster.id;
+      var videoTitle = video.title;
+      var videoHref = '/v/' + video.id;
+      var posterSource = that.bettyUrl + '/' + video.poster.id;
       $('<a>',{
-        'class' : that.videoItem,
-        'href' : videoHref,
-        'data-track-action' : 'Video: Recirc',
-        'data-track-label' : videoHref,
-        'html': $('<figure>',{
-          'class' : 'content',
-          'html' : '<div class="image"><bulbs-video-play-button></bulbs-video-play-button><img src="' + posterSource + '/16x9/480.jpg"></div>',
+        'class': that.videoItem,
+        href: videoHref,
+        'data-track-action': 'Video: Recirc',
+        'data-track-label': videoHref,
+        html: $('<figure>', {
+          'class': 'content',
+          html: '<div class="image"><bulbs-video-play-button></bulbs-video-play-button><img src="' + posterSource + '/16x9/480.jpg"></div>',
         }).add($('<p>',{
-          'html' : videoTitle
-        }))
+          html: videoTitle,
+        })),
       }).appendTo(that.$videoRecircList);
     });
 };
 
-module.exports = VideoRecircList;
+module.exports = VideoRecircList;

bulbs/videos/static/videos/js/series/current-episode-data/current-episode-data.js

@@ -1,4 +1,4 @@
-CurrentEpisodeData = function(video) {
+var CurrentEpisodeData = function (video) {
   this.$videoPlayer = $('bulbs-video');
   this.$currentVideoTitle = $('#current-video-title');
   this.$currentVideoDescription = $('#current-video-description');
@@ -15,15 +15,15 @@ CurrentEpisodeData = function(video) {
   this.$currentVideoShareTools.attr('share-title', this.currentVideoTitle);
 
   $('<a>', {
-      'href' : this.currentEpisodeHref,
-      'data-track-action' : 'Single Series: Current Episode Title',
-      'data-track-label' : this.currentEpisodeHref,
-      'html' : '<h2>' + this.currentVideoTitle + '</h2>'
+    href: this.currentEpisodeHref,
+    'data-track-action': 'Single Series: Current Episode Title',
+    'data-track-label': this.currentEpisodeHref,
+    html: '<h2>' + this.currentVideoTitle + '</h2>',
 
   }).appendTo(this.$currentVideoTitle);
 
   if (video.description) {
-    $('<p>' +  video.description + '</p>')
+    $('<p>' + video.description + '</p>')
       .appendTo(this.$currentVideoDescription);
   }
 

bulbs/videos/static/videos/js/series/current-episode-data/current-episode-data.test.js

@@ -1,81 +1,75 @@
 describe('CurrentEpisodeData', function () {
   var CurrentEpisodeData = require('./current-episode-data');
   var video = {
-      id: 5400,
-      title: 'A Show About Music',
-      poster: { id: 1234 },
-      description: 'it sucks'
-    };
-  var videoPlayer;
-
+    id: 5400,
+    title: 'A Show About Music',
+    poster: { id: 1234 },
+    description: 'it sucks',
+  };
   var videohubBaseUrl = 'http://onionstudios.com';
   var videoPlayer = $('<bulbs-video data-videohub-base="' + videohubBaseUrl + '">');
   var currentVideoTitle = '<div id="current-video-title"></div>';
   var currentVideoDescription = '<div id="current-video-description"></div>';
-  var currentVideoShareTools = '<share-tools \
-                                  class="current-video-share-tools" \
-                                  share-url="foo.bar" \
-                              </share-tools>';
+  var currentVideoShareTools = '<share-tools class="current-video-share-tools" share-url="foo.bar"></share-tools>';
 
   context('normal functionality', function () {
 
-    beforeEach(function() {
+    beforeEach(function () {
 
       $('body').append(videoPlayer);
       $('body').append(currentVideoTitle);
       $('body').append(currentVideoDescription);
       $('body').append(currentVideoShareTools);
 
-      currentEpisodeData = new CurrentEpisodeData(video);
+      new CurrentEpisodeData(video); // eslint-disable-line no-new
     });
 
-    afterEach(function() {
+    afterEach(function () {
       videoPlayer.remove();
       $('#current-video-title').remove();
       $('#current-video-description').remove();
       $('share-tools').remove();
     });
 
-    it('adds current video in series to player', function() {
+    it('adds current video in series to player', function () {
       var expected = videohubBaseUrl + '/video/' + video.id + '.json';
       expect($(videoPlayer).attr('src')).to.equal(expected);
     });
 
-    it('appends the current video title', function() {
-      var videoTitle = $('#current-video-title h2').html()
-      expect(videoTitle).to.equal("A Show About Music");
+    it('appends the current video title', function () {
+      var videoTitle = $('#current-video-title h2').html();
+      expect(videoTitle).to.equal('A Show About Music');
     });
 
-    it('appends the current video description', function() {
-      var videoDescription = $('#current-video-description p').html()
-      expect(videoDescription).to.equal("it sucks");
+    it('appends the current video description', function () {
+      var videoDescription = $('#current-video-description p').html();
+      expect(videoDescription).to.equal('it sucks');
     });
 
     describe('share-tools', function () {
-      it('appends the current video title', function() {
+      it('appends the current video title', function () {
         var videoShareToolsTitle = $('.current-video-share-tools').attr('share-title');
-        expect(videoShareToolsTitle).to.equal("A Show About Music");
+        expect(videoShareToolsTitle).to.equal('A Show About Music');
       });
 
-      it('appends the current video url', function() {
+      it('appends the current video url', function () {
         var videoShareToolsUrl = $('.current-video-share-tools').attr('share-url');
-        expect(videoShareToolsUrl).to.equal("http://foo.bar/v/5400");
+        expect(videoShareToolsUrl).to.equal('http://foo.bar/v/5400');
       });
     });
   });
 
   context('should fail when', function () {
 
-    it('not provided videohub base url', function() {
+    it('not provided videohub base url', function () {
       videoPlayer = $('<bulbs-video>');
       $('body').append(videoPlayer);
       var subject = sinon.spy(CurrentEpisodeData);
 
       expect(function () {
-        new subject(video);
+        new subject(video); // eslint-disable-line no-new
       }).to.throw('CurrentEpisode requires bulbs-video to have a videohub base url.');
       $('bulbs-video').remove();
     });
   });
-
 });

bulbs/videos/static/videos/js/series/main.browserify.js

@@ -1,11 +1,9 @@
+/* eslint no-new: 0*/
 var SeriesMeta = require('./series-meta/series-meta');
-var SeriesVideoGrid = require('./series-video-grid/series-video-grid');
-var LatestEpisode = require('./series-video-latest-episode/series-video-latest-episode');
 var SeriesVideoList = require('./series-video-list/series-video-list');
 var PopularSeries = require('./popular-series/popular-series');
 var SeriesPage = require('./series-page/series-page');
 var VideoDetailPage = require('./video-detail-page/video-detail-page');
-var CurrentEpisodeData = require('./current-episode-data/current-episode-data');
 
 $(document).ready(function () {
   if($('body').hasClass('video-detail')) {

bulbs/videos/static/videos/js/series/popular-series/popular-series.js

@@ -25,26 +25,30 @@ PopularSeries.prototype.popularSeriesFetched = function (data) {
   for(var i = 0; i < data.length; i++) {
     var series = data[i];
     this.loadSeriesData(series.slug);
-  };
+  }
 };
 
 PopularSeries.prototype.seriesDataFetched = function (data) {
   // build markup for popular series
-  var seriesLink = '<a \
-                        class="popular-series-item" \
-                        href="/series/' + data.series_slug + '" \
-                        data-track-action="Single Series: Popular Series" \
-                        data-track-label="' + data.series_slug + '"></a>';
+  var seriesLink = [
+    '<a class="popular-series-item" href="/series/',
+    data.series_slug,
+    '" data-track-action="Single Series: Popular Series" data-track-label="',
+    data.series_slug,
+    '"></a>',
+  ].join('');
+  var seriesSeasonsCount;
   var $container = $(seriesLink);
   var seriesTitle = '<div class="popular-series-item-title">' +
     data.series_name + '</div>';
   var seriesEpisodesCount = '<div class="popular-series-item-episodes">'
     + data.total_episodes + ' Videos</div>';
   if (data.total_seasons > 0) {
-    var seriesSeasonsCount = '<div class="popular-series-item-seasons">'
+    seriesSeasonsCount = '<div class="popular-series-item-seasons">'
     + data.total_seasons + ' Seasons</div>';
-  } else {
-    var seriesSeasonsCount = '';
+  }
+  else {
+    seriesSeasonsCount = '';
   }
   var seriesLogo = '<div class="series-logo"><img src="' + data.series_logo + '" alt="' + data.series_name + '"></img></div>';