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.

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.
+    // 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")
     {
         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);
+            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;
     }
 
-    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);
+        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();
+            });
+        }
     }
 }

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,39 +36,60 @@ 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);
-        });
+            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.", () =>
         {
-            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.", () =>
         {
             const sortingField1=new SortingField(converter, 2);