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.

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

View File

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

View File

@ -13,7 +13,7 @@ describe("Test des champs de classement.", () =>
converter=new FreeDatas2HTML("CSV"); converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1.csv" }); converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1.csv" });
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
await converter.run(); await converter.run(); // parsage + 1er affichage des données
const fields=document.querySelectorAll("th"); const fields=document.querySelectorAll("th");
}); });
@ -36,39 +36,60 @@ describe("Test des champs de classement.", () =>
expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldNotFound); expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldNotFound); expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldNotFound); expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldNotFound);
}); converter.fields2Rend=[0,2,3];
expect(() => { return new SortingField(converter, 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);
}); });
it("Si tous les paramètres sont ok, ils doivent être acceptés.", () => 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.datasFieldNb).toEqual(1);
expect(sortingField.fieldsDOMSelector).toEqual("th"); 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.", () => 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(); sortingField.field2HTML();
let sortingField2=new SortingField(converter, 2);
sortingField2.field2HTML();
let getTH=document.getElementsByTagName("th"); let getTH=document.getElementsByTagName("th");
expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML); expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTH[2].innerHTML).toEqual(fixtures.sortingColumn2HTML); 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.", () => it("Lorsqu'ils sont cliqués, doivent transmettre l'information au convertisseur + lui demander d'actualiser l'affichage.", () =>
{ {
const sortingField1=new SortingField(converter, 2); const sortingField1=new SortingField(converter, 2);