more work on jasmine tests for forums

common/static/coffee/spec/discussion/content_spec.coffee

-describe 'Content', ->
+describe 'All Content', ->
     beforeEach ->
         # TODO: figure out a better way of handling this
         # It is set up in main.coffee DiscussionApp.start
         window.$$course_id = 'mitX/999/test'
         window.user = new DiscussionUser {id: '567'}
 
-        @content = new Content {
-            id: '01234567',
-            user_id: '567',
-            course_id: 'mitX/999/test',
-            body: 'this is some content',
-            abuse_flaggers: ['123']
-        }
-
-    it 'should exist', ->
-        expect(Content).toBeDefined()
-
-    it 'is initialized correctly', ->
-        @content.initialize
-        expect(Content.contents['01234567']).toEqual @content
-        expect(@content.get 'id').toEqual '01234567'
-        expect(@content.get 'user_url').toEqual '/courses/mitX/999/test/discussion/forum/users/567'
-        expect(@content.get 'children').toEqual []
-        expect(@content.get 'comments').toEqual(jasmine.any(Comments))
-
-    it 'can update info', ->
-        @content.updateInfo {
-                            ability: 'can_endorse',
-                            voted: true,
-                            subscribed: true
-                            }
-        expect(@content.get 'ability').toEqual 'can_endorse'
-        expect(@content.get 'voted').toEqual true
-        expect(@content.get 'subscribed').toEqual true
-
-    describe 'can be flagged and unflagged', ->
+    describe 'Content', ->
         beforeEach ->
-            spyOn @content, 'trigger'
+            @content = new Content {
+                id: '01234567',
+                user_id: '567',
+                course_id: 'mitX/999/test',
+                body: 'this is some content',
+                abuse_flaggers: ['123']
+            }
 
-        it 'can be flagged for abuse', ->
-            @content.flagAbuse
-            expect(@content.get 'abuse_flaggers').toEqual ['123', '567']
+        it 'should exist', ->
+            expect(Content).toBeDefined()
+
+        it 'is initialized correctly', ->
+            @content.initialize
+            expect(Content.contents['01234567']).toEqual @content
+            expect(@content.get 'id').toEqual '01234567'
+            expect(@content.get 'user_url').toEqual '/courses/mitX/999/test/discussion/forum/users/567'
+            expect(@content.get 'children').toEqual []
+            expect(@content.get 'comments').toEqual(jasmine.any(Comments))
+
+        it 'can update info', ->
+            @content.updateInfo {
+                                ability: 'can_endorse',
+                                voted: true,
+                                subscribed: true
+                                }
+            expect(@content.get 'ability').toEqual 'can_endorse'
+            expect(@content.get 'voted').toEqual true
+            expect(@content.get 'subscribed').toEqual true
+
+        xdescribe 'can be flagged and unflagged', ->
+            beforeEach ->
+                spyOn @content, 'trigger'
+
+            it 'can be flagged for abuse', ->
+                @content.flagAbuse
+                expect(@content.get 'abuse_flaggers').toEqual ['123', '567']
+
+    describe 'Comments', ->
+        beforeEach ->
+            @comment1 = new Comment {id: '123'}
+            @comment2 = new Comment {id: '345'}
+
+        it 'can contain multiple comments', ->
+            myComments = new Comments
+            expect(myComments.length).toEqual 0
+            myComments.add @comment1
+            expect(myComments.length).toEqual 1
+            myComments.add @comment2
+            expect(myComments.length).toEqual 2
+
+        it 'returns results to the find method', ->
+            myComments = new Comments
+            myComments.add @comment1
+            expect(myComments.find('123')).toBe @comment1

common/static/coffee/spec/discussion/view/discussion_content_view_spec.coffee

