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

Debug classe gérant les champs classables pour prise en compte que tous les champs ne sont pas forcément affichés + adaptation de son script de tests.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-11-04 16:35:50 +01:00
parent 584e2d91df
commit 5bb05bfe44
2 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/SortingField.ts
View File

@ -10,8 +10,8 @@ export class SortingField implements SortingFields
_datasFieldNb: number;
_order: "asc"|"desc"|undefined=undefined;
// Injection de la classe principale, mais uniquement si les noms des champs ont été importés et affichés correctement.
// Attention le numéro de champ concerne les champs effectivement affichés et non ceux issus du parseur.
// Injection de la classe principale, mais uniquement si les noms des champs ont été importés.
// Et le numéro de champ doit être trouvé parmis ceux devant être affichés.
constructor(converter: FreeDatas2HTML, datasFieldNb: number, fieldsDOMSelector: string="th")
{
if(converter.fields.length === 0)
@ -20,17 +20,9 @@ export class SortingField implements SortingFields
throw new Error(errors.sortingFieldNotFound);
else
{
const fields=document.querySelectorAll(fieldsDOMSelector);
if(fields === undefined)
throw new Error(errors.sortingFieldsNotInHTML);
else if(fields.length !== converter.realFields2Rend().length)
throw new Error(errors.sortingFieldsNbFail);
else
{
this._converter=converter;
this._datasFieldNb=datasFieldNb;
this._fieldsDOMSelector=fieldsDOMSelector;
}
this._converter=converter;
this._datasFieldNb=datasFieldNb;
this._fieldsDOMSelector=fieldsDOMSelector;
}
}
@ -38,17 +30,17 @@ export class SortingField implements SortingFields
{
return this._converter;
}
get fieldsDOMSelector() : string
{
return this._fieldsDOMSelector;
}
get datasFieldNb() : number
{
return this._datasFieldNb;
}
get fieldsDOMSelector() : string
{
return this._fieldsDOMSelector;
}
get order() : "asc"|"desc"|undefined
{
return this._order;
@ -56,21 +48,31 @@ export class SortingField implements SortingFields
public field2HTML() : void
{
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) // "!" car je sais que sortingElement existe, puisque je viens de le créer !
const fields=document.querySelectorAll(this.fieldsDOMSelector);
if(fields === undefined)
throw new Error(errors.sortingFieldsNotInHTML);
else if(fields.length !== this._converter.realFields2Rend().length)
throw new Error(errors.sortingFieldsNbFail);
else
{
e.preventDefault();
let order=field._order ;
if(order === undefined || order === "desc")
field._order="asc";
else
field._order="desc";
field._converter.datasSortedField=field;
field._converter.refreshView();
});
// Arrivé ici l'existence de l'élément a été vérifiée, mais c'est sa position qui permet de le cibler :
let htmlContent;
const index=this._converter.getFieldDisplayRank(this._datasFieldNb);
htmlContent=fields[index].innerHTML;
htmlContent="<a href='#freeDatas2HTMLSorting"+this._datasFieldNb+"' id='freeDatas2HTMLSorting"+this._datasFieldNb+"'>"+htmlContent+"</a>";
fields[index].innerHTML=htmlContent;
const sortingElement=document.getElementById("freeDatas2HTMLSorting"+this._datasFieldNb), field=this;
sortingElement!.addEventListener("click", function(e) // "!" car je sais que sortingElement existe, puisque 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.refreshView();
});
}
}
}

55
tests/sortingFieldSpec.ts
View File

@ -13,7 +13,7 @@ describe("Test des champs de classement.", () =>
converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1.csv" });
converter.datasViewElt={ id:"datas" };
await converter.run();
await converter.run(); // parsage + 1er affichage des données
const fields=document.querySelectorAll("th");
});
@ -36,38 +36,59 @@ describe("Test des champs de classement.", () =>
expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldNotFound);
});
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, 0, "th.cols"); }).toThrowError(errors.sortingsFieldNotInHTML);
});
it("Doit générer une erreur, si le nombre d'éléments trouvés dans le DOM pour les entêtes est différent du nombre de champs à afficher.", () =>
{
expect(() => { return new SortingField(converter, 0, "td"); }).toThrowError(errors.sortingFieldsNbFail);
converter.fields2Rend=[0,2,3];
expect(() => { return new SortingField(converter, 1); }).toThrowError(errors.sortingFieldNotFound);
});
it("Si tous les paramètres sont ok, ils doivent être acceptés.", () =>
{
const sortingField=new SortingField(converter, 1, "th");
expect(() => { return sortingField=new SortingField(converter, 1, "th"); }).not.toThrowError();
expect(sortingField.datasFieldNb).toEqual(1);
expect(sortingField.fieldsDOMSelector).toEqual("th");
converter.fields2Rend=[0,2,3];
expect(() => { return sortingField=new SortingField(converter, 3, "th.test"); }).not.toThrowError();
expect(sortingField.datasFieldNb).toEqual(3);
expect(sortingField.fieldsDOMSelector).toEqual("th.test");
});
});
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.", () =>
{
it("Doit générer une erreur, si les éléments HTML devant contenir les noms des champs ne sont pas trouvés dans le DOM.", () =>
{
let sortingField=new SortingField(converter, 0);
sortingField=new SortingField(converter, 0, "th.cols");
expect(() => { return sortingField.field2HTML(); }).toThrowError(errors.sortingsFieldNotInHTML);
});
it("Doit générer une erreur, si le nombre d'éléments trouvés dans le DOM pour les entêtes est différent de celui des champs à afficher.", () =>
{
sortingField=new SortingField(converter, 0, "td");
expect(() => { return sortingField.field2HTML(); }).toThrowError(errors.sortingFieldsNbFail);
});
it("Doit générer un élement lien ayant comme ancre le nom du champ ciblé.", () =>
{
sortingField=new SortingField(converter, 0);
sortingField.field2HTML();
sortingField=new SortingField(converter, 2);
sortingField.field2HTML();
let sortingField2=new SortingField(converter, 2);
sortingField2.field2HTML();
let getTH=document.getElementsByTagName("th");
expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTH[2].innerHTML).toEqual(fixtures.sortingColumn2HTML);
});
it("Doit générer un élement lien ayant comme ancre le nom du champ ciblé, même si tous les champs ne sont pas affichés.", () =>
{
converter.fields2Rend=[0,2,3];
converter.refreshView();
sortingField=new SortingField(converter, 0);
sortingField.field2HTML();
sortingField=new SortingField(converter, 2);
sortingField.field2HTML();
let getTH=document.getElementsByTagName("th");
expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTH[1].innerHTML).toEqual(fixtures.sortingColumn2HTML);// puisque le champ "1" n'est pas affiché.
});
it("Lorsqu'ils sont cliqués, doivent transmettre l'information au convertisseur + lui demander d'actualiser l'affichage.", () =>
{