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

Création d'une classe dédiée aux colonnes permettant de classer les donnés + son script de tests.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-09-20 18:01:09 +02:00
parent 25222b306d
commit fd127c5081
6 changed files with 256 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/errors.js
View File

@ -11,8 +11,11 @@ module.exports =
parserFail: "La lecture des données du fichier a échoué.", parserFail: "La lecture des données du fichier a échoué.",
selector2HTMLFail: "Le création d'un filtre dans le DOM nécessite l'initialisation de l'élément HTML et du numéro du champs à filter.", selector2HTMLFail: "Le création d'un filtre dans le DOM nécessite l'initialisation de l'élément HTML et du numéro du champs à filter.",
selectorCheckIsOkFail: "Le test est lancé sur un filtre incorrectement initialisé ou sur un attribut absent de la donnée à tester.", selectorCheckIsOkFail: "Le test est lancé sur un filtre incorrectement initialisé ou sur un attribut absent de la donnée à tester.",
sortingColumnsFieldNotFound: "Au moins une des colonnes devant servir à classer les données n'existe pas dans le fichier.",
selectorFieldNotFound: "Au moins une des colonnes devant servir à filtrer les données n'existe pas dans le fichier.", selectorFieldNotFound: "Au moins une des colonnes devant servir à filtrer les données n'existe pas dans le fichier.",
selectorNeedDatas: "Le création d'un filtre nécessite la transmission des données à filtrer.", selectorNeedDatas: "Le création d'un filtre nécessite la transmission des données à filtrer.",
selectorSelectedIndexNotFound: "La valeur sélectionnée n'a pas été trouvée dans la liste des champs.", selectorSelectedIndexNotFound: "La valeur sélectionnée n'a pas été trouvée dans la liste des champs.",
sortingField2HTMLFail: "Toutes les donnée nécessaires à la création du lien de classement n'ont pas été fournies.",
sortingFieldNeedDatas: "Le création d'un champ de classement nécessite la transmission de la liste des champs.",
sortingFieldsNbFail: "Le nombre de champs trouvés dans le DOM ne correspond pas à celui des données à classer.",
sortingFieldsNotInHTML: "Les champs pouvant servir à classer les données n'ont pas été trouvés dans le DOM.",
}; };

100
src/freeDatas2HTML.ts
View File