+xdescribe "DiscussionContentView", ->
+    beforeEach ->
+
+        setFixtures
+        '''
+        <div class="discussion-post">
+            <header>
+                <a data-tooltip="vote" data-role="discussion-vote" class="vote-btn discussion-vote discussion-vote-up" href="#">
+                <span class="plus-icon">+</span> <span class="votes-count-number">0</span></a>
+                <h1>Post Title</h1>
+                <p class="posted-details">
+                    <a class="username" href="/courses/MITx/999/Robot_Super_Course/discussion/forum/users/1">robot</a>
+                    <span title="2013-05-08T17:34:07Z" class="timeago">less than a minute ago</span>
+                </p>
+            </header>
+            <div class="post-body"><p>Post body.</p></div>
+            <div data-tooltip="Report Misuse" data-role="thread-flag" class="discussion-flag-abuse notflagged">
+            <i class="icon"></i><span class="flag-label">Report Misuse</span></div>
+            <div data-tooltip="pin this thread" data-role="thread-pin" class="admin-pin discussion-pin notpinned">
+            <i class="icon"></i><span class="pin-label">Pin Thread</span></div>
+        </div>
+        '''
+        @
+
+    it "defines the class", ->
+        # spyOn @content, 'initialize'
+        myView = new DiscussionContentView(new Content)
+        expect(myView.tagName).toBeDefined()

common/static/coffee/spec/discussion/view/response_comment_show_view_spec.coffee

-xdescribe "ResponseCommentShowView", ->
+describe 'ResponseCommentShowView', ->
+    beforeEach ->
+        # set up the container for the response to go in
+        setFixtures """
+        <ol class="responses"></ol>
+        <script id="response-comment-show-template" type="text/template">
+            <div id="comment_<%- id %>">
+            <div class="response-body"><%- body %></div>
+            <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse">
+            <i class="icon"></i><span class="flag-label"></span></div>
+            <p class="posted-details">&ndash;posted <span class="timeago" title="<%- created_at %>"><%- created_at %></span> by
+            <% if (obj.username) { %>
+            <a href="<%- user_url %>" class="profile-link"><%- username %></a>
+            <% } else {print('anonymous');} %>
+            </p>
+            </div>
+        </script>
+        """
 
-  it "defines the class", ->
-    spyOn myComment, 'initialize'
-    myComment = new Comment()
-    myView = new ResponseCommentShowView(myComment)
-    expect(myView.tagName).toBeDefined()
+        # set up a model for a new Comment
+        @response = new Comment {
+                id: '01234567',
+                user_id: '567',
+                course_id: 'mitX/999/test',
+                body: 'this is a response',
+                created_at: '2013-04-03T20:08:39Z',
+                abuse_flaggers: ['123']
+                roles: []
+        }
+        @view = new ResponseCommentShowView({ model: @response })
+
+        # spyOn(DiscussionUtil, 'loadRoles').andReturn []
+
+    it 'defines the tag', ->
+        expect($('#jasmine-fixtures')).toExist
+        expect(@view.tagName).toBeDefined
+        expect(@view.el.tagName.toLowerCase()).toBe 'li'
+
+    it 'is tied to the model', ->
+        expect(@view.model).toBeDefined();
+
+    describe 'rendering', ->
+
+        beforeEach ->
+            spyOn(@view, 'renderAttrs')
+            spyOn(@view, 'markAsStaff')
+            spyOn(@view, 'convertMath')
+
+        it 'produces the correct HTML', ->
+            @view.render()
+            expect(@view.el.innerHTML).toContainHtml """
+            <div class="response-body">this is a response</div>
+            <div class="discussion-flag-abuse notflagged"
+                data-role="thread-flag" data-tooltip="report misuse">
+                <i class="icon"></i><span class="flag-label"></span></div>
+            """

common/static/coffee/src/discussion/views/response_comment_show_view.coffee

 if Backbone?
   class @ResponseCommentShowView extends DiscussionContentView
-  
+
     events:
-      "click .discussion-flag-abuse": "toggleFlagAbuse"  
+      "click .discussion-flag-abuse": "toggleFlagAbuse"
 
     tagName: "li"
-    
+
     initialize: ->
         super()
         @model.on "change", @updateModelDetails
