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

src/errors.js

@@ -11,8 +11,11 @@ module.exports =
     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.",
     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.",
     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.",
+    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.",
 };

src/freeDatas2HTML.ts

@@ -2,12 +2,12 @@ const Papa = require("papaparse");
 const errors = require("./errors.js");
 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 { SortingField } from "./freeDatas2HTMLSortingField";
 
 import { PapaParseDatas, PapaParseErrors, PapaParseMeta } from "./papaParseInterfaces";
 
-export { Selector } from "./freeDatas2HTMLSelector"; // pour pouvoir l'appeler du même fichier
 export class FreeDatas2HTML
 {
     // 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 :
     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) :
     public parseMetas: PapaParseMeta|undefined = undefined;
     // Les données à proprement parler :
@@ -30,12 +33,11 @@ export class FreeDatas2HTML
     // Les filtres possible sur certains champs
     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 :
     private _Pagination: Pagination|undefined;
 
@@ -72,29 +74,6 @@ export class FreeDatas2HTML
             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
     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
     {
         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
             this.datasHTML=this.createDatasHTML(this.parseMetas!.fields, this.parseDatas); 
             this.refreshView();
@@ -292,33 +264,13 @@ export class FreeDatas2HTML
         {
             const converter=this;
             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,21 +278,21 @@ export class FreeDatas2HTML
 
     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 ?
-            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
-                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 ?
         let firstData=0;
         if (this.Pagination !== undefined && this.Pagination.selectedValue !== undefined &&  this.Pagination.pages !== undefined && this.Pagination.pages.selectedValue !== undefined)
@@ -413,4 +365,8 @@ export class FreeDatas2HTML
             
         return datasHTML;
     }
-}
+}
+
+// Permet l'appel des dépendances via un seul script
+export { Selector } from "./freeDatas2HTMLSelector"; 
+export { SortingField } from "./freeDatas2HTMLSortingField"; 

src/freeDatas2HTMLInterfaces.ts

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

src/freeDatas2HTMLSortingField.ts

@@ -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();
+            });
+        }
+    }
+    
+}

tests/freeDatas2HTMLSpec.ts

@@ -2,7 +2,7 @@ import { FreeDatas2HTML, Selector } from "../src/freeDatas2HTML";
 const errors=require("../src/errors.js");
 const fixtures=require("./fixtures.js");
 
-describe("Test du script central de FreeDatas2HTML", () =>
+xdescribe("Test du script central de 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.", () =>
     {
         beforeEach( () =>

tests/sortingFieldSpec.ts

@@ -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>");                 
+        }); 
+    });
+    
+});