@ -2,12 +2,12 @@ const Papa = require("papaparse");
const errors = require("./errors.js"); const errors = require("./errors.js");
const { compare }= require('natural-orderby'); const { compare }= require('natural-orderby');
import { DOMElement, Pagination, Selectors, SortingColumns, SortingFunctions } from "./freeDatas2HTMLInterfaces"; import { DOMElement, Pagination, Selectors, SortingFields, SortingFunctions } from "./freeDatas2HTMLInterfaces";
import { Selector } from "./freeDatas2HTMLSelector"; import { Selector } from "./freeDatas2HTMLSelector";
import { SortingField } from "./freeDatas2HTMLSortingField";
import { PapaParseDatas, PapaParseErrors, PapaParseMeta } from "./papaParseInterfaces"; import { PapaParseDatas, PapaParseErrors, PapaParseMeta } from "./papaParseInterfaces";
export { Selector } from "./freeDatas2HTMLSelector"; // pour pouvoir l'appeler du même fichier
export class FreeDatas2HTML export class FreeDatas2HTML
{ {
// L'élément HTML où doivent être affichées les données : // L'élément HTML où doivent être affichées les données :
@ -18,6 +18,9 @@ export class FreeDatas2HTML
// L'url où accéder aux données : // L'url où accéder aux données :
private _datasSourceUrl: string = ""; private _datasSourceUrl: string = "";
// Les fonctions spécifiques de classement pour certains champs :
private _datasSortingFunctions: SortingFunctions[] = [];
// Le nom des champs (interfaces à renommer, car PapaParse = cas particulier) : // Le nom des champs (interfaces à renommer, car PapaParse = cas particulier) :
public parseMetas: PapaParseMeta|undefined = undefined; public parseMetas: PapaParseMeta|undefined = undefined;
// Les données à proprement parler : // Les données à proprement parler :
@ -30,12 +33,11 @@ export class FreeDatas2HTML
// Les filtres possible sur certains champs // Les filtres possible sur certains champs
datasSelectors: Selectors[] = []; datasSelectors: Selectors[] = [];
// Les champs pouvant être classés : // Les champs pouvant être classés
private _datasSortingColumns: SortingColumns[] = []; datasSortingFields: SortingFields[] = [];
// La dernier champ pour lequel le classement a été demandé (prévoir une valeur par défaut ?) // La dernier champ pour lequel le classement a été demandé
private _datasSortedColumn: SortingColumns|undefined; datasSortedField: SortingFields|undefined;
// Les fonctions spécifiques de classement pour certains champs :
private _datasSortingFunctions: SortingFunctions[] = [];
// La Pagination : // La Pagination :
private _Pagination: Pagination|undefined; private _Pagination: Pagination|undefined;
@ -72,29 +74,6 @@ export class FreeDatas2HTML
this._datasSourceUrl=url.trim(); this._datasSourceUrl=url.trim();
} }
// Vérifie que les numéros de champs devant permettre le classement sont cohérents
// Initialise le sens de classement à undefined
set datasSortingColumns(SortingColumns: SortingColumns[])
{
this._datasSortingColumns=[];
for(let i = 0; i < SortingColumns.length; i++)
{
if(FreeDatas2HTML.isNaturalNumber(SortingColumns[i].datasFieldNb) === false)
console.error(errors.needNaturalNumber);
else
{
SortingColumns[i].order=undefined;
this._datasSortingColumns.push(SortingColumns[i]);
}
}
}
// Retourne la liste des champs pouvant être classés
get datasSortingColumns() : SortingColumns[]
{
return this._datasSortingColumns;
}
// Vérifie que les numéros de champs pour lesquels il y a des fonctions de classement spécifiques sont cohérents // Vérifie que les numéros de champs pour lesquels il y a des fonctions de classement spécifiques sont cohérents
set datasSortingFunctions(SortingFunctions: SortingFunctions[]) set datasSortingFunctions(SortingFunctions: SortingFunctions[])
{ {
@ -108,7 +87,7 @@ export class FreeDatas2HTML
} }
} }
// Retourne la fonction spécifique de classement associée à un champ // Retourne l'éventuelle fonction spécifique de classement associée à un champ
public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined
{ {
for(let i in this._datasSortingFunctions) for(let i in this._datasSortingFunctions)
@ -272,13 +251,6 @@ export class FreeDatas2HTML
}); });
} }
// On teste aussi l'existence des champs devant servir à classer les données :
for(let i in this._datasSortingColumns)
{
if(this._datasSortingColumns[i].datasFieldNb > (this.parseMetas!.fields.length-1))
throw new Error(errors.sortingColumnsFieldNotFound);
}
// Si tout est ok, affichage initial de toutes les données du fichier // Si tout est ok, affichage initial de toutes les données du fichier
this.datasHTML=this.createDatasHTML(this.parseMetas!.fields, this.parseDatas); this.datasHTML=this.createDatasHTML(this.parseMetas!.fields, this.parseDatas);
this.refreshView(); this.refreshView();
@ -292,33 +264,13 @@ export class FreeDatas2HTML
{ {
const converter=this; const converter=this;
this._datasViewElt.eltDOM.innerHTML=this.datasHTML; this._datasViewElt.eltDOM.innerHTML=this.datasHTML;
// Ici, car il faut que le tableau soit déjà dans le DOM pour "mettre sous écoute" les clics // On réactive les éventuelles colonnes de classement
// Pour éviter ce problème afficher séparément les "têtes de colonnes" qui ne bougent plus, des données qui peuvent être filtrées, paginées, etc. ? if(this.datasSortingFields.length > 0)
if(this._datasSortingColumns.length > 0)
{ {
let getTableTh=document.getElementsByTagName("th"); for(let i in this.datasSortingFields)
if(getTableTh !== null)
{ {
for(let i in this._datasSortingColumns) let field=this.datasSortingFields[i];
{ field.field2HTML();
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.parseMetas!.fields as string[], converter.parseDatas);
converter.refreshView();
});
}
} }
} }
} }
@ -326,19 +278,19 @@ export class FreeDatas2HTML
createDatasHTML(fields: string[], datas: any[]) : string createDatasHTML(fields: string[], datas: any[]) : string
{ {
// Dois-je classer les données par rapport à une colonne ? // Dois-je classer les données par rapport à un champ ?
if(this._datasSortedColumn !== undefined) if(this.datasSortedField !== undefined && this.datasSortedField.datasFieldNb !==undefined)
{ {
const col=fields[this._datasSortedColumn.datasFieldNb]; const field=fields[this.datasSortedField.datasFieldNb];
const colOrder=this._datasSortedColumn.order; const fieldOrder=this.datasSortedField.order;
// Une fonction spécifique de classement a-t-elle été définie ? // Une fonction spécifique de classement a-t-elle été définie ?
if(this.getSortingFunctionForField(this._datasSortedColumn.datasFieldNb) !== undefined) if(this.getSortingFunctionForField(this.datasSortedField.datasFieldNb) !== undefined)
{ {
let myFunction=this.getSortingFunctionForField(this._datasSortedColumn.datasFieldNb); let myFunction=this.getSortingFunctionForField(this.datasSortedField.datasFieldNb);
datas.sort( (a, b) => { return myFunction!.sort(a[col], b[col], colOrder); }); datas.sort( (a, b) => { return myFunction!.sort(a[field], b[field], fieldOrder); });
} }
else else
datas.sort( (a, b) => compare( {order: colOrder} )(a[col], b[col])); datas.sort( (a, b) => compare( {order: fieldOrder} )(a[field], b[field]));
} }
// Dois-je prendre en compte une Pagination ? // Dois-je prendre en compte une Pagination ?
@ -414,3 +366,7 @@ export class FreeDatas2HTML
return datasHTML; return datasHTML;
} }
} }
// Permet l'appel des dépendances via un seul script
export { Selector } from "./freeDatas2HTMLSelector";
export { SortingField } from "./freeDatas2HTMLSortingField";

