Skip to content

Commit bc7d1e0

Browse files
kyle-wannacottkyle-wannacott
authored
Support for tables that have no <th> tag present. (#128)
1 parent b15fa79 commit bc7d1e0

File tree

5 files changed

+205
-33
lines changed

5 files changed

+205
-33
lines changed

‎public/index.html‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,22 @@
44

55
<body>
66
<div id="display"></div>
7-
<script src="../public//table-sort.js"></script>
7+
<script type="text/javascript" src="./table-sort.js"></script>
88

99
<h1>Manual testing of table sort js</h1>
1010
<table class="table-sort table-arrows">
11-
<thead>
1211
<tr>
13-
<th>Last Name</th>
14-
<th>First Name</th>
15-
<th class="order-by-desc">Birth Date</th>
16-
<th>Employee ID</th>
17-
<th>Department</th>
18-
<th>Runtime</th>
19-
<th class="onload-sort">File Size</th>
20-
<th class="data-sort">data-sort days</th>
21-
<th>dates in dd/mm/yyyy</th>
22-
<th>file version</th>
12+
<td>Last Name</td>
13+
<td>First Name</td>
14+
<td class="order-by-desc">Birth Date</td>
15+
<td>Employee ID</td>
16+
<td>Department</td>
17+
<td>Runtime</td>
18+
<td class="onload-sort">File Size</td>
19+
<td class="data-sort">data-sort days</td>
20+
<td>dates in dd/mm/yyyy</td>
21+
<td>file version</td>
2322
</tr>
24-
</thead>
2523
<tr class="table-row-1">
2624
<td>Franklin</td>
2725
<td>Benjamin</td>

‎public/table-sort.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
125125
headers: [],
126126
};
127127
for (let index of table.theads.keys()) {
128-
table.headers.push(table.theads.item(index).querySelectorAll("th"));
128+
if (table.theads.item(index).querySelectorAll("th").length == 0) {
129+
table.headers.push(table.theads.item(index).querySelectorAll("td"));
130+
} else {
131+
table.headers.push(table.theads.item(index).querySelectorAll("th"));
132+
}
129133
}
130134
for (let index of table.bodies.keys()) {
131135
if (table.bodies.item(index) == null) {

‎src/test-table.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ export class App extends Component {
1212
};
1313

1414
componentDidMount() {
15+
console.log("mount");
1516
const script = document.createElement("script");
1617
script.src = "http://localhost:3000/table-sort-js/table-sort.js";
18+
script.type = "application/javascript";
1719
script.async = true;
1820
document.body.appendChild(script);
1921

‎test/missingTableTags.js‎

Lines changed: 148 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
5454
testTableTdRows.push(testTableTdRow);
5555
}
5656

57-
const tableWithMissingHeadTag = new JSDOM(`<!DOCTYPE html>
57+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
5858
<html>
5959
<head>
6060
</head>
@@ -69,10 +69,10 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
6969
</html>`);
7070

7171
// Call tablesort and make table sortable and simulate click from a user.
72-
tableSortJs((testing = true), tableWithMissingHeadTag.window.document);
73-
tableWithMissingHeadTag.window.document.querySelector("table th").click();
72+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
73+
htmlTableInStringForm.window.document.querySelector("table th").click();
7474
// Make an array from table contents to test if sorted correctly.
75-
let table = tableWithMissingHeadTag.window.document.querySelector("table");
75+
let table = htmlTableInStringForm.window.document.querySelector("table");
7676
const tableBody = table.querySelector("tbody");
7777
const tableRows = [...tableBody.querySelectorAll("tr")];
7878
const testIfSortedList = tableRows.map(
@@ -92,7 +92,7 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
9292
testTableTdRows.push(testTableTdRow);
9393
}
9494

95-
const tablewithMissingBodyTag = new JSDOM(`<!DOCTYPE html>
95+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
9696
<html>
9797
<head>
9898
</head>
@@ -107,10 +107,10 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
107107
</html>`);
108108

109109
// Call tablesort and make table sortable and simulate click from a user.
110-
tableSortJs((testing = true), tablewithMissingBodyTag.window.document);
111-
tablewithMissingBodyTag.window.document.querySelector("table th").click();
110+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
111+
htmlTableInStringForm.window.document.querySelector("table th").click();
112112
// Make an array from table contents to test if sorted correctly.
113-
let table = tablewithMissingBodyTag.window.document.querySelector("table");
113+
let table = htmlTableInStringForm.window.document.querySelector("table");
114114
const tableBody = table.querySelector("tbody");
115115
const tableRows = [...tableBody.querySelectorAll("tr")];
116116
const testIfSortedList = tableRows.map(
@@ -130,7 +130,7 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
130130
testTableTdRows.push(testTableTdRow);
131131
}
132132

133-
const tableWithMissingBodyAndHeadTag = new JSDOM(`<!DOCTYPE html>
133+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
134134
<html>
135135
<head>
136136
</head>
@@ -143,13 +143,134 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
143143
</html>`);
144144

145145
// Call tablesort and make table sortable and simulate click from a user.
146-
tableSortJs((testing = true), tableWithMissingBodyAndHeadTag.window.document);
147-
tableWithMissingBodyAndHeadTag.window.document
148-
.querySelector("table th")
149-
.click();
146+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
147+
htmlTableInStringForm.window.document.querySelector("table th").click();
150148
// Make an array from table contents to test if sorted correctly.
151-
let table =
152-
tableWithMissingBodyAndHeadTag.window.document.querySelector("table");
149+
let table = htmlTableInStringForm.window.document.querySelector("table");
150+
const tableBody = table.querySelector("tbody");
151+
const tableRows = [...tableBody.querySelectorAll("tr")];
152+
const testIfSortedList = tableRows.map(
153+
(tr) => tr.querySelectorAll("td").item(0).innerHTML
154+
);
155+
return testIfSortedList;
156+
}
157+
158+
// no th tags only td tags!
159+
function createTestTableTDNoTHMissingHeadAndBody(
160+
testTableData,
161+
classTags = ""
162+
) {
163+
let getClassTagsForTH = [];
164+
// use td instead of th
165+
let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
166+
getClassTagsForTH.push(testTableThRow);
167+
168+
let testTableTdRows = [];
169+
for (let i = 0; i < testTableData.length; i++) {
170+
let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
171+
testTableTdRows.push(testTableTdRow);
172+
}
173+
174+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
175+
<html>
176+
<head>
177+
</head>
178+
<body>
179+
<table class="table-sort">
180+
${getClassTagsForTH}
181+
${testTableTdRows}
182+
</table>
183+
</body>
184+
</html>`);
185+
186+
// Call tablesort and make table sortable and simulate click from a user.
187+
// click on the td instead of th
188+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
189+
htmlTableInStringForm.window.document.querySelector("table td").click();
190+
// Make an array from table contents to test if sorted correctly.
191+
let table = htmlTableInStringForm.window.document.querySelector("table");
192+
const tableBody = table.querySelector("tbody");
193+
const tableRows = [...tableBody.querySelectorAll("tr")];
194+
const testIfSortedList = tableRows.map(
195+
(tr) => tr.querySelectorAll("td").item(0).innerHTML
196+
);
197+
return testIfSortedList;
198+
}
199+
200+
function createTestTableTDNoTHInsideBody(testTableData, classTags = "") {
201+
let getClassTagsForTH = [];
202+
// use td instead of th
203+
let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
204+
getClassTagsForTH.push(testTableThRow);
205+
206+
let testTableTdRows = [];
207+
for (let i = 0; i < testTableData.length; i++) {
208+
let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
209+
testTableTdRows.push(testTableTdRow);
210+
}
211+
212+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
213+
<html>
214+
<head>
215+
</head>
216+
<body>
217+
<table class="table-sort">
218+
<tbody>
219+
${getClassTagsForTH}
220+
${testTableTdRows}
221+
</tbody>
222+
</table>
223+
</body>
224+
</html>`);
225+
226+
// Call tablesort and make table sortable and simulate click from a user.
227+
// click on the td instead of th
228+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
229+
htmlTableInStringForm.window.document.querySelector("table td").click();
230+
// Make an array from table contents to test if sorted correctly.
231+
let table = htmlTableInStringForm.window.document.querySelector("table");
232+
const tableBody = table.querySelector("tbody");
233+
const tableRows = [...tableBody.querySelectorAll("tr")];
234+
const testIfSortedList = tableRows.map(
235+
(tr) => tr.querySelectorAll("td").item(0).innerHTML
236+
);
237+
return testIfSortedList;
238+
}
239+
240+
function createTestTableTDNoTHInsideHead(testTableData, classTags = "") {
241+
let getClassTagsForTH = [];
242+
// use td instead of th
243+
let testTableThRow = `<tr><td class="${classTags}">Testing Column</td></tr>`;
244+
getClassTagsForTH.push(testTableThRow);
245+
246+
let testTableTdRows = [];
247+
for (let i = 0; i < testTableData.length; i++) {
248+
let testTableTdRow = `<tr><td>${testTableData[i]}</td></tr>`;
249+
testTableTdRows.push(testTableTdRow);
250+
}
251+
252+
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
253+
<html>
254+
<head>
255+
</head>
256+
<body>
257+
<table class="table-sort">
258+
<thead>
259+
${getClassTagsForTH}
260+
<thead/>
261+
<tbody>
262+
${testTableTdRows}
263+
</tbody>
264+
</table>
265+
</body>
266+
</html>`);
267+
268+
// Call tablesort and make table sortable and simulate click from a user.
269+
// click on the td instead of th
270+
tableSortJs((testing = true), htmlTableInStringForm.window.document);
271+
htmlTableInStringForm.window.document.querySelector("table td").click();
272+
// Make an array from table contents to test if sorted correctly.
273+
let table = htmlTableInStringForm.window.document.querySelector("table");
153274
const tableBody = table.querySelector("tbody");
154275
const tableRows = [...tableBody.querySelectorAll("tr")];
155276
const testIfSortedList = tableRows.map(
@@ -178,7 +299,7 @@ function createTestTableMultipleTBodies(
178299
let testTableTdRows = makeTdRows(testTableData);
179300
let testTableTdRows2 = makeTdRows(testTableData2);
180301
let testTableTdRows3 = makeTdRows(testTableData3);
181-
const tableWithMultipleTableBodies = new JSDOM(`<!DOCTYPE html>
302+
const HTMLtableWithMultipleTableBodies = new JSDOM(`<!DOCTYPE html>
182303
<html>
183304
<head>
184305
</head>
@@ -206,15 +327,20 @@ function createTestTableMultipleTBodies(
206327
</body>
207328
</html>`);
208329
// Call tablesort and make table sortable and simulate click from a user.
209-
tableSortJs((testing = true), tableWithMultipleTableBodies.window.document);
330+
tableSortJs(
331+
(testing = true),
332+
HTMLtableWithMultipleTableBodies.window.document
333+
);
210334
const tableTH =
211-
tableWithMultipleTableBodies.window.document.querySelectorAll("table th");
335+
HTMLtableWithMultipleTableBodies.window.document.querySelectorAll(
336+
"table th"
337+
);
212338
for (let th of tableTH) {
213339
th.click();
214340
}
215341
// Make an array from table contents to test if sorted correctly.
216342
let table =
217-
tableWithMultipleTableBodies.window.document.querySelector("table");
343+
HTMLtableWithMultipleTableBodies.window.document.querySelector("table");
218344
const tableBodies = table.querySelectorAll("tbody");
219345
const tableHeads = table.querySelectorAll("thead");
220346

@@ -239,4 +365,7 @@ module.exports = {
239365
createTestTableMissingBodyTag,
240366
createTestTableMissingBodyAndHeadTag,
241367
createTestTableMultipleTBodies,
368+
createTestTableTDNoTHMissingHeadAndBody,
369+
createTestTableTDNoTHInsideBody,
370+
createTestTableTDNoTHInsideHead,
242371
};

‎test/missingTableTags.test.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ const {
44
createTestTableMissingBodyAndHeadTag,
55
createTestTableMissingBodyTag,
66
createTestTableMultipleTBodies,
7+
createTestTableTDNoTHMissingHeadAndBody,
8+
createTestTableTDNoTHInsideBody,
9+
createTestTableTDNoTHInsideHead,
710
} = require("./missingTableTags");
811

912
// toBe for primitives like strings, numbers or booleans for everything else use toEqual(object)
@@ -63,3 +66,39 @@ test("Multiple <tbody> tags", () => {
6366
["Clarksons", "diddly", "farm", "Jeremy", "squat"],
6467
]);
6568
});
69+
70+
test("No <th> tags only <td> and missing <tbody> and <thead> tags", () => {
71+
expect(
72+
createTestTableTDNoTHMissingHeadAndBody([
73+
"Echo",
74+
"Bravo",
75+
"Alpha",
76+
"Delta",
77+
"Charlie",
78+
])
79+
).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
80+
});
81+
82+
test("tNo <th> tags; use <td> inside tbody as <th>", () => {
83+
expect(
84+
createTestTableTDNoTHInsideBody([
85+
"Bravo",
86+
"Alpha",
87+
"Echo",
88+
"Delta",
89+
"Charlie",
90+
])
91+
).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
92+
});
93+
94+
test("No <th> tags; use <td> inside thead as <th>", () => {
95+
expect(
96+
createTestTableTDNoTHInsideHead([
97+
"Delta",
98+
"Alpha",
99+
"Charlie",
100+
"Bravo",
101+
"Echo",
102+
])
103+
).toStrictEqual(["Alpha", "Bravo", "Charlie", "Delta", "Echo"]);
104+
});

0 commit comments

Comments
 (0)