7476 - update search fields/ranking

fixes Fix tests
MozillaFoundation · Oct 20, 2021 · cb460c9 · cb460c9
1 parent 145ad47
commit cb460c9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/network-api/networkapi/wagtailpages/tests.py b/network-api/networkapi/wagtailpages/tests.py
@@ -272,7 +272,7 @@ def test_category_filter_view(self):
         with self.settings(CACHES={'default': {'BACKEND': 'django.core.cache.backends.dummy.DummyCache'}}):
             response = self.client.get(url)
             self.assertEqual(response.status_code, 200)
-            self.assertEqual(len(response.context['products']), 0)
+            self.assertEqual(len(response.context['products']), 1)
 
             # Add BuyersGuideProductCategory
             category_orderable = ProductPageCategory(

diff --git a/source/js/buyers-guide/search.js b/source/js/buyers-guide/search.js
@@ -3,6 +3,7 @@ const NO_RESULTS_NOTICE = document.getElementById(
   `product-filter-no-results-notice`
 );
 const FILTERS = [`company`, `name`, `blurb`, `worst-case`];
+const SORTS = [`company`, `name`, `blurb`];
 const SUBMIT_PRODUCT = document.querySelector(".recommend-product");
 const CREEPINESS_FACE = document.querySelector(".creep-o-meter-information");
 
@@ -127,13 +128,47 @@ const SearchFilter = {
       }
     });
 
+    SearchFilter.sortProducts();
+
     SearchFilter.moveCreepyFace();
     SearchFilter.checkForEmptyNotice();
   },
 
+  sortProducts: () => {
+    const container = document.querySelector(`.product-box-list`);
+    const list = [...container.querySelectorAll(`.product-box`)];
+
+    list.sort((a, b) => {
+      for (field of SORTS) {
+        const qs = `.product-${field}`;
+        const [propertyA, propertyB] = [
+          a.querySelector(qs),
+          b.querySelector(qs),
+        ];
+        const [propertyNameA, propertyNameB] = [
+          (propertyA.value || propertyA.textContent).toLowerCase(),
+          (propertyB.value || propertyB.textContent).toLowerCase(),
+        ];
+
+        if (
+          propertyNameA !== propertyNameB ||
+          field === SORTS[SORTS.length - 1]
+        ) {
+          return propertyNameA < propertyNameB
+            ? -1
+            : propertyNameA > propertyNameB
+            ? 1
+            : 0;
+        }
+      }
+    });
+
+    list.forEach((p) => container.append(p));
+  },
+
   filterCategory: (category) => {
     ALL_PRODUCTS.forEach((product) => {
-      if (SearchFilter.testCateories(product, category)) {
+      if (SearchFilter.testCategories(product, category)) {
         product.classList.remove(`d-none`);
         product.classList.add(`d-flex`);
       } else {
@@ -142,6 +177,7 @@ const SearchFilter = {
       }
     });
 
+    SearchFilter.sortProducts();
     SearchFilter.moveCreepyFace();
     SearchFilter.checkForEmptyNotice();
   },
@@ -180,7 +216,7 @@ const SearchFilter = {
     return false;
   },
 
-  testCateories: (product, category) => {
+  testCategories: (product, category) => {
     if (category === "None") {
       return true;
     }