Skip to content

Commit d90afd9

Browse files
kyle-wannacottkyle-wannacott
committed
custom arrows working pt 2.
1 parent b24dec1 commit d90afd9

File tree

5 files changed

+155
-25
lines changed

5 files changed

+155
-25
lines changed

‎public/table-sort.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
140140
noClassInfer: sortableTable.classList.contains("no-class-infer"),
141141
cellsSort: sortableTable.classList.contains("cells-sort"),
142142
rememberSort: sortableTable.classList.contains("remember-sort"),
143-
// tableArrows: sortableTable.classList.contains("table-arrows"),
144-
tableArrows: Array.from(sortableTable.classList).filter((item) =>
145-
item.includes("table-arrows")
146-
),
147143
};
148144
for (
149145
let headerIndex = 0;
@@ -162,6 +158,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
162158
makeEachColumnSortable(
163159
th,
164160
headerIndex,
161+
sortableTable,
165162
columnIndex,
166163
table,
167164
columnIndexesClicked
@@ -305,6 +302,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
305302
isSortDates,
306303
desc,
307304
arrow,
305+
tableArrows,
308306
} = tableProperties;
309307
for (let [i, tr] of tableRows.entries()) {
310308
let tdTextContent = column.getColumn(
@@ -404,7 +402,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
404402
}
405403

406404
function changeArrowAndSort(arrowDirection, sortDirection) {
407-
if (table.hasClass.tableArrows) {
405+
if (tableArrows[0]) {
408406
clearArrows(arrow);
409407
th.insertAdjacentText("beforeend", arrowDirection);
410408
}
@@ -513,21 +511,26 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
513511
headerIndex,
514512
columnIndex,
515513
table,
514+
sortableTable,
516515
columnIndexesClicked
517516
) {
518517
const desc = th.classList.contains("order-by-desc");
519518
let fillValue = "!X!Y!Z!";
519+
520520
let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
521-
if (table.hasClass.tableArrows[0]) {
522-
if (table.hasClass.tableArrows[0].split("-").length > 2) {
523-
var customArrow = table.hasClass.tableArrows[0].split("-")[2];
521+
522+
// console.log(table.hasClass.tableArrows);
523+
524+
let tableArrows = Array.from(sortableTable.classList).filter((item) =>
525+
item.includes("table-arrows")
526+
);
527+
528+
if (tableArrows[0]) {
529+
if (tableArrows[0].split("-").length > 2) {
530+
var customArrow = tableArrows[0].split("-")[2];
524531
if (customArrow.length === 3) {
525-
console.log(table.hasClass.tableArrows[0].split("-"));
526-
[arrow.up, arrow.neutral, arrow.down] = [
527-
" " + customArrow[0],
528-
" " + customArrow[1],
529-
" " + customArrow[2],
530-
];
532+
console.log(tableArrows[0].split("-"));
533+
[arrow.up, arrow.neutral, arrow.down] = [...customArrow];
531534
}
532535
}
533536
th.insertAdjacentText("beforeend", arrow.neutral);

‎test/jest.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @returns {Promise<import('jest').Config>} */
2+
module.exports = async () => {
3+
return {
4+
verbose: true,
5+
};
6+
};

‎test/missingTableTags.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const jsdom = require("jsdom");
2-
const { JSDOM } = jsdom;
1+
// const jsdom = require("jsdom");
2+
// const { JSDOM } = jsdom;
33
require("iconv-lite").encodingExists("foo");
44
const tableSortJs = require("../public/table-sort");
55

@@ -26,7 +26,7 @@ function createTestTableNoMissingTags(testTableData, classTags = "") {
2626
<tbody>
2727
${testTableTdRows}
2828
</tbody>
29-
</table>
29+
</table>
3030
</body>
3131
</html>`);
3232

@@ -54,7 +54,7 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
5454
testTableTdRows.push(testTableTdRow);
5555
}
5656

57-
const htmlTableInStringForm = new JSDOM(`<!DOCTYPE html>
57+
const htmlTableInStringForm = JSDOM(`<!DOCTYPE html>
5858
<html>
5959
<head>
6060
</head>
@@ -64,7 +64,7 @@ function createTestTableMissingHeadTag(testTableData, classTags = "") {
6464
${getClassTagsForTH}
6565
${testTableTdRows}
6666
</tbody>
67-
</table>
67+
</table>
6868
</body>
6969
</html>`);
7070

@@ -102,7 +102,7 @@ function createTestTableMissingBodyTag(testTableData, classTags = "") {
102102
${getClassTagsForTH}
103103
</thead>
104104
${testTableTdRows}
105-
</table>
105+
</table>
106106
</body>
107107
</html>`);
108108

@@ -138,7 +138,7 @@ function createTestTableMissingBodyAndHeadTag(testTableData, classTags = "") {
138138
<table class="table-sort">
139139
${getClassTagsForTH}
140140
${testTableTdRows}
141-
</table>
141+
</table>
142142
</body>
143143
</html>`);
144144

@@ -179,7 +179,7 @@ function createTestTableTDNoTHMissingHeadAndBody(
179179
<table class="table-sort">
180180
${getClassTagsForTH}
181181
${testTableTdRows}
182-
</table>
182+
</table>
183183
</body>
184184
</html>`);
185185

@@ -219,7 +219,7 @@ function createTestTableTDNoTHInsideBody(testTableData, classTags = "") {
219219
${getClassTagsForTH}
220220
${testTableTdRows}
221221
</tbody>
222-
</table>
222+
</table>
223223
</body>
224224
</html>`);
225225

@@ -261,7 +261,7 @@ function createTestTableTDNoTHInsideHead(testTableData, classTags = "") {
261261
<tbody>
262262
${testTableTdRows}
263263
</tbody>
264-
</table>
264+
</table>
265265
</body>
266266
</html>`);
267267

@@ -323,7 +323,7 @@ function createTestTableMultipleTBodies(
323323
<tbody>
324324
${testTableTdRows3}
325325
</tbody>
326-
</table>
326+
</table>
327327
</body>
328328
</html>`);
329329
// Call tablesort and make table sortable and simulate click from a user.

‎test/tableArrows.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// TEST TABLE FOR CLASSES THAT ARE INFERRED FOR <TH>.
2+
const jsdom = require("jsdom");
3+
const { JSDOM } = jsdom;
4+
require("iconv-lite").encodingExists("foo");
5+
const tableSortJs = require("../public/table-sort");
6+
7+
function createTestTable(
8+
testTableData,
9+
thAttributes = { classTags: "", colspan: "" },
10+
props = { colsToClick: [], invisibleIndex: [], tableTags: "", trClasses: "" }
11+
) {
12+
const numberOfTableColumns = Object.keys(testTableData).length;
13+
let testTableHeaders = "";
14+
for (let i = 0; i < numberOfTableColumns; i++) {
15+
testTableHeaders += `<th colspan="${thAttributes.colspan}" class="${thAttributes.classTags}">Testing Column</th>`;
16+
}
17+
testTableHeaders = `<tr> ${testTableHeaders} </tr>`;
18+
19+
function getRowsOfTd(index, type) {
20+
let rowsOfTd = "";
21+
for (let key in testTableData) {
22+
if (testTableData[key].td) {
23+
if (type === "data-sort") {
24+
rowsOfTd += `<td data-sort="${index}">${testTableData[key].td[index]}</td>`;
25+
} else {
26+
rowsOfTd += `<td>${testTableData[key].td[index]}</td>`;
27+
}
28+
}
29+
}
30+
return rowsOfTd;
31+
}
32+
33+
let testTableTdRows = [];
34+
for (let i = 0; i < testTableData["col0"].td.length; i++) {
35+
let testTableTdRow;
36+
if (thAttributes.classTags.includes("data-sort")) {
37+
testTableTdRow = `${getRowsOfTd(i, "data-sort")}`;
38+
} else {
39+
testTableTdRow = `${getRowsOfTd(i)}`;
40+
}
41+
if (
42+
props.invisibleIndex !== undefined &&
43+
props.invisibleIndex.includes(i)
44+
) {
45+
testTableTdRows.push(`<tr style="display: none;">${testTableTdRow}</tr>`);
46+
} else {
47+
if (props.tableTags === "cells-sort" || props.tableTags === "tr-sort") {
48+
testTableTdRows.push(
49+
`<tr class="${props.trClasses}-${i}"> ${testTableTdRow}</tr>`
50+
);
51+
} else {
52+
testTableTdRows.push(
53+
`<tr class="${props.trClasses}"> ${testTableTdRow}</tr>`
54+
);
55+
}
56+
}
57+
}
58+
59+
const dom = new JSDOM(`<!DOCTYPE html>
60+
<html>
61+
<head>
62+
</head>
63+
<body>
64+
<table class="table-sort ${props.tableTags}">
65+
<thead>
66+
${testTableHeaders}
67+
</thead>
68+
<tbody>
69+
${testTableTdRows}
70+
</tbody>
71+
</table>
72+
</body>
73+
</html>`);
74+
75+
// if (
76+
// typeof props.colsToClick !== "undefined" &&
77+
// props.colsToClick.length > 0
78+
// ) {
79+
// for (let i = 0; i < props.colsToClick.length; i++) {
80+
// dom.window.document
81+
// .querySelectorAll("table th")
82+
// [props.colsToClick[i]].click();
83+
// }
84+
// } else {
85+
// for (let i = 0; i < numberOfTableColumns; i++) {
86+
// if (!thAttributes.classTags.includes("onload-sort")) {
87+
// dom.window.document.querySelectorAll("table th")[i].click();
88+
// }
89+
// }
90+
// }
91+
92+
// Call tablesort and make table sortable and simulate clicks from a user.
93+
tableSortJs(true, dom.window.document);
94+
// Make an array from table contents to test if sorted correctly.
95+
const table = dom.window.document.querySelector("table");
96+
const tableHeadWithInferredClassName = table.querySelectorAll("thead th");
97+
const thInnerHTMLs = Array.from(tableHeadWithInferredClassName).map(
98+
(e) => e.innerHTML
99+
);
100+
return Array.from(thInnerHTMLs);
101+
}
102+
103+
module.exports = createTestTable;

‎test/tableArrows.test.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const createTestTable = require("./tableArrows");
2+
3+
// toBe for primitives like strings, numbers or booleans for everything else use toEqual(object)
4+
5+
test("Alpha - Capitalized ", () => {
6+
expect(
7+
createTestTable(
8+
{
9+
col0: { td: ["charlie", "alpha", "beta"] },
10+
col1: { td: ["doris", "carrie", "fisher"] },
11+
},
12+
{
13+
colsToClick: [0],
14+
classTags: "table-arrows",
15+
}
16+
)
17+
).toStrictEqual({ col0: ["Alpha", "Bravo", "Charlie", "Delta", "Echo"] });
18+
});

0 commit comments

Comments
 (0)