5
src/freeDatas2HTMLInterfaces.ts
View File

@ -13,10 +13,11 @@ export interface Selectors
selector2HTML() : void; selector2HTML() : void;
dataIsOk(data: any) : boolean; dataIsOk(data: any) : boolean;
} }
export interface SortingColumns export interface SortingFields
{ {
datasFieldNb: number; datasFieldNb: number|undefined;
order?: "asc"|"desc"|undefined; order?: "asc"|"desc"|undefined;
field2HTML() : void;
} }
export interface SortingFunctions export interface SortingFunctions
{ {

81
src/freeDatas2HTMLSortingField.ts Normal file
View File

@ -0,0 +1,81 @@
const { compare }= require('natural-orderby');
const errors = require("./errors.js");
import { SortingFields } from "./freeDatas2HTMLInterfaces";
import { FreeDatas2HTML } from "./freeDatas2HTML";
export class SortingField implements SortingFields
{
_converter: FreeDatas2HTML;
_fieldsDOMSelector: string;
_datasFieldNb: number|undefined; // numéro du champ dont les données serviront au filtre
_order: "asc"|"desc"|undefined = undefined;
// Injection de la classe principale, mais uniquement si le nom des champs ont été importés et affichés correctement
constructor(converter: FreeDatas2HTML, fieldsDOMSelector: string = "th")
{
if(converter.parseMetas === undefined || converter.parseMetas.fields === undefined)
throw new Error(errors.sortingFieldNeedDatas);
else
{
const fields=document.querySelectorAll(fieldsDOMSelector);
if(fields === undefined)
throw new Error(errors.sortingFieldsNotInHTML);
else if(fields.length !== converter.parseMetas.fields.length)
throw new Error(errors.sortingFieldsNbFail);
else
{
this._converter=converter;
this._fieldsDOMSelector= fieldsDOMSelector;
}
}
}
// Vérifie que le numéro de champ existe dans les données reçues
// On pourrait tester que l'élément HTML contient un noeud de type textuel avec nodeType
// Mais on peut créer un lien sur une image, un span, etc.
set datasFieldNb(datasFieldNb: number|undefined)
{
if(datasFieldNb !== undefined && this._converter.parseMetas!.fields![datasFieldNb] === undefined)
throw new Error(errors.sortingFieldFieldNotFound);
else
this._datasFieldNb=datasFieldNb;
}
get datasFieldNb() : number|undefined
{
return this._datasFieldNb;
}
get order() : "asc"|"desc"|undefined
{
return this._order;
}
// Création du lien dans le HTML correspondant au champ de classement
public field2HTML() : void
{
if(this._converter === undefined || this._fieldsDOMSelector === "" || this._datasFieldNb === undefined)
throw new Error(errors.sortingField2HTMLFail);
else
{
const fields=document.querySelectorAll(this._fieldsDOMSelector);
let htmlContent=fields[this._datasFieldNb].innerHTML;
htmlContent="<a href='#freeDatas2HTMLSorting"+this._datasFieldNb+"' id='freeDatas2HTMLSorting"+this._datasFieldNb+"'>"+htmlContent+"</a>";
fields[this._datasFieldNb].innerHTML=htmlContent;
const sortingElement=document.getElementById("freeDatas2HTMLSorting"+this._datasFieldNb), field=this;
sortingElement!.addEventListener("click", function(e) // je sais que sortingElement existe, car je viens de le créer !
{
e.preventDefault();
let order=field._order ;
if(order === undefined || order === "desc")
field._order="asc";
else
field._order="desc";
field._converter.datasSortedField = field;
field._converter.datasHTML=field._converter.createDatasHTML(field._converter.parseMetas!.fields as string[], field._converter.parseDatas);
field._converter.refreshView();
});
}
}
}

55
tests/freeDatas2HTMLSpec.ts
View File

@ -2,7 +2,7 @@ import { FreeDatas2HTML, Selector } from "../src/freeDatas2HTML";
const errors=require("../src/errors.js"); const errors=require("../src/errors.js");
const fixtures=require("./fixtures.js"); const fixtures=require("./fixtures.js");
describe("Test du script central de FreeDatas2HTML", () => xdescribe("Test du script central de FreeDatas2HTML", () =>
{ {
let converter: FreeDatas2HTML; let converter: FreeDatas2HTML;
@ -211,59 +211,6 @@ describe("Test du script central de FreeDatas2HTML", () =>
}); });
}); });
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 le classement 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 getTableTr=document.querySelectorAll("table th");
expect(getTableTr[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTableTr[2].innerHTML).toEqual(fixtures.sortingColumn2HTML);
});
/* Désactivation des tests liés aux filtres avant mises à jour
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 getTableTrLink=document.querySelector("table th a") as HTMLElement;
getTableTrLink.click();// tri ascendant
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select1Clic);
getTableTrLink.click();// tri descendant
txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select2Clic);
getTableTrLink.click();// de nouveau ascendant
txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select1Clic);
});*/
});
describe("Création et action des options permettant de paginer les données affichées.", () => describe("Création et action des options permettant de paginer les données affichées.", () =>
{ {
beforeEach( () => beforeEach( () =>

137
tests/sortingFieldSpec.ts Normal file
View File

@ -0,0 +1,137 @@
import { FreeDatas2HTML, Selector, SortingField } from "../src/freeDatas2HTML";
const errors=require("../src/errors.js");
const fixtures=require("./fixtures.js");
describe("Test des champs de classement.", () =>
{
let converter: FreeDatas2HTML;
let sortingField: SortingField;
beforeEach( async () =>
{
document.body.insertAdjacentHTML("afterbegin", fixtures.datasViewEltHTML);
converter=new FreeDatas2HTML();
converter.datasViewElt={ id:"datas" };
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
await converter.run();
sortingField=new SortingField(converter);
});
afterEach( () =>
{
document.body.removeChild(document.getElementById("fixture"));
});
describe("Test des données reçues pour configurer le champ de classement.", () =>
{
it("Doit générer une erreur, si initialisé sans fournir la liste des champs servant à classer les données.", () =>
{
converter=new FreeDatas2HTML();
expect(() => { return new SortingField(converter); }).toThrowError(errors.sortingFieldNeedDatas);
});
it("Doit générer une erreur, si initialisé sans élements HTML textuels dans la page servant d'entêtes aux données.", () =>
{
expect(() => { return new SortingField(converter, "th.cols"); }).toThrowError(errors.sortingsFieldNotInHTML);
});
it("Doit générer une erreur, si le nombre d'éléments du DOM devant servir d'entêtes est différent du nombre de champs des données.", () =>
{
expect(() => { return new SortingField(converter, "td"); }).toThrowError(errors.sortingFieldsNbFail);
});
it("Ne doit pas générer d'erreur, si initialisé avec des données correctes.", () =>
{
expect(() => { return new SortingField(converter, "th"); }).not.toThrowError();
expect(() => { return new SortingField(converter); }).not.toThrowError();
});
it("Doit générer une erreur, si le numéro du champ de classement n'existe pas dans les données.", () =>
{
expect(() => { return sortingField.datasFieldNb=9; }).toThrowError(errors.sortingFieldFieldNotFound);
expect(() => { return sortingField.datasFieldNb=-1; }).toThrowError(errors.sortingFieldFieldNotFound);
expect(() => { return sortingField.datasFieldNb=1.1; }).toThrowError(errors.sortingFieldFieldNotFound);
});
it("Si le numéro de champ fourni est valide, il doit être accepté.", () =>
{
expect(() => { return sortingField.datasFieldNb=1; }).not.toThrowError();
sortingField.datasFieldNb=1;
expect(sortingField.datasFieldNb).toEqual(1);
});
});
describe("Création et action des liens permettant de classer les données affichées.", () =>
{
it("Doit générer un élement lien <a> avec comme ancre l'élément HTML correspondant au nom de la colonne.", () =>
{
sortingField.datasFieldNb=0;
sortingField.field2HTML();
let sortingField2=new SortingField(converter);
sortingField2.datasFieldNb=2;
sortingField2.field2HTML();
let getTH=document.getElementsByTagName("th");
expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTH[2].innerHTML).toEqual(fixtures.sortingColumn2HTML);
});
});
describe("Action des colonnes de classement en corrélation avec le convertiseur.", () =>
{
it("Le 1er clic sur l'entête d'une des colonnes doit classer les données dans le sens ascendant, puis descendant et ainsi de suite.", async () =>
{
sortingField.datasFieldNb=2;
sortingField.field2HTML();
converter.datasSortingFields=[sortingField];
let getTHLink=document.querySelector("th a") as HTMLElement;
getTHLink.click();// tri ascendant
let getTR=document.querySelectorAll("tr");
let txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>89</td><td>Actinium</td><td>Ac</td><td>Actinide</td><td>≤ 1</td>");
getTHLink.click();// tri descendant
getTR=document.querySelectorAll("tr");
txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>40</td><td>Zirconium</td><td>Zr</td><td>Métal de transition</td><td>&gt; 100000</td>");
getTHLink.click();// de nouveau ascendant
getTR=document.querySelectorAll("tr");
txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>89</td><td>Actinium</td><td>Ac</td><td>Actinide</td><td>≤ 1</td>");
});
it("Prise en compte d'une fonction spécifique associée au champ de classement.", async () =>
{
const mySort=(a: any, b: any, order: "asc"|"desc"="asc") =>
{
const values=[ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"];
if(order === "desc")
values.reverse();
if(values.indexOf(a) > values.indexOf(b))
return -1;
else if(values.indexOf(a) < values.indexOf(b))
return 1;
else
return 0;
};
converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
sortingField.datasFieldNb=4;
sortingField.field2HTML();
converter.datasSortingFields=[sortingField];
let getTHLink=document.querySelector("th a") as HTMLElement;
getTHLink.click();// tri ascendant
let getTR=document.querySelectorAll("tr");
let txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>95</td><td>Américium</td><td>Am</td><td>Actinide</td><td>Inexistant</td>");
getTHLink.click();// tri descendant
getTR=document.querySelectorAll("tr");
txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>1</td><td>Hydrogène</td><td>H</td><td>Non-métal</td><td>&gt; 100000</td>");
getTHLink.click();// de nouveau ascendant
getTR=document.querySelectorAll("tr");
txtDatasViewsElt=getTR[1].innerHTML;
expect(txtDatasViewsElt).toEqual("<td>95</td><td>Américium</td><td>Am</td><td>Actinide</td><td>Inexistant</td>");
});
});
});