Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Ajout fonctionnalité permettant de classer les données via les colonnes + adaptation exemple et nouvelle compilation du code en JS

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-09-02 18:15:15 +02:00
parent 14608b8488
commit 4939153d89
11 changed files with 1015 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "freedatas2html",
"version": "0.3.4",
"version": "0.3.5",
"description": "Visualization of data from various sources (CSV, API, HTML...) with filters, classification, pagination, etc.",
"main": "index.js",
"scripts": {

765
public/JS/firstExample.app.js
View File

File diff suppressed because one or more lines are too long

1
public/index.html
View File

@ -19,6 +19,7 @@
</article>
<aside><p>Les données affichées viennent d'<a href="datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank">sur Wikipédia</a>.</p>
<p>La dernière colonne permet de montrer la possibilité d'<b>extraire des données d'une colonne ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule.<br>Ce choix de la virgule comme séparateur ne pose pas de problème, tant le fichier CSV est correctement conçu.<br>Elle ne doit par contre pas être présente dans les expressions à extraire de la colonne, sachant que l'on peut désigner n'importe quel autre caractère séparateur.</p>
<p>Toujours en option, certaines peuvent être désignées comme permettant de classer les données : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body>
</html>

3
src/build/firstExample.js
View File

@ -43,7 +43,8 @@ var initialise = function () { return __awaiter(void 0, void 0, void 0, function
_a.trys.push([0, 2, , 3]);
converter = new freeDatas2HTML();
converter.datasViewElt = { id: "datas" };
converter.datasSelectors = [{ datasFielNb: 3, id: "filtre1" }, { datasFielNb: 4, id: "filtre2" }];
converter.datasSelectors = [{ datasFieldNb: 3, id: "filtre1" }, { datasFieldNb: 4, id: "filtre2" }, { datasFieldNb: 5, id: "filtre3", separator: "," }];
converter.datasSortingColumns = [{ datasFieldNb: 0 }, { datasFieldNb: 1 }, { datasFieldNb: 2 }];
converter.datasSourceUrl = "http://localhost:8080/datas/elements-chimiques.csv";
return [4, converter.run()];
case 1:

116
src/build/freeDatas2HTML.js
View File

@ -36,11 +36,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
};
var Papa = require("papaparse");
var errors = require("./errors.js");
var compare = require('natural-orderby').compare;
var freeDatas2HTML = (function () {
function freeDatas2HTML() {
this._datasViewElt = { id: "", eltDOM: undefined };
this._datasSourceUrl = "";
this._datasSelectors = [];
this._datasSortingColumns = [];
this.parseMeta = undefined;
this.parseDatas = [];
this.parseErrors = [];
@ -81,10 +83,12 @@ var freeDatas2HTML = (function () {
checkContainerExist = document.getElementById(selectionElts[i].id);
if (checkContainerExist === null)
console.error(errors.elementNotFound + selectionElts[i].id);
else if (Number.isInteger(selectionElts[i].datasFielNb) === false || selectionElts[i].datasFielNb < 0)
else if (Number.isInteger(selectionElts[i].datasFieldNb) === false || selectionElts[i].datasFieldNb < 0)
console.error(errors.needNaturalNumber);
else {
selectionElts[i].eltDOM = checkContainerExist;
if (selectionElts[i].separator !== undefined && selectionElts[i].separator === "")
selectionElts[i].separator = undefined;
this._datasSelectors.push(selectionElts[i]);
}
}
@ -92,6 +96,24 @@ var freeDatas2HTML = (function () {
enumerable: true,
configurable: true
});
Object.defineProperty(freeDatas2HTML.prototype, "datasSortingColumns", {
get: function () {
return this._datasSortingColumns;
},
set: function (sortingColumns) {
this._datasSortingColumns = [];
for (var i = 0; i < sortingColumns.length; i++) {
if (Number.isInteger(sortingColumns[i].datasFieldNb) === false || sortingColumns[i].datasFieldNb < 0)
console.error(errors.needNaturalNumber);
else {
sortingColumns[i].order = undefined;
this._datasSortingColumns.push(sortingColumns[i]);
}
}
},
enumerable: true,
configurable: true
});
freeDatas2HTML.prototype.parse = function () {
return __awaiter(this, void 0, void 0, function () {
var converter;
@ -129,7 +151,7 @@ var freeDatas2HTML = (function () {
};
freeDatas2HTML.prototype.run = function () {
return __awaiter(this, void 0, void 0, function () {
var converter_1, selectorsHTML, i, values, colName, row, j, selectElement;
var converter_1, selectorsHTML, i, values, colName, row, checkedValue, checkedValues, i_1, checkedValue, j, selectElement, i;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
@ -146,21 +168,30 @@ var freeDatas2HTML = (function () {
console.error(this.parseErrors);
else {
converter_1 = this;
this.datasHTML = this.createDatasHTML(this.parseMeta.fields, this.parseDatas);
this._datasViewElt.eltDOM.innerHTML = this.datasHTML;
if (this._datasSelectors.length > 0) {
selectorsHTML = [];
for (i in this._datasSelectors) {
if (this._datasSelectors[i].datasFielNb > (this.parseMeta.fields.length - 1))
if (this._datasSelectors[i].datasFieldNb > (this.parseMeta.fields.length - 1))
throw new Error(errors.selectorFieldNotFound);
else {
values = [], colName = this.parseMeta.fields[this._datasSelectors[i].datasFielNb];
values = [], colName = this.parseMeta.fields[this._datasSelectors[i].datasFieldNb];
for (row in this.parseDatas) {
if (values.indexOf(this.parseDatas[row][colName].trim()) === -1)
values.push(this.parseDatas[row][colName].trim());
if (this._datasSelectors[i].separator === undefined) {
checkedValue = this.parseDatas[row][colName].trim();
if (checkedValue !== "" && values.indexOf(checkedValue) === -1)
values.push(checkedValue);
}
else {
checkedValues = this.parseDatas[row][colName].split(this._datasSelectors[i].separator);
for (i_1 in checkedValues) {
checkedValue = checkedValues[i_1].trim();
if (checkedValue !== "" && values.indexOf(checkedValue) === -1)
values.push(checkedValue);
}
}
}
if (values.length > 0) {
values.sort();
values.sort(compare());
this._datasSelectors[i].name = colName;
this._datasSelectors[i].values = values;
selectorsHTML[i] = "<label for='freeDatas2HTMLSelector" + i + "'>" + colName + " : </label><select name='freeDatas2HTMLSelector" + i + "' id='freeDatas2HTMLSelector" + i + "'><option value='0'>----</option>";
@ -171,12 +202,18 @@ var freeDatas2HTML = (function () {
selectElement = document.getElementById("freeDatas2HTMLSelector" + i);
selectElement.addEventListener('change', function (e) {
converter_1.datasHTML = converter_1.createDatasHTML(converter_1.parseMeta.fields, converter_1.parseDatas);
converter_1._datasViewElt.eltDOM.innerHTML = converter_1.datasHTML;
converter_1.refreshView();
});
}
}
}
}
for (i in this._datasSortingColumns) {
if (this._datasSortingColumns[i].datasFieldNb > (this.parseMeta.fields.length - 1))
throw new Error(errors.sortingColumnsFieldNotFound);
}
this.datasHTML = this.createDatasHTML(this.parseMeta.fields, this.parseDatas);
this.refreshView();
return [2, true];
}
return [2];
@ -184,12 +221,50 @@ var freeDatas2HTML = (function () {
});
});
};
freeDatas2HTML.prototype.refreshView = function () {
if (this._datasViewElt.eltDOM !== undefined) {
var converter_2 = this;
this._datasViewElt.eltDOM.innerHTML = this.datasHTML;
if (this._datasSortingColumns.length > 0) {
var getTableTh = document.querySelectorAll("table th");
if (getTableTh !== null) {
var _loop_1 = function (i) {
var datasFieldNb = this_1._datasSortingColumns[i].datasFieldNb;
var htmlContent = getTableTh[datasFieldNb].innerHTML;
htmlContent = "<a href='#freeDatas2HTMLSorting" + datasFieldNb + "' id='freeDatas2HTMLSorting" + datasFieldNb + "'>" + htmlContent + "</a>";
getTableTh[datasFieldNb].innerHTML = htmlContent;
var sortingElement = document.getElementById("freeDatas2HTMLSorting" + datasFieldNb);
sortingElement.addEventListener('click', function (e) {
e.preventDefault();
var order = converter_2.datasSortingColumns[i].order;
if (order === undefined || order === "desc")
converter_2.datasSortingColumns[i].order = "asc";
else
converter_2.datasSortingColumns[i].order = "desc";
converter_2._datasSortedColumn = converter_2.datasSortingColumns[i];
converter_2.datasHTML = converter_2.createDatasHTML(converter_2.parseMeta.fields, converter_2.parseDatas);
converter_2.refreshView();
});
};
var this_1 = this;
for (var i in this._datasSortingColumns) {
_loop_1(i);
}
}
}
}
};
freeDatas2HTML.prototype.createDatasHTML = function (fields, datas) {
var checkSelectorExist, filters = [];
for (var i in this._datasSelectors) {
checkSelectorExist = document.querySelector("#" + this._datasSelectors[i].id + " select");
if (checkSelectorExist != null && checkSelectorExist.value != "0")
filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values[checkSelectorExist.selectedIndex - 1] });
if (checkSelectorExist != null && checkSelectorExist.selectedIndex != 0)
filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values[checkSelectorExist.selectedIndex - 1], separator: this._datasSelectors[i].separator });
}
if (this._datasSortedColumn !== undefined) {
var col_1 = fields[this._datasSortedColumn.datasFieldNb];
var colOrder_1 = this._datasSortedColumn.order;
datas.sort(function (a, b) { return compare({ order: colOrder_1 })(a[col_1], b[col_1]); });
}
var datasHTML = "<table><thead>";
for (var i in fields)
@ -199,8 +274,21 @@ var freeDatas2HTML = (function () {
var visible = true;
if (filters.length !== 0) {
for (var i in filters) {
if (datas[row][filters[i].field].trim() != filters[i].value)
visible = false;
if (filters[i].separator === undefined) {
if (datas[row][filters[i].field].trim() != filters[i].value)
visible = false;
}
else {
var checkedValues = datas[row][filters[i].field].split(filters[i].separator), finded = false;
for (var j in checkedValues) {
if (checkedValues[j].trim() === filters[i].value) {
finded = true;
break;
}
}
if (!finded)
visible = false;
}
}
}
if (visible) {

1
src/errors.js
View File

@ -7,4 +7,5 @@ module.exports =
needUrl: "Merci de fournir une url valide pour le fichier CSV à parser.",
parserFail: "La lecture des données du fichier a échoué.",
selectorFieldNotFound: "Au moins une des colonnes devant servir à filtrer les données n'existe pas dans le fichier.",
sortingColumnsFieldNotFound: "Au moins une des colonnes devant servir à classer les données n'existe pas dans le fichier.",
};

1
src/firstExample.ts
View File

@ -7,6 +7,7 @@ const initialise = async () =>
let converter=new freeDatas2HTML();
converter.datasViewElt={ id:"datas" };
converter.datasSelectors=[{ datasFieldNb:3, id:"filtre1"}, { datasFieldNb:4, id:"filtre2"},{ datasFieldNb:5, id:"filtre3", separator:"," }];
converter.datasSortingColumns=[{ datasFieldNb:0 }, { datasFieldNb:1 },{ datasFieldNb:2 }];
converter.datasSourceUrl="http://localhost:8080/datas/elements-chimiques.csv";
await converter.run();
}

95
src/freeDatas2HTML.ts
View File

@ -3,13 +3,15 @@ const errors = require("./errors.js");
const { compare }= require('natural-orderby');
import { papaParseDatas, papaParseErrors, papaParseMeta } from "./papaParseInterfaces";
import { domElement, selectors } from "./freeDatas2HTMLInterfaces";
import { domElement, selectors, sortingColumns } from "./freeDatas2HTMLInterfaces";
export class freeDatas2HTML
{
private _datasViewElt: domElement = { id:"", eltDOM:undefined };
private _datasSourceUrl: string = "";
private _datasSelectors: selectors[] = [];
private _datasSortingColumns: sortingColumns[] = [];
private _datasSortedColumn : sortingColumns|undefined;
public parseMeta: papaParseMeta|undefined = undefined;
public parseDatas: papaParseDatas[] = [];
@ -46,7 +48,7 @@ export class freeDatas2HTML
checkContainerExist=document.getElementById(selectionElts[i].id);
if(checkContainerExist === null)
console.error(errors.elementNotFound+selectionElts[i].id);
else if(Number.isInteger( selectionElts[i].datasFieldNb) === false || selectionElts[i].datasFieldNb < 0)
else if(Number.isInteger(selectionElts[i].datasFieldNb) === false || selectionElts[i].datasFieldNb < 0)
console.error(errors.needNaturalNumber);
else
{
@ -57,12 +59,32 @@ export class freeDatas2HTML
}
}
}
get datasSelectors() : selectors[]
{
return this._datasSelectors;
}
set datasSortingColumns(sortingColumns: sortingColumns[])
{
this._datasSortingColumns=[];
for(let i = 0; i < sortingColumns.length; i++)
{
if(Number.isInteger(sortingColumns[i].datasFieldNb) === false || sortingColumns[i].datasFieldNb < 0)
console.error(errors.needNaturalNumber);
else
{
sortingColumns[i].order=undefined;
this._datasSortingColumns.push(sortingColumns[i]);
}
}
}
get datasSortingColumns() : sortingColumns[]
{
return this._datasSortingColumns;
}
public async parse(): Promise<any>
{
const converter=this;
@ -118,9 +140,7 @@ export class freeDatas2HTML
else
{
let converter=this;
// Affichage initial de toutes les données du fichier
this.datasHTML=this.createDatasHTML(this.parseMeta!.fields, this.parseDatas);
this._datasViewElt.eltDOM.innerHTML=this.datasHTML;
// Si demandé, création des listes permettant de filter les données
if(this._datasSelectors.length > 0)
{
@ -168,19 +188,67 @@ export class freeDatas2HTML
selectElement.addEventListener('change', function(e)
{
converter.datasHTML=converter.createDatasHTML(converter.parseMeta!.fields as string[], converter.parseDatas);
converter._datasViewElt.eltDOM!.innerHTML=converter.datasHTML;
converter.refreshView();
});
}
}
}
}
// Je teste aussi les colonnes devant servir à classer les données.
for(let i in this._datasSortingColumns)
{
if(this._datasSortingColumns[i].datasFieldNb > (this.parseMeta!.fields.length-1))
throw new Error(errors.sortingColumnsFieldNotFound);
}
// Si tout est ok, affichage initial de toutes les données du fichier
this.datasHTML=this.createDatasHTML(this.parseMeta!.fields, this.parseDatas);
this.refreshView();
return true;
}
}
private refreshView() : void
{
if(this._datasViewElt.eltDOM !== undefined)
{
const converter=this;
this._datasViewElt.eltDOM.innerHTML=this.datasHTML;
// Ici car il faut que la tableau soit déjà dans le DOM pour écouter les clics
if(this._datasSortingColumns.length > 0)
{
let getTableTh=document.querySelectorAll("table th");
if(getTableTh !== null)
{
for(let i in this._datasSortingColumns)
{
let datasFieldNb=this._datasSortingColumns[i].datasFieldNb;
let htmlContent=getTableTh[datasFieldNb].innerHTML;
htmlContent="<a href='#freeDatas2HTMLSorting"+datasFieldNb+"' id='freeDatas2HTMLSorting"+datasFieldNb+"'>"+htmlContent+"</a>";
getTableTh[datasFieldNb].innerHTML=htmlContent;
let sortingElement=document.getElementById("freeDatas2HTMLSorting"+datasFieldNb);
sortingElement!.addEventListener('click', function(e)
{
e.preventDefault();
let order=converter.datasSortingColumns[i].order ;
if(order === undefined || order === "desc")
converter.datasSortingColumns[i].order="asc";
else
converter.datasSortingColumns[i].order="desc";
converter._datasSortedColumn = converter.datasSortingColumns[i];
converter.datasHTML=converter.createDatasHTML(converter.parseMeta!.fields as string[], converter.parseDatas);
converter.refreshView();
});
}
}
}
}
}
private createDatasHTML(fields: string[], datas: any[]) : string
{
// Je vérifie si des valeurs ont été sélectionnées pour filter les données.
// Dois-je filtrer les données ?
let checkSelectorExist: HTMLSelectElement|null, filters: any[] = [];
for(let i in this._datasSelectors)
{
@ -189,6 +257,15 @@ export class freeDatas2HTML
if(checkSelectorExist != null && checkSelectorExist.selectedIndex != 0)
filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values![checkSelectorExist.selectedIndex-1], separator:this._datasSelectors[i].separator });
}
// Dois-je classer les données par rapport à une colonne ?
if(this._datasSortedColumn !== undefined)
{
const col=fields[this._datasSortedColumn.datasFieldNb];
const colOrder=this._datasSortedColumn.order;
datas.sort( (a, b) => compare( {order: colOrder} )(a[col], b[col]));
}
// Création du tableau de données :
let datasHTML="<table><thead>";
for (let i in fields)

5
src/freeDatas2HTMLInterfaces.ts
View File

@ -9,4 +9,9 @@ export interface selectors extends domElement
separator?: string;
name?: string;
values? : string[];
}
export interface sortingColumns
{
datasFieldNb: number;
order?: "asc"|"desc"|undefined;
}

4
tests/fixtures.js
View File

@ -9,4 +9,8 @@ module.exports =
datasHTMLFor2Select:'<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th>Symbole</th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th></tr></thead><tbody><tr><td>2</td><td>Hélium</td><td>He</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>10</td><td>Néon</td><td>Ne</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>18</td><td>Argon</td><td>Ar</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr></tbody></table>',
datasHTMLFor2SelectNone:'<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th>Symbole</th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th></tr></thead><tbody></tbody></table>',
datasHTMLForSelectTagsField:'<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th>Symbole</th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th><th>Étiquettes</th></tr></thead><tbody><tr><td>118</td><td>Oganesson</td><td>Og</td><td>Indéfinie</td><td>Inexistant</td><td>Exemple10</td></tr></tbody></table>',
sortingColumn1HTML: '<a href="#freeDatas2HTMLSorting0" id="freeDatas2HTMLSorting0">Z (numéro atomique)</a>',
sortingColumn2HTML: '<a href="#freeDatas2HTMLSorting2" id="freeDatas2HTMLSorting2">Symbole</a>',
datasHTMLFor2Select1Clic: '<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th><a href="#freeDatas2HTMLSorting2" id="freeDatas2HTMLSorting2">Symbole</a></th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th></tr></thead><tbody><tr><td>18</td><td>Argon</td><td>Ar</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>2</td><td>Hélium</td><td>He</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>10</td><td>Néon</td><td>Ne</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr></tbody></table>',
datasHTMLFor2Select2Clic: '<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th><a href="#freeDatas2HTMLSorting2" id="freeDatas2HTMLSorting2">Symbole</a></th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th></tr></thead><tbody><tr><td>10</td><td>Néon</td><td>Ne</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>2</td><td>Hélium</td><td>He</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr><tr><td>18</td><td>Argon</td><td>Ar</td><td>Gaz noble</td><td>&gt; 1 et &lt; 100 000</td></tr></tbody></table>',
}

65
tests/freeDatas2HTMLSpec.ts
View File

@ -50,6 +50,16 @@ describe("freeDatas2HTML", () =>
expect(converter.datasSelectors.length).toEqual(1);
expect(converter.datasSelectors[0].id).toEqual("selector1");
});
it("Ne doit accepter que les colonnes de classement pour lesquelles les numéros fournis sont des nombres naturels.", () =>
{
converter.datasSortingColumns=[{ datasFieldNb:2.3 },{ datasFieldNb:3 }];
expect(converter.datasSortingColumns.length).toEqual(1);
converter.datasSortingColumns=[{ datasFieldNb:2 },{ datasFieldNb:-1 }];
expect(converter.datasSortingColumns.length).toEqual(1);
converter.datasSortingColumns=[{ datasFieldNb:2 },{ datasFieldNb:3 }];
expect(converter.datasSortingColumns.length).toEqual(2);
});
it("Si un séparateur vide est fourni pour un sélecteur, il doit être ignoré.", () =>
{
@ -153,7 +163,7 @@ describe("freeDatas2HTML", () =>
expect(txtDatasViewsElt).toEqual(fixtures.datasHTML);
});
});
describe("Création et action des sélecteurs permettant de filter les données affichées.", () =>
{
beforeEach( () =>
@ -243,5 +253,56 @@ describe("freeDatas2HTML", () =>
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelectTagsField);
});
});
describe("Création et action des colonnes permettant de classer les données affichées.", () =>
{
beforeEach( () =>
{
converter.datasViewElt={ id:"datas" };
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
});
it("Doit générer une erreur si au moins un des numéros de colonne de classement fournis pour ne correspond pas à une des colonne du fichier.", async () =>
{
converter.datasSortingColumns=[{ datasFieldNb:0 },{ datasFieldNb:5 }];
await expectAsync(converter.run()).toBeRejectedWith(new Error(errors.sortingColumnsFieldNotFound));
});
it("Ne doit pas pas générer d'erreur si tous les numéros de colonne de classement fournis correspondent à des colonnes du fichier.", async () =>
{
converter.datasSortingColumns=[{ datasFieldNb:3 },{ datasFieldNb:4 }];
await expectAsync(converter.run()).not.toBeRejected();
});
it("Pour chaque colonne de classement demandée, doit générer un lien hypertexte dans l'entête de la colonne.", async () =>
{
converter.datasSortingColumns=[{ datasFieldNb:0 },{ datasFieldNb:2 }];
await converter.run();
let getTableTh=document.querySelectorAll("table th");
expect(getTableTh[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTableTh[2].innerHTML).toEqual(fixtures.sortingColumn2HTML);
});
it("Le 1er click sur l'entête d'une des colonnes doit classer les données dans le sens ascendant, puis descendant et ainsi de suite, en prenant en compte les éventuels filtres.", async () =>
{
converter.datasSelectors=[{ datasFieldNb:3, id:"selector1"},{ datasFieldNb:4, id:"selector2"}];
converter.datasSortingColumns=[{ datasFieldNb:2 }];
await converter.run();
let selectElement = document.getElementById("freeDatas2HTMLSelector0") as HTMLInputElement;
selectElement.value="2";
selectElement = document.getElementById("freeDatas2HTMLSelector1") as HTMLInputElement;
selectElement.value="1";
selectElement.dispatchEvent(new Event('change'));
let getTableThLink=document.querySelector("table th a") as HTMLElement;
getTableThLink.click();// tri ascendant
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select1Clic);
getTableThLink.click();// tri descendant
txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select2Clic);
getTableThLink.click();// de nouveau ascendant
txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select1Clic);
});
});
});