Added tests for listing page

karma.conf.js

@@ -58,8 +58,6 @@ module.exports = function(config) {
 
     // list of files to exclude from coverage and testing
     exclude: [
-      "ui/static/ui/js/listing.js",
-      "ui/static/ui/js/csrf.js"
     ],
 
     // preprocess matching files before serving them to the browser

ui/jstests/test_listing.js

@@ -0,0 +1,123 @@
+define(['QUnit', 'jquery', 'react', 'test_utils', 'utils', 'listing'],
+  function(QUnit, $, React, TestUtils, Utils, Listing) {
+    'use strict';
+    QUnit.module('Tests for listing page', {
+      beforeEach: function() {
+        TestUtils.setup();
+
+        $("body").append($("<div id='listing_container'>" +
+          "<div id='listing'></div>" +
+            "<div id='exports_content'></div>" +
+            "<div id='exports_heading'></div>" +
+            "<div id='tab-1'></div>" +
+            "<div id='tab-3'></div>" +
+            "<div id='lore-pagination'></div>" +
+            "<div id='taxonomy-component'></div>" +
+            "<div class='btn-taxonomies'></div>" +
+            "<div class='btn-members'></div>" +
+            "<div class='cd-panel'></div>" +
+            "<div class='cd-panel-2'></div>" +
+            "<div class='cd-panel-exports'></div>" +
+            "<div class='cd-panel-members'></div>" +
+          "</div>"));
+      },
+      afterEach: function() {
+        TestUtils.cleanup();
+
+        $("#listing_container").remove();
+      }
+    });
+
+    var listingOptions = {
+      repoSlug: "test",
+      resources: [{
+        "run": "Demo_Course",
+        "description": "",
+        "course": "DemoX",
+        "xa_avg_grade": 0.0,
+        "lid": 1,
+        "title": "Open edX Demonstration Course",
+        "description_path": "Open edX Demonstration Course",
+        "xa_nr_views": 0,
+        "preview_url": "...",
+        "xa_nr_attempts": 0,
+        "resource_type": "course"
+      }, {
+        "run": "Demo_Course",
+        "description": "another description",
+        "course": "DemoX",
+        "xa_avg_grade": 0.0,
+        "lid": 2,
+        "title": "Introduction",
+        "description_path": "Open edX Demonstration Course / Introduction",
+        "xa_nr_views": 0,
+        "preview_url": "...",
+        "xa_nr_attempts": 0,
+        "resource_type": "chapter"
+      }],
+      allExports: [2],
+      sortingOptions: {
+        "current": ["nr_views", "Number of Views (desc)"],
+        "all": [
+          ["nr_attempts", "Number of Attempts (desc)"],
+          ["avg_grade", "Average Grade (desc)"]
+        ]
+      },
+      loggedInUsername: "test",
+      qsPrefix: "?",
+      imageDir: "/base/ui/static/ui/images",
+      facetCounts: {
+        "run": {
+          "facet": {"key": "run", "label": "Run"},
+          "values": [{
+            "count": 139,
+            "key": "Demo_Course",
+            "label": "Demo_Course"
+          }]
+        },
+        "course": {
+          "facet": {"key": "course", "label": "Course"},
+          "values": [{"count": 139, "key": "DemoX", "label": "DemoX"}]
+        },
+        "resource_type": {
+          "facet": {"key": "resource_type", "label": "Item Type"},
+          "values": [{
+            "count": 39,
+            "key": "vertical",
+            "label": "vertical"
+          }]
+        }
+      }
+    };
+
+    QUnit.test('Assert taxonomy tab opens', function(assert) {
+      Listing.loader(listingOptions, 1, 2, $("#listing")[0]);
+      assert.ok(!$('.cd-panel-2').hasClass("is-visible"));
+
+      // click Manage Taxonomies button
+      $(".btn-taxonomies").click();
+      assert.ok($('.cd-panel-2').hasClass("is-visible"));
+
+      // Press escape to close
+      var press = $.Event("keyup");
+      press.keyCode = 27;
+      $(document).trigger(press);
+      assert.ok(!$('.cd-panel-2').hasClass("is-visible"));
+    });
+
+    QUnit.test('Assert members tab opens', function(assert) {
+      Listing.loader(listingOptions, 1, 2, $("#listing")[0]);
+      assert.ok(!$('.cd-panel-members').hasClass("is-visible"));
+
+      // click Members button
+      $(".btn-members").click();
+      assert.ok($('.cd-panel-members').hasClass("is-visible"));
+
+      // Press escape to close
+      var press = $.Event("keyup");
+      press.keyCode = 27;
+      $(document).trigger(press);
+      assert.ok(!$('.cd-panel-members').hasClass("is-visible"));
+    });
+  }
+);

ui/static/ui/js/csrf.js

@@ -1,17 +1,16 @@
-define(['jquery'], function(jQuery) {
+define('csrf', ['jquery'], function($) {
   'use strict';
 
-  jQuery(document).ready(function($) {
-
+  var setupCSRF = function() {
     // Setup CSRF cookie handling so we can communicate with API
     // This code is pulled from
     // https://docs.djangoproject.com/en/dev/ref/csrf/#ajax
-    var getCookie = function(name) {
+    var getCookie = function (name) {
       var cookieValue = null;
       if (document.cookie && document.cookie !== '') {
         var cookies = document.cookie.split(';');
         for (var i = 0; i < cookies.length; i++) {
-          var cookie = jQuery.trim(cookies[i]);
+          var cookie = $.trim(cookies[i]);
           // Does this cookie string begin with the name we want?
           if (cookie.substring(0, name.length + 1) === (name + '=')) {
             cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
@@ -21,17 +20,21 @@ define(['jquery'], function(jQuery) {
       }
       return cookieValue;
     };
-    var csrfSafeMethod = function(method) {
+    var csrfSafeMethod = function (method) {
       // these HTTP methods do not require CSRF protection
       return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
     };
 
     $.ajaxSetup({
-      beforeSend: function(xhr, settings) {
+      beforeSend: function (xhr, settings) {
         if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
           xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
         }
       }
     });
-  });
+  };
+
+  return {
+    setupCSRF: setupCSRF
+  };
 });

ui/static/ui/js/listing.js

@@ -1,16 +1,19 @@
 define('listing',
-  ['jquery', 'lodash', 'uri', 'history', 'manage_taxonomies',
+  ['csrf', 'jquery', 'lodash', 'uri', 'history', 'manage_taxonomies',
     'learning_resources', 'static_assets', 'utils',
     'lr_exports', 'listing_resources', 'pagination',
-    'bootstrap', 'icheck', 'csrf'],
-  function ($, _, URI, History, ManageTaxonomies, LearningResources,
-            StaticAssets, Utils, Exports, ListingResources, Pagination) {
+    'bootstrap', 'icheck'],
+  function (CSRF, $, _, URI, History,
+            ManageTaxonomies, LearningResources, StaticAssets,
+            Utils, Exports, ListingResources, Pagination) {
     'use strict';
 
     var loader = function (listingOptions, container) {
       var repoSlug = listingOptions.repoSlug;
       var loggedInUsername = listingOptions.loggedInUsername;
 
+      CSRF.setupCSRF();
+
       var EMAIL_EXTENSION = '@mit.edu';
 
       function formatGroupName(string) {