Merge pull request #14280 from edx/bjacobel/disc-prof-no-read-state

Hide read state on profile pages. Add tests for read state generally

common/static/common/js/discussion/views/discussion_thread_list_view.js

@@ -93,6 +93,7 @@
                 this.courseSettings = options.courseSettings;
                 this.hideRefineBar = options.hideRefineBar;
                 this.supportsActiveThread = options.supportsActiveThread;
+                this.hideReadState = options.hideReadState || false;
                 this.displayedCollection = new Discussion(this.collection.models, {
                     pages: this.collection.pages
                 });
@@ -342,7 +343,8 @@
                             neverRead: neverRead,
                             threadUrl: thread.urlFor('retrieve'),
                             threadPreview: threadPreview,
-                            showThreadPreview: this.showThreadPreview
+                            showThreadPreview: this.showThreadPreview,
+                            hideReadState: this.hideReadState
                         },
                         thread.toJSON()
                     );

common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js

@@ -169,6 +169,7 @@
             });
             return this.view.render();
         });
+
         setupAjax = function(callback) {
             return $.ajax.and.callFake(function(params) {
                 if (callback) {
@@ -185,19 +186,27 @@
                 };
             });
         };
+
         renderSingleThreadWithProps = function(props) {
             return makeView(new Discussion([new Thread(DiscussionViewSpecHelper.makeThreadWithProps(props))])).render();
         };
-        makeView = function(discussion) {
-            return new DiscussionThreadListView({
+
+        makeView = function(discussion, props) {
+            return new DiscussionThreadListView(
+                _.extend(
+                    {
                         el: $('#fixture-element'),
                         collection: discussion,
                         showThreadPreview: true,
                         courseSettings: new DiscussionCourseSettings({
                             is_cohorted: true
                         })
-            });
+                    },
+                    props
+                )
+            );
         };
+
         expectFilter = function(filterVal) {
             return $.ajax.and.callFake(function(params) {
                 _.each(['unread', 'unanswered', 'flagged'], function(paramName) {
@@ -681,5 +690,45 @@
                 expect(view.$el.find('.thread-preview-body').length).toEqual(0);
             });
         });
+
+        describe('read/unread state', function() {
+            it('adds never-read class to unread threads', function() {
+                var unreads = this.threads.filter(function(thread) {
+                    return !thread.read && thread.unread_comments_count === thread.comments_count;
+                }).length;
+
+                this.view = makeView(new Discussion(this.threads));
+                this.view.render();
+                expect(this.view.$('.never-read').length).toEqual(unreads);
+            });
+
+            it('shows a "x new" message for threads that are read, but have unread comments', function() {
+                var unreadThread = this.threads.filter(function(thread) {
+                        return thread.read && thread.unread_comments_count !== thread.comments_count;
+                    })[0],
+                    newCommentsOnUnreadThread = unreadThread.unread_comments_count;
+
+                this.view = makeView(new Discussion(this.threads));
+                this.view.render();
+                expect(
+                    this.view.$('.forum-nav-thread-unread-comments-count')
+                        .first()
+                        .text()
+                        .trim()
+                ).toEqual(newCommentsOnUnreadThread + ' new');
+            });
+
+            it('should display every thread as read if hideReadState: true is passed to the constructor', function() {
+                this.view = makeView(new Discussion(this.threads), {hideReadState: true});
+                this.view.render();
+                expect(this.view.$('.never-read').length).toEqual(0);
+            });
+
+            it('does not show the "x new" indicator for any thread if hideReadState: true is passed', function() {
+                this.view = makeView(new Discussion(this.threads), {hideReadState: true});
+                this.view.render();
+                expect(this.view.$('.forum-nav-thread-unread-comments-count').length).toEqual(0);
+            });
+        });
     });
 }).call(this);

common/static/common/templates/discussion/thread-list-item.underscore

-<li data-id="<%- id %>" class="forum-nav-thread<% if (neverRead) { %> never-read<% } %>">
+<li data-id="<%- id %>" class="forum-nav-thread<% if (!hideReadState && neverRead) { %> never-read<% } %>">
   <a href="<%- threadUrl %>" class="forum-nav-thread-link">
     <div class="forum-nav-thread-wrapper-0">
       <%
@@ -75,7 +75,7 @@
       %>
       </span>
 
-      <% if (!neverRead && unread_comments_count > 0) { %>
+      <% if (!hideReadState && !neverRead && unread_comments_count > 0) { %>
         <span class="forum-nav-thread-unread-comments-count">
           <%-
             StringUtils.interpolate(

lms/djangoapps/discussion/static/discussion/js/views/discussion_user_profile_view.js

@@ -39,7 +39,10 @@
                         collection: this.discussion,
                         el: this.$('.inline-threads'),
                         courseSettings: this.courseSettings,
-                        hideRefineBar: true  // TODO: re-enable the search/filter bar when it works correctly
+                        hideRefineBar: true,  // TODO: re-enable the search/filter bar when it works correctly
+                        // @TODO: On the profile page, thread read state for the viewing user is not accessible via API.
+                        // Fix this when the Discussions API can support this query. Until then, hide read state.
+                        hideReadState: true
                     }).render();
 
                     this.discussionThreadListView.on('thread:selected', _.bind(this.navigateToThread, this));