Support for tables that have no <th> tag present. (#128)

kyle-wannacott · Mar 15, 2024 · bc7d1e0 · bc7d1e0
1 parent b15fa79
commit bc7d1e0
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 33 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,24 +4,22 @@
 
   <body>
     <div id="display"></div>
-    <script src="../public//table-sort.js"></script>
+    <script type="text/javascript" src="./table-sort.js"></script>
 
     <h1>Manual testing of table sort js</h1>
     <table class="table-sort table-arrows">
-      <thead>
         <tr>
-          <th>Last Name</th>
-          <th>First Name</th>
-          <th class="order-by-desc">Birth Date</th>
-          <th>Employee ID</th>
-          <th>Department</th>
-          <th>Runtime</th>
-          <th class="onload-sort">File Size</th>
-          <th class="data-sort">data-sort days</th>
-          <th>dates in dd/mm/yyyy</th>
-          <th>file version</th>
+          <td>Last Name</td>
+          <td>First Name</td>
+          <td class="order-by-desc">Birth Date</td>
+          <td>Employee ID</td>
+          <td>Department</td>
+          <td>Runtime</td>
+          <td class="onload-sort">File Size</td>
+          <td class="data-sort">data-sort days</td>
+          <td>dates in dd/mm/yyyy</td>
+          <td>file version</td>
         </tr>
-      </thead>
       <tr class="table-row-1">
         <td>Franklin</td>
         <td>Benjamin</td>

diff --git a/public/table-sort.js b/public/table-sort.js
@@ -125,7 +125,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       headers: [],
     };
     for (let index of table.theads.keys()) {
-      table.headers.push(table.theads.item(index).querySelectorAll("th"));
+      if (table.theads.item(index).querySelectorAll("th").length == 0) {
+        table.headers.push(table.theads.item(index).querySelectorAll("td"));
+      } else {
+        table.headers.push(table.theads.item(index).querySelectorAll("th"));
+      }
     }
     for (let index of table.bodies.keys()) {
       if (table.bodies.item(index) == null) {

diff --git a/src/test-table.js b/src/test-table.js
@@ -12,8 +12,10 @@ export class App extends Component {
   };
 
   componentDidMount() {
+    console.log("mount");
     const script = document.createElement("script");
     script.src = "http://localhost:3000/table-sort-js/table-sort.js";
+    script.type = "application/javascript";
     script.async = true;
     document.body.appendChild(script);
 

diff --git a/test/missingTableTags.js b/test/missingTableTags.js
@@ -54,7 +54,7 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
     testTableTdRows.push(testTableTdRow);
   }
 
-  const tableWithMissingHeadTag = new JSDOM(`<!DOCTYPE html>
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
   <html>
     <head>
     </head>
@@ -69,10 +69,10 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
   </html>`);
 
   // Call tablesort and make table sortable and simulate click from a user.
-  tableSortJs((testing = true), tableWithMissingHeadTag.window.document);
-  tableWithMissingHeadTag.window.document.querySelector("table th").click();
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table th").click();
   // Make an array from table contents to test if sorted correctly.
-  let table = tableWithMissingHeadTag.window.document.querySelector("table");
+  let table = htmlTableInStringForm.window.document.querySelector("table");
   const tableBody = table.querySelector("tbody");
   const tableRows = [...tableBody.querySelectorAll("tr")];
   const testIfSortedList = tableRows.map(
@@ -92,7 +92,7 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
     testTableTdRows.push(testTableTdRow);
   }
 
-  const tablewithMissingBodyTag = new JSDOM(`<!DOCTYPE html>
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
   <html>
     <head>
     </head>
@@ -107,10 +107,10 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
   </html>`);
 
   // Call tablesort and make table sortable and simulate click from a user.
-  tableSortJs((testing = true), tablewithMissingBodyTag.window.document);
-  tablewithMissingBodyTag.window.document.querySelector("table th").click();
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table th").click();
   // Make an array from table contents to test if sorted correctly.
-  let table = tablewithMissingBodyTag.window.document.querySelector("table");
+  let table = htmlTableInStringForm.window.document.querySelector("table");
   const tableBody = table.querySelector("tbody");
   const tableRows = [...tableBody.querySelectorAll("tr")];
   const testIfSortedList = tableRows.map(
@@ -130,7 +130,7 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
     testTableTdRows.push(testTableTdRow);
   }
 
-  const tableWithMissingBodyAndHeadTag = new JSDOM(`<!DOCTYPE html>
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
   <html>
     <head>
     </head>
@@ -143,13 +143,134 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
   </html>`);
 
   // Call tablesort and make table sortable and simulate click from a user.
-  tableSortJs((testing = true), tableWithMissingBodyAndHeadTag.window.document);
-  tableWithMissingBodyAndHeadTag.window.document
-    .querySelector("table th")
-    .click();
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table th").click();
   // Make an array from table contents to test if sorted correctly.
-  let table =
-    tableWithMissingBodyAndHeadTag.window.document.querySelector("table");
+  let table = htmlTableInStringForm.window.document.querySelector("table");
+  const tableBody = table.querySelector("tbody");
+  const tableRows = [...tableBody.querySelectorAll("tr")];
+  const testIfSortedList = tableRows.map(
+    (tr) => tr.querySelectorAll("td").item(0).innerHTML
+  );
+  return testIfSortedList;
+}
+
+// no th tags only td tags!
+function createTestTableTDNoTHMissingHeadAndBody(
+  testTableData,
+  classTags = ""
+) {
+  let getClassTagsForTH = [];
+  // use td instead of th
+  let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
+  getClassTagsForTH.push(testTableThRow);
+
+  let testTableTdRows = [];
+  for (let i = 0; i < testTableData.length; i++) {
+    let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
+    testTableTdRows.push(testTableTdRow);
+  }
+
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
+  <html>
+    <head>
+    </head>
+    <body>
+      <table class="table-sort">
+    ${getClassTagsForTH}
+    ${testTableTdRows}
+  </table> 
+  </body>
+  </html>`);
+
+  // Call tablesort and make table sortable and simulate click from a user.
+  // click on the td instead of th
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table td").click();
+  // Make an array from table contents to test if sorted correctly.
+  let table = htmlTableInStringForm.window.document.querySelector("table");
+  const tableBody = table.querySelector("tbody");
+  const tableRows = [...tableBody.querySelectorAll("tr")];
+  const testIfSortedList = tableRows.map(
+    (tr) => tr.querySelectorAll("td").item(0).innerHTML
+  );
+  return testIfSortedList;
+}
+
+function createTestTableTDNoTHInsideBody(testTableData, classTags = "") {
+  let getClassTagsForTH = [];
+  // use td instead of th
+  let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
+  getClassTagsForTH.push(testTableThRow);
+
+  let testTableTdRows = [];
+  for (let i = 0; i < testTableData.length; i++) {
+    let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
+    testTableTdRows.push(testTableTdRow);
+  }
+
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
+  <html>
+    <head>
+    </head>
+    <body>
+      <table class="table-sort">
+      <tbody>
+    ${getClassTagsForTH}
+    ${testTableTdRows}
+      </tbody>
+  </table> 
+  </body>
+  </html>`);
+
+  // Call tablesort and make table sortable and simulate click from a user.
+  // click on the td instead of th
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table td").click();
+  // Make an array from table contents to test if sorted correctly.
+  let table = htmlTableInStringForm.window.document.querySelector("table");
+  const tableBody = table.querySelector("tbody");
+  const tableRows = [...tableBody.querySelectorAll("tr")];
+  const testIfSortedList = tableRows.map(
+    (tr) => tr.querySelectorAll("td").item(0).innerHTML
+  );
+  return testIfSortedList;
+}
+
+function createTestTableTDNoTHInsideHead(testTableData, classTags = "") {
+  let getClassTagsForTH = [];
+  // use td instead of th
+  let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
+  getClassTagsForTH.push(testTableThRow);
+
+  let testTableTdRows = [];
+  for (let i = 0; i < testTableData.length; i++) {
+    let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
+    testTableTdRows.push(testTableTdRow);
+  }
+
+  const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
+  <html>
+    <head>
+    </head>
+    <body>
+      <table class="table-sort">
+      <thead>
+    ${getClassTagsForTH}
+      <thead/>
+      <tbody>
+    ${testTableTdRows}
+      </tbody>
+  </table> 
+  </body>
+  </html>`);
+
+  // Call tablesort and make table sortable and simulate click from a user.
+  // click on the td instead of th
+  tableSortJs((testing = true), htmlTableInStringForm.window.document);
+  htmlTableInStringForm.window.document.querySelector("table td").click();
+  // Make an array from table contents to test if sorted correctly.
+  let table = htmlTableInStringForm.window.document.querySelector("table");
   const tableBody = table.querySelector("tbody");
   const tableRows = [...tableBody.querySelectorAll("tr")];
   const testIfSortedList = tableRows.map(
@@ -178,7 +299,7 @@ function createTestTableMultipleTBodies(
   let testTableTdRows = makeTdRows(testTableData);
   let testTableTdRows2 = makeTdRows(testTableData2);
   let testTableTdRows3 = makeTdRows(testTableData3);
-  const tableWithMultipleTableBodies = new JSDOM(`<!DOCTYPE html>
+  const HTMLtableWithMultipleTableBodies = new JSDOM(`<!DOCTYPE html>
   <html>
     <head>
     </head>
@@ -206,15 +327,20 @@ function createTestTableMultipleTBodies(
   </body>
   </html>`);
   // Call tablesort and make table sortable and simulate click from a user.
-  tableSortJs((testing = true), tableWithMultipleTableBodies.window.document);
+  tableSortJs(
+    (testing = true),
+    HTMLtableWithMultipleTableBodies.window.document
+  );
   const tableTH =
-    tableWithMultipleTableBodies.window.document.querySelectorAll("table th");
+    HTMLtableWithMultipleTableBodies.window.document.querySelectorAll(
+      "table th"
+    );
   for (let th of tableTH) {
     th.click();
   }
   // Make an array from table contents to test if sorted correctly.
   let table =
-    tableWithMultipleTableBodies.window.document.querySelector("table");
+    HTMLtableWithMultipleTableBodies.window.document.querySelector("table");
   const tableBodies = table.querySelectorAll("tbody");
   const tableHeads = table.querySelectorAll("thead");
 
@@ -239,4 +365,7 @@ module.exports = {
   createTestTableMissingBodyTag,
   createTestTableMissingBodyAndHeadTag,
   createTestTableMultipleTBodies,
+  createTestTableTDNoTHMissingHeadAndBody,
+  createTestTableTDNoTHInsideBody,
+  createTestTableTDNoTHInsideHead,
 };
diff --git a/test/missingTableTags.test.js b/test/missingTableTags.test.js
@@ -4,6 +4,9 @@ const {
   createTestTableMissingBodyAndHeadTag,
   createTestTableMissingBodyTag,
   createTestTableMultipleTBodies,
+  createTestTableTDNoTHMissingHeadAndBody,
+  createTestTableTDNoTHInsideBody,
+  createTestTableTDNoTHInsideHead,
 } = require("./missingTableTags");
 
 // toBe for primitives like strings, numbers or booleans for everything else use toEqual(object)
@@ -63,3 +66,39 @@ test("Multiple <tbody> tags", () => {
     ["Clarksons", "diddly", "farm", "Jeremy", "squat"],
   ]);
 });
+
+test("No <th> tags only <td> and missing <tbody> and <thead> tags", () => {
+  expect(
+    createTestTableTDNoTHMissingHeadAndBody([
+      "Echo",
+      "Bravo",
+      "Alpha",
+      "Delta",
+      "Charlie",
+    ])
+  ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});
+
+test("tNo <th> tags; use <td> inside tbody as <th>", () => {
+  expect(
+    createTestTableTDNoTHInsideBody([
+      "Bravo",
+      "Alpha",
+      "Echo",
+      "Delta",
+      "Charlie",
+    ])
+  ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});
+
+test("No <th> tags; use <td> inside thead as <th>", () => {
+  expect(
+    createTestTableTDNoTHInsideHead([
+      "Delta",
+      "Alpha",
+      "Charlie",
+      "Bravo",
+      "Echo",
+    ])
+  ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});