diff --git a/public/index.html b/public/index.html
index 0bbd82a..1bb7799 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,24 +4,22 @@
-
+
Manual testing of table sort js
-
- Last Name |
- First Name |
- Birth Date |
- Employee ID |
- Department |
- Runtime |
- File Size |
- data-sort days |
- dates in dd/mm/yyyy |
- file version |
+ Last Name |
+ First Name |
+ Birth Date |
+ Employee ID |
+ Department |
+ Runtime |
+ File Size |
+ data-sort days |
+ dates in dd/mm/yyyy |
+ file version |
-
Franklin |
Benjamin |
diff --git a/public/table-sort.js b/public/table-sort.js
index 345a4bf..54aca82 100644
--- 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
index 9dd8342..bc5e09a 100644
--- 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
index 3b1d8e0..9531485 100644
--- a/test/missingTableTags.js
+++ b/test/missingTableTags.js
@@ -54,7 +54,7 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
testTableTdRows.push(testTableTdRow);
}
- const tableWithMissingHeadTag = new JSDOM(`
+ const htmlTableInStringForm = new JSDOM(`
@@ -69,10 +69,10 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
`);
// 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(`
+ const htmlTableInStringForm = new JSDOM(`
@@ -107,10 +107,10 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
`);
// 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(`
+ const htmlTableInStringForm = new JSDOM(`
@@ -143,13 +143,134 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
`);
// 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 = `
Testing Column |
`;
+ getClassTagsForTH.push(testTableThRow);
+
+ let testTableTdRows = [];
+ for (let i = 0; i < testTableData.length; i++) {
+ let testTableTdRow = `${testTableData[i]} |
`;
+ testTableTdRows.push(testTableTdRow);
+ }
+
+ const htmlTableInStringForm = new JSDOM(`
+
+
+
+
+
+ ${getClassTagsForTH}
+ ${testTableTdRows}
+
+
+ `);
+
+ // 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 = `Testing Column |
`;
+ getClassTagsForTH.push(testTableThRow);
+
+ let testTableTdRows = [];
+ for (let i = 0; i < testTableData.length; i++) {
+ let testTableTdRow = `${testTableData[i]} |
`;
+ testTableTdRows.push(testTableTdRow);
+ }
+
+ const htmlTableInStringForm = new JSDOM(`
+
+
+
+
+
+
+ ${getClassTagsForTH}
+ ${testTableTdRows}
+
+
+
+ `);
+
+ // 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 = `Testing Column |
`;
+ getClassTagsForTH.push(testTableThRow);
+
+ let testTableTdRows = [];
+ for (let i = 0; i < testTableData.length; i++) {
+ let testTableTdRow = `${testTableData[i]} |
`;
+ testTableTdRows.push(testTableTdRow);
+ }
+
+ const htmlTableInStringForm = new JSDOM(`
+
+
+
+
+
+
+ ${getClassTagsForTH}
+
+
+ ${testTableTdRows}
+
+
+
+ `);
+
+ // 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(`
+ const HTMLtableWithMultipleTableBodies = new JSDOM(`
@@ -206,15 +327,20 @@ function createTestTableMultipleTBodies(
`);
// 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
index b777317..b4ec3e3 100644
--- 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 tags", () => {
["Clarksons", "diddly", "farm", "Jeremy", "squat"],
]);
});
+
+test("No tags only | and missing | and tags", () => {
+ expect(
+ createTestTableTDNoTHMissingHeadAndBody([
+ "Echo",
+ "Bravo",
+ "Alpha",
+ "Delta",
+ "Charlie",
+ ])
+ ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});
+
+test("tNo tags; use | inside tbody as | ", () => {
+ expect(
+ createTestTableTDNoTHInsideBody([
+ "Bravo",
+ "Alpha",
+ "Echo",
+ "Delta",
+ "Charlie",
+ ])
+ ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});
+
+test("No | tags; use | inside thead as | ", () => {
+ expect(
+ createTestTableTDNoTHInsideHead([
+ "Delta",
+ "Alpha",
+ "Charlie",
+ "Bravo",
+ "Echo",
+ ])
+ ).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
+});
|