@@ -42,17 +42,17 @@ if Backbone?
         @$el.find("a.profile-link").after('<span class="staff-label">staff</span>')
       else if DiscussionUtil.isTA(@model.get("user_id"))
         @$el.find("a.profile-link").after('<span class="community-ta-label">Community&nbsp;&nbsp;TA</span>')
-        
-        
+
+
     renderFlagged: =>
       if window.user.id in @model.get("abuse_flaggers") or (DiscussionUtil.isFlagModerator and @model.get("abuse_flaggers").length > 0)
-        @$("[data-role=thread-flag]").addClass("flagged")  
+        @$("[data-role=thread-flag]").addClass("flagged")
         @$("[data-role=thread-flag]").removeClass("notflagged")
       else
-        @$("[data-role=thread-flag]").removeClass("flagged")  
-        @$("[data-role=thread-flag]").addClass("notflagged")  
-      
+        @$("[data-role=thread-flag]").removeClass("flagged")
+        @$("[data-role=thread-flag]").addClass("notflagged")
+
     updateModelDetails: =>
       @renderFlagged()
-        
-        
+
+

common/static/js/vendor/flot/jquery.timeago.js

+/**
+ * Timeago is a jQuery plugin that makes it easy to support automatically
+ * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
+ *
+ * @name timeago
+ * @version 0.11.4
+ * @requires jQuery v1.2.3+
+ * @author Ryan McGeary
+ * @license MIT License - http://www.opensource.org/licenses/mit-license.php
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+  $.timeago = function(timestamp) {
+    if (timestamp instanceof Date) {
+      return inWords(timestamp);
+    } else if (typeof timestamp === "string") {
+      return inWords($.timeago.parse(timestamp));
+    } else if (typeof timestamp === "number") {
+      return inWords(new Date(timestamp));
+    } else {
+      return inWords($.timeago.datetime(timestamp));
+    }
+  };
+  var $t = $.timeago;
+
+  $.extend($.timeago, {
+    settings: {
+      refreshMillis: 60000,
+      allowFuture: false,
+      strings: {
+        prefixAgo: null,
+        prefixFromNow: null,
+        suffixAgo: "ago",
+        suffixFromNow: "from now",
+        seconds: "less than a minute",
+        minute: "about a minute",
+        minutes: "%d minutes",
+        hour: "about an hour",
+        hours: "about %d hours",
+        day: "a day",
+        days: "%d days",
+        month: "about a month",
+        months: "%d months",
+        year: "about a year",
+        years: "%d years",
+        wordSeparator: " ",
+        numbers: []
+      }
+    },
+    inWords: function(distanceMillis) {
+      var $l = this.settings.strings;
+      var prefix = $l.prefixAgo;
+      var suffix = $l.suffixAgo;
+      if (this.settings.allowFuture) {
+        if (distanceMillis < 0) {
+          prefix = $l.prefixFromNow;
+          suffix = $l.suffixFromNow;
+        }
+      }
+
+      var seconds = Math.abs(distanceMillis) / 1000;
+      var minutes = seconds / 60;
+      var hours = minutes / 60;
+      var days = hours / 24;
+      var years = days / 365;
+
+      function substitute(stringOrFunction, number) {
+        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
+        var value = ($l.numbers && $l.numbers[number]) || number;
+        return string.replace(/%d/i, value);
+      }
+
+      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
+        seconds < 90 && substitute($l.minute, 1) ||
+        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
+        minutes < 90 && substitute($l.hour, 1) ||
+        hours < 24 && substitute($l.hours, Math.round(hours)) ||
+        hours < 42 && substitute($l.day, 1) ||
+        days < 30 && substitute($l.days, Math.round(days)) ||
+        days < 45 && substitute($l.month, 1) ||
+        days < 365 && substitute($l.months, Math.round(days / 30)) ||
+        years < 1.5 && substitute($l.year, 1) ||
+        substitute($l.years, Math.round(years));
+
+      var separator = $l.wordSeparator === undefined ?  " " : $l.wordSeparator;
+      return $.trim([prefix, words, suffix].join(separator));
+    },
+    parse: function(iso8601) {
+      var s = $.trim(iso8601);
+      s = s.replace(/\.\d+/,""); // remove milliseconds
+      s = s.replace(/-/,"/").replace(/-/,"/");
+      s = s.replace(/T/," ").replace(/Z/," UTC");
+      s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+      return new Date(s);
+    },
+    datetime: function(elem) {
+      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
+      return $t.parse(iso8601);
+    },
+    isTime: function(elem) {
+      // jQuery's `is()` doesn't play well with HTML5 in IE
+      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
+    }
+  });
+
+  $.fn.timeago = function() {
+    var self = this;
+    self.each(refresh);
+
+    var $s = $t.settings;
+    if ($s.refreshMillis > 0) {
+      setInterval(function() { self.each(refresh); }, $s.refreshMillis);
+    }
+    return self;
+  };
+
+  function refresh() {
+    var data = prepareData(this);
+    if (!isNaN(data.datetime)) {
+      $(this).text(inWords(data.datetime));
+    }
+    return this;
+  }
+
+  function prepareData(element) {
+    element = $(element);
+    if (!element.data("timeago")) {
+      element.data("timeago", { datetime: $t.datetime(element) });
+      var text = $.trim(element.text());
+      if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
+        element.attr("title", text);
+      }
+    }
+    return element.data("timeago");
+  }
+
+  function inWords(date) {
+    return $t.inWords(distance(date));
+  }
+
+  function distance(date) {
+    return (new Date().getTime() - date.getTime());
+  }
+
+  // fix for IE6 suckage
+  document.createElement("abbr");
+  document.createElement("time");
+}(jQuery));

common/static/js/vendor/jquery.timeago.js

+/**
+ * Timeago is a jQuery plugin that makes it easy to support automatically
+ * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
+ *
+ * @name timeago
+ * @version 0.11.4
+ * @requires jQuery v1.2.3+
+ * @author Ryan McGeary
+ * @license MIT License - http://www.opensource.org/licenses/mit-license.php
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+  $.timeago = function(timestamp) {
+    if (timestamp instanceof Date) {
+      return inWords(timestamp);
+    } else if (typeof timestamp === "string") {
+      return inWords($.timeago.parse(timestamp));
+    } else if (typeof timestamp === "number") {
+      return inWords(new Date(timestamp));
+    } else {
+      return inWords($.timeago.datetime(timestamp));
+    }
+  };
+  var $t = $.timeago;
+
+  $.extend($.timeago, {
+    settings: {
+      refreshMillis: 60000,
+      allowFuture: false,
+      strings: {
+        prefixAgo: null,
+        prefixFromNow: null,
+        suffixAgo: "ago",
+        suffixFromNow: "from now",
+        seconds: "less than a minute",
+        minute: "about a minute",
+        minutes: "%d minutes",
+        hour: "about an hour",
+        hours: "about %d hours",
+        day: "a day",
+        days: "%d days",
+        month: "about a month",
+        months: "%d months",
+        year: "about a year",
+        years: "%d years",
+        wordSeparator: " ",
+        numbers: []
+      }
+    },
+    inWords: function(distanceMillis) {
+      var $l = this.settings.strings;
+      var prefix = $l.prefixAgo;
+      var suffix = $l.suffixAgo;
+      if (this.settings.allowFuture) {
+        if (distanceMillis < 0) {
+          prefix = $l.prefixFromNow;
+          suffix = $l.suffixFromNow;
+        }
+      }
+
+      var seconds = Math.abs(distanceMillis) / 1000;
+      var minutes = seconds / 60;
+      var hours = minutes / 60;
+      var days = hours / 24;
+      var years = days / 365;
+
+      function substitute(stringOrFunction, number) {
+        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
+        var value = ($l.numbers && $l.numbers[number]) || number;
+        return string.replace(/%d/i, value);
+      }
+
+      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
+        seconds < 90 && substitute($l.minute, 1) ||
+        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
+        minutes < 90 && substitute($l.hour, 1) ||
+        hours < 24 && substitute($l.hours, Math.round(hours)) ||
+        hours < 42 && substitute($l.day, 1) ||
+        days < 30 && substitute($l.days, Math.round(days)) ||
+        days < 45 && substitute($l.month, 1) ||
+        days < 365 && substitute($l.months, Math.round(days / 30)) ||
+        years < 1.5 && substitute($l.year, 1) ||
+        substitute($l.years, Math.round(years));
+
+      var separator = $l.wordSeparator === undefined ?  " " : $l.wordSeparator;
+      return $.trim([prefix, words, suffix].join(separator));
+    },
+    parse: function(iso8601) {
+      var s = $.trim(iso8601);
+      s = s.replace(/\.\d+/,""); // remove milliseconds
+      s = s.replace(/-/,"/").replace(/-/,"/");
+      s = s.replace(/T/," ").replace(/Z/," UTC");
+      s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+      return new Date(s);
+    },
+    datetime: function(elem) {
+      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
+      return $t.parse(iso8601);
+    },
+    isTime: function(elem) {
+      // jQuery's `is()` doesn't play well with HTML5 in IE
+      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
+    }
+  });
+
+  $.fn.timeago = function() {
+    var self = this;
+    self.each(refresh);
+
+    var $s = $t.settings;
+    if ($s.refreshMillis > 0) {
+      setInterval(function() { self.each(refresh); }, $s.refreshMillis);
+    }
+    return self;
+  };
+
+  function refresh() {
+    var data = prepareData(this);
+    if (!isNaN(data.datetime)) {
+      $(this).text(inWords(data.datetime));
+    }
+    return this;
+  }
+
+  function prepareData(element) {
+    element = $(element);
+    if (!element.data("timeago")) {
+      element.data("timeago", { datetime: $t.datetime(element) });
+      var text = $.trim(element.text());
+      if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
+        element.attr("title", text);
+      }
+    }
+    return element.data("timeago");
+  }
+
+  function inWords(date) {
+    return $t.inWords(distance(date));
+  }
+
+  function distance(date) {
+    return (new Date().getTime() - date.getTime());
+  }
+
+  // fix for IE6 suckage
+  document.createElement("abbr");
+  document.createElement("time");
+}(jQuery));

common/templates/jasmine/base.html

@@ -37,18 +37,18 @@
 
 <script>
     {% block jasmine %}
+    var console_reporter = new jasmine.ConsoleReporter();
     (function() {
         var jasmineEnv = jasmine.getEnv();
         jasmineEnv.updateInterval = 1000;
 
-        var htmlReporter = new jasmine.HtmlReporter();
-        var console_reporter = new jasmine.ConsoleReporter()
+        var trivialReporter = new jasmine.TrivialReporter();
 
-        jasmineEnv.addReporter(htmlReporter);
-        jasmineEnv.addReporter(console_reporter);
+        jasmineEnv.addReporter(trivialReporter);
+        jasmine.getEnv().addReporter(console_reporter);
 
         jasmineEnv.specFilter = function(spec) {
-            return htmlReporter.specFilter(spec);
+            return trivialReporter.specFilter(spec);
         };
 
         // Additional configuration can be done in this block

common/templates/jasmine/jasmine_test_runner.html.erb

@@ -24,6 +24,7 @@
   <script type="text/javascript" src="<%= common_js_root %>/vendor/tiny_mce/jquery.tinymce.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/tiny_mce/tiny_mce.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/mathjax-MathJax-c9db6ac/MathJax.js?config=default"></script>
+  <script type="text/javascript" src="<%= common_js_root %>/vendor/jquery.timeago.js"></script>
   <script type="text/javascript">
     AjaxPrefix.addAjaxPrefix(jQuery, function() {
        return "";