Bookmarks List Pagination

TNL-2490

common/static/common/templates/components/paging-footer.underscore

-<nav class="pagination pagination-full bottom" aria-label="Teams Pagination">
+<nav class="pagination pagination-full bottom" aria-label="Pagination">
     <div class="nav-item previous"><button class="nav-link previous-page-link"><i class="icon fa fa-angle-left" aria-hidden="true"></i> <span class="nav-label"><%= gettext("Previous") %></span></button></div>
     <div class="nav-item page">
         <div class="pagination-form">

common/test/acceptance/pages/common/paging.py

@@ -15,6 +15,7 @@ class PaginatedUIMixin(object):
     PREVIOUS_PAGE_BUTTON_CSS = 'button.previous-page-link'
     PAGINATION_HEADER_TEXT_CSS = 'div.search-tools'
     CURRENT_PAGE_NUMBER_CSS = 'span.current-page'
+    TOTAL_PAGES_CSS = 'span.total-pages'
 
     def get_pagination_header_text(self):
         """Return the text showing which items the user is currently viewing."""
@@ -31,6 +32,11 @@ class PaginatedUIMixin(object):
         """Return the the current page number."""
         return int(self.q(css=self.CURRENT_PAGE_NUMBER_CSS).text[0])
 
+    @property
+    def get_total_pages(self):
+        """Returns the total page value"""
+        return int(self.q(css=self.TOTAL_PAGES_CSS).text[0])
+
     def go_to_page(self, page_number):
         """Go to the given page_number in the paginated list results."""
         self.q(css=self.PAGE_NUMBER_INPUT_CSS).results[0].send_keys(unicode(page_number), Keys.ENTER)

common/test/acceptance/pages/lms/bookmarks.py

@@ -3,9 +3,10 @@ Courseware Boomarks
 """
 from bok_choy.promise import EmptyPromise
 from .course_page import CoursePage
+from ..common.paging import PaginatedUIMixin
 
 
-class BookmarksPage(CoursePage):
+class BookmarksPage(CoursePage, PaginatedUIMixin):
     """
     Courseware Bookmarks Page.
     """

common/test/acceptance/tests/lms/test_bookmarks.py

@@ -2,13 +2,16 @@
 """
 End-to-end tests for the courseware unit bookmarks.
 """
-
-from ...pages.studio.auto_auth import AutoAuthPage
+import json
+import requests
+from ...pages.studio.auto_auth import AutoAuthPage as StudioAutoAuthPage
+from ...pages.lms.auto_auth import AutoAuthPage as LmsAutoAuthPage
 from ...pages.lms.bookmarks import BookmarksPage
 from ...pages.lms.courseware import CoursewarePage
 from ...pages.lms.course_nav import CourseNavPage
 from ...pages.studio.overview import CourseOutlinePage
 from ...pages.common.logout import LogoutPage
+from ...pages.common import BASE_URL
 
 from ...fixtures.course import CourseFixture, XBlockFixtureDesc
 from ..helpers import EventsTestMixin, UniqueCourseTest, is_404_page
@@ -78,6 +81,12 @@ class BookmarksTest(BookmarksTestMixin):
         self.bookmarks_page = BookmarksPage(self.browser, self.course_id)
         self.course_nav = CourseNavPage(self.browser)
 
+        # Get session to be used for bookmarking units
+        self.session = requests.Session()
+        params = {'username': self.USERNAME, 'email': self.EMAIL, 'course_id': self.course_id}
+        response = self.session.get(BASE_URL + "/auto_auth", params=params)
+        self.assertTrue(response.ok, "Failed to get session")
+
     def _test_setup(self, num_chapters=2):
         """
         Setup test settings.
@@ -88,29 +97,41 @@ class BookmarksTest(BookmarksTestMixin):
         self.create_course_fixture(num_chapters)
 
         # Auto-auth register for the course.
-        AutoAuthPage(self.browser, username=self.USERNAME, email=self.EMAIL, course_id=self.course_id).visit()
+        LmsAutoAuthPage(self.browser, username=self.USERNAME, email=self.EMAIL, course_id=self.course_id).visit()
 
         self.courseware_page.visit()
 
