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

- - - - - - - - - - - + + + + + + + + + + - 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 = ``; + getClassTagsForTH.push(testTableThRow); + + let testTableTdRows = []; + for (let i = 0; i < testTableData.length; i++) { + let testTableTdRow = ``; + testTableTdRows.push(testTableTdRow); + } + + const htmlTableInStringForm = new JSDOM(` + + + + +
Last NameFirst NameBirth DateEmployee IDDepartmentRuntimeFile Sizedata-sort daysdates in dd/mm/yyyyfile versionLast NameFirst NameBirth DateEmployee IDDepartmentRuntimeFile Sizedata-sort daysdates in dd/mm/yyyyfile version
Franklin Benjamin
Testing Column
${testTableData[i]}
+ ${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"]); +});