BugFix: Fix remember-sort class not working (#92)

* WIP : / * Fixed Remember-sort class and wrote some tests for it.
LeeWannacott · May 19, 2023 · aa92e45 · aa92e45
1 parent 227e899
commit aa92e45
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 14 deletions.
diff --git a/public/table-sort.js b/public/table-sort.js
@@ -109,6 +109,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     const tableHead = sortableTable.querySelector("thead");
     const tableHeadHeaders = tableHead.querySelectorAll("th");
     const tableRows = tableBody.querySelectorAll("tr");
+    let columnIndexesClicked = [];
 
     const isNoSortClassInference =
       sortableTable.classList.contains("no-class-infer");
@@ -119,12 +120,24 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         if (!isNoSortClassInference) {
           inferSortClasses(tableRows, columnIndex, th);
         }
-        makeEachColumnSortable(th, columnIndex, tableBody, sortableTable);
+        makeEachColumnSortable(
+          th,
+          columnIndex,
+          tableBody,
+          sortableTable,
+          columnIndexesClicked
+        );
       }
     }
   }
 
-  function makeEachColumnSortable(th, columnIndex, tableBody, sortableTable) {
+  function makeEachColumnSortable(
+    th,
+    columnIndex,
+    tableBody,
+    sortableTable,
+    columnIndexesClicked
+  ) {
     const desc = th.classList.contains("order-by-desc");
     let tableArrows = sortableTable.classList.contains("table-arrows");
     const [arrowUp, arrowDown] = [" ▲", " ▼"];
@@ -249,9 +262,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       }
     }
 
-    let [timesClickedColumn, columnIndexesClicked] = [0, []];
-
-    function rememberSort(timesClickedColumn, columnIndexesClicked) {
+    function rememberSort() {
       // if user clicked different column from first column reset times clicked.
       columnIndexesClicked.push(columnIndex);
       if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) {
@@ -260,10 +271,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         const secondLastColumnClicked =
           columnIndexesClicked[columnIndexesClicked.length - 2];
         if (lastColumnClicked !== secondLastColumnClicked) {
-          timesClickedColumn = 0;
           columnIndexesClicked.shift();
+          timesClickedColumn = 0;
         }
       }
+      return timesClickedColumn;
     }
 
     function getColSpanData(sortableTable, column) {
@@ -430,7 +442,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       }
     }
 
+    let timesClickedColumn = 0;
     th.addEventListener("click", function () {
+      const isRememberSort = sortableTable.classList.contains("remember-sort");
+      if (!isRememberSort) {
+        timesClickedColumn = rememberSort();
+      }
+
       timesClickedColumn += 1;
       const column = {
         // column used for sorting; better name?
@@ -439,15 +457,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         spanSum: {},
       };
 
+      getColSpanData(sortableTable, column);
+
       const visibleTableRows = Array.prototype.filter.call(
         tableBody.querySelectorAll("tr"),
         (tr) => {
           return tr.style.display !== "none";
         }
       );
 
-      getColSpanData(sortableTable, column);
-
       const isDataAttribute = th.classList.contains("data-sort");
       if (isDataAttribute) {
         sortDataAttributes(visibleTableRows, column);
@@ -477,11 +495,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         sortDates("dmy", visibleTableRows, column);
       }
 
-      const isRememberSort = sortableTable.classList.contains("remember-sort");
-      if (!isRememberSort) {
-        rememberSort(timesClickedColumn, columnIndexesClicked);
-      }
-
       const tableProperties = {
         tableRows: visibleTableRows,
         column,

diff --git a/test/order-by-desc.test.js b/test/order-by-desc.test.js
@@ -184,3 +184,45 @@ test("onload-sort: testing that it sorts without a click from user", () => {
     )
   ).toStrictEqual({ col0: ["5", "4", "3", "2", "1"] });
 });
+
+test("order-by-desc Remember-sort: Sorting cols without rememeber-sort class.", () => {
+  expect(
+    createTestTable(
+      {
+        col0: ["charlie", "alpha", "beta"],
+        col1: ["carrie", "doris", "fisher"],
+      },
+      {
+        classTags: "order-by-desc",
+      },
+      {
+        colsToClick: [0, 1, 0],
+        tableTags: "",
+      }
+    )
+  ).toStrictEqual({
+    col0: ["charlie", "beta", "alpha"],
+    col1: ["carrie", "fisher", "doris"],
+  });
+});
+
+test("order-by-desc Remember-sort: Sorting cols with rememeber-sort class.", () => {
+  expect(
+    createTestTable(
+      {
+        col0: ["charlie", "alpha", "beta"],
+        col1: ["carrie", "doris", "fisher"],
+      },
+      {
+        classTags: "order-by-desc",
+      },
+      {
+        colsToClick: [0, 1, 0],
+        tableTags: "remember-sort",
+      }
+    )
+  ).toStrictEqual({
+    col0: ["alpha", "beta", "charlie"],
+    col1: ["doris", "fisher", "carrie"],
+  });
+});
diff --git a/test/table.js b/test/table.js
@@ -53,7 +53,7 @@ function createTestTable(
     <head>
     </head>
     <body>
-      <table class="table-sort">
+      <table class="table-sort ${props.tableTags}">
       <thead>
       ${testTableHeaders}
       </thead>

diff --git a/test/table.test.js b/test/table.test.js
@@ -285,6 +285,69 @@ test("Clicking multiple times (>2) doesn't break sorting", () => {
   });
 });
 
+test("Sorting columns without rememeber-sort ", () => {
+  expect(
+    createTestTable(
+      {
+        col0: ["charlie", "alpha", "beta"],
+        col1: ["doris", "carrie", "fisher"],
+      },
+      {
+        classTags: "",
+      },
+      {
+        colsToClick: [0, 1, 0],
+        tableTags: "",
+      }
+    )
+  ).toStrictEqual({
+    col0: ["alpha", "beta", "charlie"],
+    col1: ["carrie", "fisher", "doris"],
+  });
+});
+
+test("Remember-sort: Sorting cols that have the rememeber-sort class.", () => {
+  expect(
+    createTestTable(
+      {
+        col0: ["charlie", "alpha", "beta"],
+        col1: ["doris", "carrie", "fisher"],
+      },
+      {
+        classTags: "",
+      },
+      {
+        colsToClick: [0, 1, 0],
+        tableTags: "remember-sort",
+      }
+    )
+  ).toStrictEqual({
+    col0: ["charlie", "beta", "alpha"],
+    col1: ["doris", "fisher", "carrie"],
+  });
+});
+
+test("Checking ", () => {
+  expect(
+    createTestTable(
+      {
+        col0: ["charlie", "alpha", "beta"],
+        col1: ["doris", "carrie", "fisher"],
+      },
+      {
+        classTags: "",
+      },
+      {
+        colsToClick: [0, 1, 0],
+        tableTags: "",
+      }
+    )
+  ).toStrictEqual({
+    col0: ["alpha", "beta", "charlie"],
+    col1: ["carrie", "fisher", "doris"],
+  });
+});
+
 test("runtime-sort", () => {
   expect(
     createTestTable(