-    def _bookmark_unit(self, index):
+    def _bookmark_unit(self, location):
         """
         Bookmark a unit
 
         Arguments:
-            index: unit index to bookmark
+            location (str): unit location
         """
-        self.course_nav.go_to_section('TestSection{}'.format(index), 'TestSubsection{}'.format(index))
-        self.courseware_page.click_bookmark_unit_button()
+        _headers = {
+            'Content-type': 'application/json',
+            'X-CSRFToken': self.session.cookies['csrftoken'],
+        }
+        params = {'course_id': self.course_id}
+        data = json.dumps({'usage_id': location})
+        response = self.session.post(
+            BASE_URL + '/api/bookmarks/v1/bookmarks/',
+            data=data,
+            params=params,
+            headers=_headers
+        )
+        self.assertTrue(response.ok, "Failed to bookmark unit")
 
     def _bookmark_units(self, num_units):
         """
-        Bookmark first `num_units` units by visiting them
+        Bookmark first `num_units` units
 
         Arguments:
             num_units(int): Number of units to bookmarks
         """
+        xblocks = self.course_fixture.get_nested_xblocks(category="vertical")
         for index in range(num_units):
-            self._bookmark_unit(index)
+            self._bookmark_unit(xblocks[index].locator)
 
     def _breadcrumb(self, num_units):
         """
@@ -138,7 +159,7 @@ class BookmarksTest(BookmarksTestMixin):
 
         # Logout and login as staff
         LogoutPage(self.browser).visit()
-        AutoAuthPage(
+        StudioAutoAuthPage(
             self.browser, username=self.USERNAME, email=self.EMAIL, course_id=self.course_id, staff=True
         ).visit()
 
@@ -150,7 +171,7 @@ class BookmarksTest(BookmarksTestMixin):
 
         # Logout and login as a student.
         LogoutPage(self.browser).visit()
-        AutoAuthPage(self.browser, username=self.USERNAME, email=self.EMAIL, course_id=self.course_id).visit()
+        LmsAutoAuthPage(self.browser, username=self.USERNAME, email=self.EMAIL, course_id=self.course_id).visit()
 
         # Visit courseware as a student.
         self.courseware_page.visit()
@@ -167,6 +188,25 @@ class BookmarksTest(BookmarksTestMixin):
         self.bookmarks_page.click_bookmarks_button()
         self.assertEqual(self.bookmarks_page.count(), bookmarked_count)
 
+    def _verify_pagination_info(
+            self,
+            bookmark_count_on_current_page,
+            header_text,
+            previous_button_enabled,
+            next_button_enabled,
+            current_page_number,
+            total_pages
+    ):
+        """
+        Verify pagination info
+        """
+        self.assertEqual(self.bookmarks_page.count(), bookmark_count_on_current_page)
+        self.assertEqual(self.bookmarks_page.get_pagination_header_text(), header_text)
+        self.assertEqual(self.bookmarks_page.is_previous_page_button_enabled(), previous_button_enabled)
+        self.assertEqual(self.bookmarks_page.is_next_page_button_enabled(), next_button_enabled)
+        self.assertEqual(self.bookmarks_page.get_current_page_number(), current_page_number)
+        self.assertEqual(self.bookmarks_page.get_total_pages, total_pages)
+
     def test_bookmark_button(self):
         """
         Scenario: Bookmark unit button toggles correctly
@@ -232,12 +272,18 @@ class BookmarksTest(BookmarksTestMixin):
         self.assertEqual(self.bookmarks_page.results_header_text(), 'MY BOOKMARKS')
         self.assertEqual(self.bookmarks_page.count(), 2)
 
-        bookmarked_breadcrumbs = self.bookmarks_page.breadcrumbs()
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=2,
+            header_text='Showing 1-2 out of 2 total',
+            previous_button_enabled=False,
+            next_button_enabled=False,
+            current_page_number=1,
+            total_pages=1
+        )
 
-        # Verify bookmarked breadcrumbs and bookmarks order (most recently bookmarked unit should come first)
+        bookmarked_breadcrumbs = self.bookmarks_page.breadcrumbs()
         breadcrumbs = self._breadcrumb(2)
-        breadcrumbs.reverse()
-        self.assertEqual(bookmarked_breadcrumbs, breadcrumbs)
+        self.assertItemsEqual(bookmarked_breadcrumbs, breadcrumbs)
 
         # get usage ids for units
         xblocks = self.course_fixture.get_nested_xblocks(category="vertical")
