diff --git a/src/SortingField.ts b/src/SortingField.ts index 70cbda6..59cf871 100644 --- a/src/SortingField.ts +++ b/src/SortingField.ts @@ -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=""+htmlContent+""; - 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=""+htmlContent+""; + 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(); + }); + } } } \ No newline at end of file diff --git a/tests/sortingFieldSpec.ts b/tests/sortingFieldSpec.ts index ec07123..bc16451 100644 --- a/tests/sortingFieldSpec.ts +++ b/tests/sortingFieldSpec.ts @@ -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 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.", () => {