Fixed #32204 -- Added quick filter to admin's navigation sidebar.

2 files changed, 54 insertions, 0 deletions

diff --git a/js_tests/admin/navigation.test.js b/js_tests/admin/navigation.test.js
new file mode 100644
index 0000000000..262f08c9ae
--- /dev/null
+++ b/js_tests/admin/navigation.test.js
@@ -0,0 +1,24 @@
+/* global QUnit */
+'use strict';
+
+QUnit.module('admin.sidebar: filter', {
+    beforeEach: function() {
+        const $ = django.jQuery;
+        $('#qunit-fixture').append($('#nav-sidebar-filter').text());
+        this.navSidebar = $('#nav-sidebar');
+        this.navFilter = $('#nav-filter');
+        initSidebarQuickFilter();
+    }
+});
+
+QUnit.test('filter by a model name', function(assert) {
+    assert.equal(this.navSidebar.find('th[scope=row] a').length, 2);
+
+    this.navFilter.val('us'); // Matches 'users'.
+    this.navFilter[0].dispatchEvent(new Event('change'));
+    assert.equal(this.navSidebar.find('tr[class^="model-"]:visible').length, 1);
+
+    this.navFilter.val('nonexistent');
+    this.navFilter[0].dispatchEvent(new Event('change'));
+    assert.equal(this.navSidebar.find('tr[class^="model-"]:visible').length, 0);
+});
diff --git a/js_tests/tests.html b/js_tests/tests.html
index 72a6eb4fcb..61bc4ac102 100644
--- a/js_tests/tests.html
+++ b/js_tests/tests.html
@@ -83,6 +83,33 @@
             </div>
         </div>
     </script>
+    <script type="text/html" id="nav-sidebar-filter">
+      <nav class="sticky" id="nav-sidebar">
+        <input type="search" id="nav-filter"
+               placeholder="Start typing to filter..."
+               aria-label="Filter navigation items">
+        <div class="app-auth module current-app">
+          <table>
+            <caption>
+              <a href="/admin/auth/" class="section"
+                 title="Models in the Authentication and Authorization application">
+                    Authentication and Authorization
+              </a>
+            </caption>
+            <tbody>
+            <tr class="model-group">
+              <th scope="row"><a href="/admin/auth/group/">Groups</a></th>
+              <td><a href="/admin/auth/group/add/" class="addlink">Add</a></td>
+            </tr>
+            <tr class="model-user current-model">
+              <th scope="row"><a href="/admin/auth/user/" aria-current="page">Users</a></th>
+              <td><a href="/admin/auth/user/add/" class="addlink">Add</a></td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </nav>
+    </script>
 
     <script src="../node_modules/qunit/qunit/qunit.js"></script>
 
@@ -94,6 +121,9 @@
     <script src='../django/contrib/admin/static/admin/js/core.js' data-cover></script>
     <script src='./admin/core.test.js'></script>
 
+    <script src='../django/contrib/admin/static/admin/js/nav_sidebar.js' data-cover></script>
+    <script src='./admin/navigation.test.js'></script>
+
     <script src='../django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js' data-cover></script>
 
     <script src='./admin/DateTimeShortcuts.test.js'></script>