@@ -271,29 +317,216 @@ class BookmarksTest(BookmarksTestMixin):
         self.assertTrue(self.bookmarks_page.results_present())
         self.assertEqual(self.bookmarks_page.count(), 2)
 
-        self.bookmarks_page.click_bookmarked_block(1)
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=2,
+            header_text='Showing 1-2 out of 2 total',
+            previous_button_enabled=False,
+            next_button_enabled=False,
+            current_page_number=1,
+            total_pages=1
+        )
+
+        self.bookmarks_page.click_bookmarked_block(0)
         self.assertTrue(is_404_page(self.browser))
 
     def test_page_size_limit(self):
         """
-        Scenario: We can get more bookmarks if page size is greater than default page size.
-        Note:
-            * Current Bookmarks API page_size value is 10.
-            * page_size value in bookmarks client side is set to 500.
+        Scenario: We can't get bookmarks more than default page size.
 
         Given that I am a registered user
         And I visit my courseware page
-        And I have bookmarked all the units available
+        And I have bookmarked all the 11 units available
         Then I click on Bookmarks button
         And I should see a bookmarked list
-        And bookmark list contains 11 bookmarked items
+        And bookmark list contains 10 bookmarked items
         """
         self._test_setup(11)
         self._bookmark_units(11)
 
         self.bookmarks_page.click_bookmarks_button()
         self.assertTrue(self.bookmarks_page.results_present())
-        self.assertEqual(self.bookmarks_page.count(), 11)
+        self.assertEqual(self.bookmarks_page.count(), 10)
+
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=10,
+            header_text='Showing 1-10 out of 11 total',
+            previous_button_enabled=False,
+            next_button_enabled=True,
+            current_page_number=1,
+            total_pages=2
+        )
+
+    def test_pagination_with_single_page(self):
+        """
+        Scenario: Bookmarks list pagination is working as expected for single page
+        Given that I am a registered user
+        And I visit my courseware page
+        And I have bookmarked all the 2 units available
+        Then I click on Bookmarks button
+        And I should see a bookmarked list with 2 bookmarked items
+        And I should see paging header and footer with correct data
+        And previous and next buttons are disabled
+        """
+        self._test_setup(num_chapters=2)
+        self._bookmark_units(num_units=2)
+
+        self.bookmarks_page.click_bookmarks_button()
+        self.assertTrue(self.bookmarks_page.results_present())
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=2,
+            header_text='Showing 1-2 out of 2 total',
+            previous_button_enabled=False,
+            next_button_enabled=False,
+            current_page_number=1,
+            total_pages=1
+        )
+
+    def test_next_page_button(self):
+        """
+        Scenario: Next button is working as expected for bookmarks list pagination
+
+        Given that I am a registered user
+        And I visit my courseware page
+        And I have bookmarked all the 12 units available
+
+        Then I click on Bookmarks button
+        And I should see a bookmarked list of 10 items
+        And I should see paging header and footer with correct info
+
+        Then I click on next page button in footer
+        And I should be navigated to second page
+        And I should see a bookmarked list with 2 items
+        And I should see paging header and footer with correct info
+        """
+        self._test_setup(num_chapters=12)
+        self._bookmark_units(num_units=12)
+
+        self.bookmarks_page.click_bookmarks_button()
+        self.assertTrue(self.bookmarks_page.results_present())
+
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=10,
+            header_text='Showing 1-10 out of 12 total',
+            previous_button_enabled=False,
+            next_button_enabled=True,
+            current_page_number=1,
+            total_pages=2
+        )
+
+        self.bookmarks_page.press_next_page_button()
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=2,
+            header_text='Showing 11-12 out of 12 total',
+            previous_button_enabled=True,
+            next_button_enabled=False,
+            current_page_number=2,
+            total_pages=2
+        )
+
+    def test_previous_page_button(self):
+        """
+        Scenario: Previous button is working as expected for bookmarks list pagination
+
+        Given that I am a registered user
+        And I visit my courseware page
+        And I have bookmarked all the 12 units available
+        And I click on Bookmarks button
+
+        Then I click on next page button in footer
+        And I should be navigated to second page
+        And I should see a bookmarked list with 2 items
+        And I should see paging header and footer with correct info
+
+        Then I click on previous page button
+        And I should be navigated to first page
+        And I should see paging header and footer with correct info
+        """
+        self._test_setup(num_chapters=12)
+        self._bookmark_units(num_units=12)
+
+        self.bookmarks_page.click_bookmarks_button()
+        self.assertTrue(self.bookmarks_page.results_present())
+
+        self.bookmarks_page.press_next_page_button()
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=2,
+            header_text='Showing 11-12 out of 12 total',
+            previous_button_enabled=True,
+            next_button_enabled=False,
+            current_page_number=2,
+            total_pages=2
+        )
+
+        self.bookmarks_page.press_previous_page_button()
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=10,
+            header_text='Showing 1-10 out of 12 total',
+            previous_button_enabled=False,
+            next_button_enabled=True,
+            current_page_number=1,
+            total_pages=2
+        )
+
+    def test_pagination_with_valid_page_number(self):
+        """
+        Scenario: Bookmarks list pagination works as expected for valid page number
+
+        Given that I am a registered user
+        And I visit my courseware page
+        And I have bookmarked all the 12 units available
+
+        Then I click on Bookmarks button
+        And I should see a bookmarked list
+        And I should see total page value is 2
+        Then I enter 2 in the page number input
+        And I should be navigated to page 2
+        """
+        self._test_setup(num_chapters=11)
+        self._bookmark_units(num_units=11)
+
+        self.bookmarks_page.click_bookmarks_button()
+        self.assertTrue(self.bookmarks_page.results_present())
+        self.assertEqual(self.bookmarks_page.get_total_pages, 2)
+
+        self.bookmarks_page.go_to_page(2)
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=1,
+            header_text='Showing 11-11 out of 11 total',
+            previous_button_enabled=True,
+            next_button_enabled=False,
+            current_page_number=2,
+            total_pages=2
+        )
+
+    def test_pagination_with_invalid_page_number(self):
+        """
+        Scenario: Bookmarks list pagination works as expected for invalid page number
+
+        Given that I am a registered user
+        And I visit my courseware page
+        And I have bookmarked all the 11 units available
+        Then I click on Bookmarks button
+        And I should see a bookmarked list
+        And I should see total page value is 2
+        Then I enter 3 in the page number input
+        And I should stay at page 1
+        """
+        self._test_setup(num_chapters=11)
+        self._bookmark_units(num_units=11)
+
+        self.bookmarks_page.click_bookmarks_button()
+        self.assertTrue(self.bookmarks_page.results_present())
+        self.assertEqual(self.bookmarks_page.get_total_pages, 2)
+
+        self.bookmarks_page.go_to_page(3)
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=10,
+            header_text='Showing 1-10 out of 11 total',
+            previous_button_enabled=False,
+            next_button_enabled=True,
+            current_page_number=1,
+            total_pages=2
+        )
 
     def test_bookmarked_unit_accessed_event(self):
         """
@@ -319,7 +552,17 @@ class BookmarksTest(BookmarksTestMixin):
                 }
             }
         ]
-        self._bookmark_unit(0)
+        self._bookmark_units(num_units=1)
         self.bookmarks_page.click_bookmarks_button()
+
+        self._verify_pagination_info(
+            bookmark_count_on_current_page=1,
+            header_text='Showing 1 out of 1 total',
+            previous_button_enabled=False,
+            next_button_enabled=False,
+            current_page_number=1,
+            total_pages=1
+        )
+
         self.bookmarks_page.click_bookmarked_block(0)
         self.verify_event_data('edx.bookmark.accessed', event_data)

lms/static/js/bookmarks/collections/bookmarks.js

 ;(function (define) {
     'use strict';
-    define(['backbone', 'js/bookmarks/models/bookmark'],
-        function (Backbone, BookmarkModel) {
+    define(['backbone', 'common/js/components/collections/paging_collection', 'js/bookmarks/models/bookmark'],
+        function (Backbone, PagingCollection, BookmarkModel) {
 
+            return PagingCollection.extend({
+                initialize: function(options) {
+                    PagingCollection.prototype.initialize.call(this);
 
-        return Backbone.Collection.extend({
-            model: BookmarkModel,
+                    this.url = options.url;
+                    this.server_api.course_id = function () { return encodeURIComponent(options.course_id); };
+                    this.server_api.fields = function () { return encodeURIComponent('display_name,path'); };
+                    delete this.server_api.sort_order; // Sort order is not specified for the Bookmark API
+                },
 
-            url: function() {
-                return $(".courseware-bookmarks-button").data('bookmarksApiUrl');
-            },
+                model: BookmarkModel,
 
-            parse: function(response) {
-                return response.results;
-            }
-        });
+                url: function() {
+                    return this.url;
+                }
+            });
     });
 
-})(define || RequireJS.define);
+})(define || RequireJS.define);
\ No newline at end of file

lms/static/js/bookmarks/views/bookmarks_list.js

 ;(function (define, undefined) {
     'use strict';
-    define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment'],
-        function (gettext, $, _, Backbone, Logger, _moment) {
+    define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment',
+            'common/js/components/views/paging_header', 'common/js/components/views/paging_footer'],
+        function (gettext, $, _, Backbone, Logger, _moment, PagingHeaderView, PagingFooterView) {
 
         var moment = _moment || window.moment;
 
@@ -16,27 +17,31 @@
             errorMessage: gettext('An error has occurred. Please try again.'),
             loadingMessage: gettext('Loading'),
 
-            PAGE_SIZE: 500,
+            defaultPage: 1,
 
             events : {
                 'click .bookmarks-results-list-item': 'visitBookmark'
             },
 
             initialize: function (options) {
-                this.template = _.template($('#bookmarks_list-tpl').text());
+                this.template = _.template($('#bookmarks-list-tpl').text());
                 this.loadingMessageView = options.loadingMessageView;
                 this.errorMessageView = options.errorMessageView;
-                this.courseId = $(this.el).data('courseId');
                 this.langCode = $(this.el).data('langCode');
+                this.pagingHeaderView = new PagingHeaderView({collection: this.collection});
+                this.pagingFooterView = new PagingFooterView({collection: this.collection});
+                this.listenTo(this.collection, 'page_changed', this.render);
                 _.bindAll(this, 'render', 'humanFriendlyDate');
             },
 
             render: function () {
                 var data = {
-                    bookmarks: this.collection.models,
+                    bookmarksCollection: this.collection,
                     humanFriendlyDate: this.humanFriendlyDate
                 };
                 this.$el.html(this.template(data));
+                this.pagingHeaderView.setElement(this.$('.paging-header')).render();
+                this.pagingFooterView.setElement(this.$('.paging-footer')).render();
                 this.delegateEvents();
                 return this;
             },
@@ -48,10 +53,7 @@
                 this.showBookmarksContainer();
                 this.showLoadingMessage();
 
-                this.collection.fetch({
-                    reset: true,
-                    data: {course_id: this.courseId, page_size: this.PAGE_SIZE, fields: 'display_name,path'}
-                }).done(function () {
+                this.collection.goTo(this.defaultPage).done(function () {
                     view.hideLoadingMessage();
                     view.render();
                     view.focusBookmarksElement();

lms/static/js/bookmarks/views/bookmarks_list_button.js

@@ -16,11 +16,20 @@
             },
 
             initialize: function () {
-                this.bookmarksListView = new BookmarksListView({
-                    collection: new BookmarksCollection(),
-                    loadingMessageView: new MessageView({el: $(this.loadingMessageElement)}),
-                    errorMessageView: new MessageView({el: $(this.errorMessageElement)})
-                });
+                var bookmarksCollection = new BookmarksCollection(
+                    {
+                        course_id: $('.courseware-results').data('courseId'),
+                        url: $(".courseware-bookmarks-button").data('bookmarksApiUrl')
+                    }
+                );
+                bookmarksCollection.bootstrap();
+                this.bookmarksListView = new BookmarksListView(
+                    {
+                        collection: bookmarksCollection,
+                        loadingMessageView: new MessageView({el: $(this.loadingMessageElement)}),
+                        errorMessageView: new MessageView({el: $(this.errorMessageElement)})
+                    }
+                );
             },
 
             toggleBookmarksListView: function () {

lms/static/js/spec/bookmarks/bookmark_button_view_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
-        'js/bookmarks/views/bookmark_button'
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers', 'js/bookmarks/views/bookmark_button'
        ],
     function (Backbone, $, _, AjaxHelpers, TemplateHelpers, BookmarkButtonView) {
         'use strict';

lms/static/js/spec/bookmarks/bookmarks_list_view_spec.js

-define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_helpers',
-        'js/common_helpers/template_helpers', 'js/bookmarks/views/bookmarks_list_button'
-       ],
-    function (Backbone, $, _, Logger, AjaxHelpers, TemplateHelpers, BookmarksListButtonView) {
+define(['backbone',
+        'jquery',
+        'underscore',
+        'logger',
+        'URI',
+        'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers',
+        'js/bookmarks/views/bookmarks_list_button',
+        'js/bookmarks/views/bookmarks_list',
+        'js/bookmarks/collections/bookmarks'],
+    function (Backbone, $, _, Logger, URI, AjaxHelpers, TemplateHelpers, BookmarksListButtonView, BookmarksListView,
+              BookmarksCollection) {
         'use strict';
 
         describe("lms.courseware.bookmarks", function () {
 
             var bookmarksButtonView;
-            var BOOKMARKS_API_URL = '/api/bookmarks/v1/bookmarks/';
 
             beforeEach(function () {
                 loadFixtures('js/fixtures/bookmarks/bookmarks.html');
                 TemplateHelpers.installTemplates(
                     [
                         'templates/message_view',
-                        'templates/bookmarks/bookmarks_list'
+                        'templates/bookmarks/bookmarks-list'
                     ]
                 );
                 spyOn(Logger, 'log').andReturn($.Deferred().resolve());
@@ -27,12 +34,23 @@ define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_he
                 bookmarksButtonView = new BookmarksListButtonView();
             });
 
-            var createBookmarksData = function (count) {
+            var verifyRequestParams = function (requests, params) {
+                var urlParams = (new URI(requests[requests.length - 1].url)).query(true);
+                _.each(params, function (value, key) {
+                    expect(urlParams[key]).toBe(value);
+                });
+            };
+
+            var createBookmarksData = function (options) {
                 var data = {
+                    count: options.count || 0,
+                    num_pages: options.num_pages || 1,
+                    current_page: options.current_page || 1,
+                    start: options.start || 0,
                     results: []
                 };
 
-                for(var i = 0; i < count; i++) {
+                for(var i = 0; i < options.numBookmarksToCreate; i++) {
                     var bookmarkInfo = {
                         id: i,
                         display_name: 'UNIT_DISPLAY_NAME_' + i,
@@ -87,6 +105,15 @@ define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_he
                 }
             };
 
+            var verifyPaginationInfo = function (requests, expectedData, currentPage, headerMessage) {
+                AjaxHelpers.respondWithJson(requests, expectedData);
+                verifyBookmarkedData(bookmarksButtonView.bookmarksListView, expectedData);
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-footer span.current-page').text().trim()).
+                    toBe(currentPage);
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-header span').text().trim()).
+                    toBe(headerMessage);
+            };
+
             it("has correct behavior for bookmarks button", function () {
                 var requests = AjaxHelpers.requests(this);
 
@@ -101,16 +128,16 @@ define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_he
                 expect(bookmarksButtonView.toggleBookmarksListView).toHaveBeenCalled();
                 expect(bookmarksButtonView.$('.bookmarks-list-button')).toHaveAttr('aria-pressed', 'true');
                 expect(bookmarksButtonView.$('.bookmarks-list-button')).toHaveClass('is-active');
-                AjaxHelpers.respondWithJson(requests, createBookmarksData(1));
+                AjaxHelpers.respondWithJson(requests, createBookmarksData({numBookmarksToCreate: 1}));
 
                 bookmarksButtonView.$('.bookmarks-list-button').click();
                 expect(bookmarksButtonView.$('.bookmarks-list-button')).toHaveAttr('aria-pressed', 'false');
                 expect(bookmarksButtonView.$('.bookmarks-list-button')).toHaveClass('is-inactive');
             });
 
-            it("has rendered empty bookmarks list correctly", function () {
+            it("can correctly render an empty bookmarks list", function () {
                 var requests = AjaxHelpers.requests(this);
-                var expectedData = createBookmarksData(0);
+                var expectedData = createBookmarksData({numBookmarksToCreate: 0});
 
                 bookmarksButtonView.$('.bookmarks-list-button').click();
                 AjaxHelpers.respondWithJson(requests, expectedData);
@@ -125,25 +152,128 @@ define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_he
 
                 expect(bookmarksButtonView.bookmarksListView.$('.bookmarks-empty-detail-title').text().trim()).
                     toBe(emptyListText);
+
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-header').length).toBe(0);
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-footer').length).toBe(0);
             });
 
             it("has rendered bookmarked list correctly", function () {
                 var requests = AjaxHelpers.requests(this);
-                var url = BOOKMARKS_API_URL + '?course_id=COURSE_ID&page_size=500&fields=display_name%2Cpath';
-                var expectedData = createBookmarksData(3);
+                var expectedData = createBookmarksData({numBookmarksToCreate: 3});
 
-                spyOn(bookmarksButtonView.bookmarksListView, 'courseId').andReturn('COURSE_ID');
                 bookmarksButtonView.$('.bookmarks-list-button').click();
                 expect($('#loading-message').text().trim()).
                     toBe(bookmarksButtonView.bookmarksListView.loadingMessage);
 
-                AjaxHelpers.expectRequest(requests, 'GET', url);
+                verifyRequestParams(
+                    requests,
+                    {course_id: 'a/b/c', fields: 'display_name,path', page: '1', page_size: '10'}
+                );
                 AjaxHelpers.respondWithJson(requests, expectedData);
 
                 expect(bookmarksButtonView.bookmarksListView.$('.bookmarks-results-header').text().trim()).
                     toBe('My Bookmarks');
 
                 verifyBookmarkedData(bookmarksButtonView.bookmarksListView, expectedData);
+
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-header').length).toBe(1);
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-footer').length).toBe(1);
+            });
+
+            it("calls bookmarks list render on page_changed event", function () {
+                var renderSpy = spyOn(BookmarksListView.prototype, 'render');
+                var listView = new BookmarksListView({collection: new BookmarksCollection({course_id: 'abc'})});
+                listView.collection.trigger('page_changed');
+                expect(renderSpy).toHaveBeenCalled();
+            });
+
+            it("can go to a page number", function () {
+                var requests = AjaxHelpers.requests(this);
+                var expectedData = createBookmarksData(
+                    {
+                        numBookmarksToCreate: 10,
+                        count: 12,
+                        num_pages: 2,
+                        current_page: 1,
+                        start: 0
+                    }
+                );
+
+                bookmarksButtonView.$('.bookmarks-list-button').click();
+                AjaxHelpers.respondWithJson(requests, expectedData);
+                verifyBookmarkedData(bookmarksButtonView.bookmarksListView, expectedData);
+
+                bookmarksButtonView.bookmarksListView.$('input#page-number-input').val('2');
+                bookmarksButtonView.bookmarksListView.$('input#page-number-input').trigger('change');
+
+                expectedData = createBookmarksData(
+                    {
+                        numBookmarksToCreate: 2,
+                        count: 12,
+                        num_pages: 2,
+                        current_page: 2,
+                        start: 10
+                    }
+                );
+                AjaxHelpers.respondWithJson(requests, expectedData);
+                verifyBookmarkedData(bookmarksButtonView.bookmarksListView, expectedData);
+
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-footer span.current-page').text().trim()).
+                    toBe('2');
+                expect(bookmarksButtonView.bookmarksListView.$('.paging-header span').text().trim()).
+                    toBe('Showing 11-12 out of 12 total');
+            });
+
+            it("can navigate forward and backward", function () {
+                var requests = AjaxHelpers.requests(this);
+                var expectedData = createBookmarksData(
+                    {
+                        numBookmarksToCreate: 10,
+                        count: 15,
+                        num_pages: 2,
+                        current_page: 1,
+                        start: 0
+                    }
+                );
+
+                bookmarksButtonView.$('.bookmarks-list-button').click();
+                verifyPaginationInfo(requests, expectedData, '1', 'Showing 1-10 out of 15 total');
+                verifyRequestParams(
+                    requests,
+                    {course_id: 'a/b/c', fields: 'display_name,path', page: '1', page_size: '10'}
+                );
+
+                bookmarksButtonView.bookmarksListView.$('.paging-footer .next-page-link').click();
+                expectedData = createBookmarksData(
+                    {
+                        numBookmarksToCreate: 5,
+                        count: 15,
+                        num_pages: 2,
+                        current_page: 2,
+                        start: 10
+                    }
+                );
+                verifyPaginationInfo(requests, expectedData, '2', 'Showing 11-15 out of 15 total');
+                verifyRequestParams(
+                    requests,
+                    {course_id: 'a/b/c', fields: 'display_name,path', page: '2', page_size: '10'}
+                );
+
+                expectedData = createBookmarksData(
+                    {
+                        numBookmarksToCreate: 10,
+                        count: 15,
+                        num_pages: 2,
+                        current_page: 1,
+                        start: 0
+                    }
+                );
+                bookmarksButtonView.bookmarksListView.$('.paging-footer .previous-page-link').click();
+                verifyPaginationInfo(requests, expectedData, '1', 'Showing 1-10 out of 15 total');
+                verifyRequestParams(
+                    requests,
+                    {course_id: 'a/b/c', fields: 'display_name,path', page: '1', page_size: '10'}
+                );
             });
 
             it("can navigate to correct url", function () {
@@ -151,7 +281,7 @@ define(['backbone', 'jquery', 'underscore', 'logger', 'js/common_helpers/ajax_he
                 spyOn(bookmarksButtonView.bookmarksListView, 'visitBookmark');
 
                 bookmarksButtonView.$('.bookmarks-list-button').click();
-                AjaxHelpers.respondWithJson(requests, createBookmarksData(1));
+                AjaxHelpers.respondWithJson(requests, createBookmarksData({numBookmarksToCreate: 1}));
 
                 bookmarksButtonView.bookmarksListView.$('.bookmarks-results-list-item').click();
                 var url = bookmarksButtonView.bookmarksListView.$('.bookmarks-results-list-item').attr('href');

lms/static/sass/views/_bookmarks.scss

@@ -57,7 +57,7 @@
 
 // Rules for Bookmarks Results
 .bookmarks-results-list {
-  padding-top: $baseline;
+  padding-top: ($baseline/2);
 
   .bookmarks-results-list-item {
     @include padding(($baseline/4), $baseline, ($baseline/2), $baseline);
@@ -181,3 +181,9 @@ i.bookmarked {
   @include icon-style("\f097", $black);
   @include hover-style($m-blue, $m-blue, "\f02e");
 }
+
+.paging-header {
+  .search-tools {
+    margin: 0;
+  }
+}
\ No newline at end of file

lms/templates/bookmarks/bookmarks_list.underscore → lms/templates/bookmarks/bookmarks-list.underscore

 <div id="my-bookmarks" class="sr-is-focusable" tabindex="-1"></div>
 <h2 class="bookmarks-results-header"><%= gettext("My Bookmarks") %></h2>
 
-<% if (bookmarks.length) { %>
+<% if (bookmarksCollection.length) { %>
+
+    <div class="paging-header"></div>
 
     <div class='bookmarks-results-list'>
-        <% _.each(bookmarks, function(bookmark, index) { %>
+        <% bookmarksCollection.each(function(bookmark, index) { %>
              <a class="bookmarks-results-list-item" href="<%= bookmark.blockUrl() %>" aria-labelledby="bookmark-link-<%= index %>" data-bookmark-id="<%= bookmark.get('id') %>" data-component-type="<%= bookmark.get('block_type') %>" data-usage-id="<%= bookmark.get('usage_id') %>" aria-describedby="bookmark-type-<%= index %> bookmark-date-<%= index %>">
                 <div class="list-item-content">
                     <div class="list-item-left-section">
@@ -21,6 +23,8 @@
         <% }); %>
     </div>
 
+    <div class="paging-footer"></div>
+
 <% } else {%>
 
     <div class="bookmarks-empty" tabindex="0">

lms/templates/courseware/courseware.html

@@ -53,7 +53,7 @@ ${page_title_breadcrumbs(course_name())}
   % endfor
 % endif
 
-% for template_name in ["bookmarks_list"]:
+% for template_name in ["bookmarks-list"]:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="bookmarks/${template_name}.underscore" />
 </script>