Simplification instanciation des colonnes de classement + adaptation scripts de tests et démo.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freedatas2html",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Visualization of data from various sources (CSV, API, HTML...) with filters, classification, pagination, etc.",
   "main": "index.js",
   "scripts": {

src/firstExample.ts

@@ -23,12 +23,12 @@ const initialise = async () =>
         converter.datasViewElt={  id:"datas" };
         converter.datasSourceUrl="http://localhost:8080/datas/elements-chimiques.csv";
         await converter.parse();
-        converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
+        converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }];
 
         // Configuration de la pagination
         const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
         pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
-        pagination.selectedValue=10; // revoir car n'est pas testé si déclaré avant les options
+        pagination.selectedValue=10;
         converter.pagination=pagination;
         pagination.rend2HTML();
         
@@ -36,34 +36,28 @@ const initialise = async () =>
         await converter.run();
        
         // Création d'outils permettant de filtrer les données des champs de données
-        let filtre1=new Selector(converter);
-        filtre1.datasViewElt={ id:"filtre1"};
-        filtre1.datasFieldNb=3;
+        let filtre1=new Selector(converter, 3, { id:"filtre1"} );
         filtre1.selector2HTML();
-        let filtre2=new Selector(converter);
-        filtre2.datasViewElt={ id:"filtre2"};
-        filtre2.datasFieldNb=4;
+        let filtre2=new Selector(converter, 4, { id:"filtre2"} );
         filtre2.selector2HTML();
-        let filtre3=new Selector(converter);
-        filtre3.datasViewElt={ id:"filtre3"};
-        filtre3.datasFieldNb=5;
+        let filtre3=new Selector(converter, 5, { id:"filtre3"} );
         filtre3.separator=",";
         filtre3.selector2HTML();
-        // Injection des filtres dans le convertisseur
+        // + Injection des filtres dans le convertisseur
         converter.datasSelectors=[filtre1,filtre2,filtre3];
         
         // Ajout de champs permettant de classer les données
-        let sortingField1=new SortingField(converter);
-        sortingField1.datasFieldNb=0;
+        let sortingField1=new SortingField(converter, 0);
+        //sortingField1.datasFieldNb=0;
         sortingField1.field2HTML();
-        let sortingField2=new SortingField(converter);
-        sortingField2.datasFieldNb=1;
+        let sortingField2=new SortingField(converter, 1);
+       // sortingField2.datasFieldNb=1;
         sortingField2.field2HTML();
-        let sortingField3=new SortingField(converter);
-        sortingField3.datasFieldNb=2;
+        let sortingField3=new SortingField(converter, 2);
+        //sortingField3.datasFieldNb=2;
         sortingField3.field2HTML();
-        let sortingField4=new SortingField(converter);
-        sortingField4.datasFieldNb=4;
+        let sortingField4=new SortingField(converter, 4);
+        //sortingField4.datasFieldNb=4;
         sortingField4.field2HTML();
         // Injection dans le convertisseur
         converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];

src/freeDatas2HTMLInterfaces.ts

@@ -27,7 +27,7 @@ export interface PaginationsPages
 export interface Selectors
 {
     datasViewElt: DOMElement;
-    datasFieldNb: number|undefined;
+    datasFieldNb: number;
     separator?: string|undefined;
     name?: string;
     values?: string[];
@@ -36,7 +36,7 @@ export interface Selectors
 }
 export interface SortingFields
 {
-    datasFieldNb: number|undefined;
+    datasFieldNb: number;
     order?: "asc"|"desc"|undefined;
     field2HTML() : void;
 }

src/freeDatas2HTMLSelector.ts

@@ -7,43 +7,24 @@ export class Selector implements Selectors
 {
     _converter: FreeDatas2HTML;
     _datasViewElt: DOMElement= { id:"", eltDOM:undefined };  // élément du DOM dans lequel afficher le "select"
-    _datasFieldNb: number|undefined; // numéro du champ dont les données serviront au filtre
+    _datasFieldNb: number; // numéro du champ dont les données serviront au filtre
     _separator: string|undefined; // séparateur éventuel pour les données du champ
     name: string = ""; // nom à afficher dans le DOM comme "label" du "select"
     values: string[]=[]; // données proposées par le filtre, après traitement des données reçues
 
     // Injection de la classe principale, mais uniquement si les données ont été importées
-    constructor(converter: FreeDatas2HTML)
+    constructor(converter: FreeDatas2HTML, datasFieldNb: number, elt: DOMElement)
     {
         if(converter.parseMetas === undefined || converter.parseMetas.fields === undefined || converter.parseDatas.length === 0)
             throw new Error(errors.selectorNeedDatas);
-        else
-            this._converter=converter;
-    }
-
-    // Vérifie que l'élément devant recevoir le filtre existe dans la page
-    set datasViewElt(elt: DOMElement)
-    {
-        this._datasViewElt=FreeDatas2HTML.checkInDOMById(elt);
-    }
-
-    get datasViewElt() : DOMElement
-    {
-        return this._datasViewElt;
-    }
-
-    // Vérifie que le numéro de champ existe dans les données reçues
-    set datasFieldNb(datasFieldNb: number|undefined)
-    {
-        if(datasFieldNb === undefined || ! this._converter.checkFieldExist(Number(datasFieldNb)))
+        else if(! converter.checkFieldExist(Number(datasFieldNb)))
             throw new Error(errors.selectorFieldNotFound);
         else
+        {
+            this._datasViewElt=FreeDatas2HTML.checkInDOMById(elt); // provoque une erreur, si élement non trouvé dans DOM
+            this._converter=converter;
             this._datasFieldNb=datasFieldNb;
-    }
-
-    get datasFieldNb() : number|undefined
-    {
-        return this._datasFieldNb;
+        }
     }
     
     // Ignore un séparateur de données vide
@@ -56,6 +37,21 @@ export class Selector implements Selectors
             this._separator=separator;
     }
 
+    get datasViewElt() : DOMElement
+    {
+        return this._datasViewElt;
+    }
+
+    get datasFieldNb() : number
+    {
+        return this._datasFieldNb;
+    }
+
+    get separator() : string|undefined
+    {
+        return this._separator;
+    }
+
     // Création du <select> dans le HTML correspondant au filtre
     public selector2HTML() : void
     {

src/freeDatas2HTMLSortingField.ts

@@ -7,14 +7,16 @@ export class SortingField implements SortingFields
 {
     _converter: FreeDatas2HTML;
     _fieldsDOMSelector: string; 
-    _datasFieldNb: number|undefined; // numéro du champ dont les données serviront au filtre
+    _datasFieldNb: number;
     _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")
+    constructor(converter: FreeDatas2HTML, datasFieldNb: number, fieldsDOMSelector: string = "th")
     {
         if(converter.parseMetas === undefined || converter.parseMetas.fields === undefined)
             throw new Error(errors.sortingFieldNeedDatas);
+        else if(! converter.checkFieldExist(Number(datasFieldNb)))
+            throw new Error(errors.sortingFieldFieldNotFound);
         else
         {
             const  fields=document.querySelectorAll(fieldsDOMSelector);
@@ -25,23 +27,18 @@ export class SortingField implements SortingFields
             else
             {
                 this._converter=converter;
+                this._datasFieldNb=datasFieldNb;
                 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)
+    get fieldsDOMSelector() : string
     {
-        if(datasFieldNb === undefined || ! this._converter.checkFieldExist(Number(datasFieldNb)))
-            throw new Error(errors.sortingFieldFieldNotFound);
-        else
-            this._datasFieldNb=datasFieldNb;
+        return this._fieldsDOMSelector;
     }
-
-    get datasFieldNb() : number|undefined
+    
+    get datasFieldNb() : number
     {
         return this._datasFieldNb;
     }

tests/selectorSpec.ts

@@ -15,7 +15,6 @@ describe("Test des filtres de données", () =>
         converter.datasViewElt={  id:"datas" };
         converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
         await converter.parse();
-        selector=new Selector(converter);
     });
 
     afterEach( () =>
@@ -28,33 +27,33 @@ describe("Test des filtres de données", () =>
         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 Selector(converter); }).toThrowError(errors.selectorNeedDatas);
+            expect(() => { return  new Selector(converter, 0, { id:"selector1" }); }).toThrowError(errors.selectorNeedDatas);
         });
         
-        it("Ne doit pas générer d'erreur, si initialisé avec des données correctes.", () =>
-        {
-            expect(() => { return  new Selector(converter); }).not.toThrowError();
-        });
-
          it("Doit générer une erreur, si le numéro de champ fourni n'existe pas dans les données.", () =>
         {
-            expect(() => { return  selector.datasFieldNb=9; }).toThrowError(errors.selectorFieldNotFound);
-            expect(() => { return  selector.datasFieldNb=-1; }).toThrowError(errors.selectorFieldNotFound);
-            expect(() => { return  selector.datasFieldNb=1.1; }).toThrowError(errors.selectorFieldNotFound);
+            expect(() => { return  new Selector(converter, 9, { id:"selector1" }); }).toThrowError(errors.selectorFieldNotFound);
+            expect(() => { return  new Selector(converter, -1, { id:"selector1" }); }).toThrowError(errors.selectorFieldNotFound);
+            expect(() => { return  new Selector(converter, 1.1, { id:"selector1" }); }).toThrowError(errors.selectorFieldNotFound);
         });
-        
-         it("Si le numéro de champ fourni est valide, il doit être accepté.", () =>
-        {
-            expect(() => { return  selector.datasFieldNb=1; }).not.toThrowError();
-            selector.datasFieldNb=1; 
-            expect(selector.datasFieldNb).toEqual(1);
-        });       
-        
+           
         it("Si un séparateur vide est fourni pour un filtre, il doit être ignoré.", () =>
-        {
+        { 
+            selector=new Selector(converter, 0, { id:"selector1" }); 
             selector.separator="";
             expect(selector.separator).toBeUndefined();
         });
+
+        it("Si toutes les paramètres sont correctes, ils doivent être acceptés.", () =>
+        {
+           const elt=document.getElementById("selector1");
+           const selector=new Selector(converter, 2, { id:"selector1" });
+           selector.separator=",";
+           expect(selector.datasFieldNb).toEqual(2);
+           expect(selector.datasViewElt).toEqual({ id:"selector1", eltDOM:elt });
+           expect(selector.separator).toEqual(",");
+        });
+        
     });
 
     describe("Création et action des sélecteurs permettant de filter les données affichées.", () =>
@@ -66,18 +65,14 @@ describe("Test des filtres de données", () =>
             converter.datasViewElt={  id:"datas" };
             converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
             await converter.parse();
-            selector=new Selector(converter);
+            selector=new Selector(converter, 3, { id:"selector1" });
         });
         
         it("Doit générer un élement <select> listant les valeurs distinctes du champ spécifié, classées dans le bon ordre.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();            
             expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTML);
-            selector=new Selector(converter);
-            selector.datasViewElt={ id:"selector2"};
-            selector.datasFieldNb=4;
+            selector=new Selector(converter, 4, { id:"selector2" });
             selector.selector2HTML();
             expect(document.getElementById("selector2").innerHTML).toEqual(fixtures.selector2HTML);
         });
@@ -86,8 +81,6 @@ describe("Test des filtres de données", () =>
         {
             converter.datasSourceUrl="http://localhost:9876/datas/datas1-emtyinfield.csv";
             await converter.parse();
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();   
             expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTML);
         });
@@ -96,8 +89,7 @@ describe("Test des filtres de données", () =>
         {
             converter.datasSourceUrl="http://localhost:9876/datas/datas1+tagsfield.csv";
             await converter.parse();
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=5;
+            selector=new Selector(converter, 5, { id:"selector1" });
             selector.separator="|";
             selector.selector2HTML(); 
             expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithSeparator);
@@ -118,8 +110,7 @@ describe("Test des filtres de données", () =>
                     return 0;
             };            
             converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=4;
+            selector=new Selector(converter, 4, { id:"selector1" });
             selector.separator="|";
             selector.selector2HTML(); 
             expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithFunction);
@@ -139,12 +130,10 @@ describe("Test des filtres de données", () =>
 
         it("Doit retourner false, si la donnée testée ne possède pas le champ sur lequel les données sont filtrées.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();
             let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
             selectElement.value="4";
-            let data2Test= { // le champ à filtrer ("Famill") est manquant
+            let data2Test= { // le champ à filtrer ("Famille") est manquant
                 "Z (numéro atomique)"	: "53",
                 "Élément": "Iode",
                 "Symbole": "I",
@@ -155,8 +144,6 @@ describe("Test des filtres de données", () =>
         
         it("Doit retourner false, si une donnée testée ne correspond pas à la valeur sélectionnée pour le filtre.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();
             let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
             selectElement.value="4";
@@ -172,8 +159,6 @@ describe("Test des filtres de données", () =>
         
         it("Doit retourner true, si une donnée testée correspond pas à la valeur sélectionnée pour ce filtre.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();
             let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
             selectElement.value="4";
@@ -189,8 +174,6 @@ describe("Test des filtres de données", () =>
         
         it("Doit toujours retourner true, si aucune valeur sélectionnée dans la liste.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
             selector.selector2HTML();
             let data2Test= {
                 "Z (numéro atomique)"	: "530",
@@ -212,14 +195,12 @@ describe("Test des filtres de données", () =>
             converter.datasViewElt={  id:"datas" };
             converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
             await converter.parse();
-            selector=new Selector(converter);
+            selector=new Selector(converter, 3, { id:"selector1" });
+            selector.selector2HTML();
         });
 
         it("Le choix d'une option dans un des sélecteurs doit modifier le contenu du tableau pour ne garder que les données correspondantes et les afficher toutes si sélection 0.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
-            selector.selector2HTML();
             converter.datasSelectors=[selector];
             let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
             selectElement.value="4";
@@ -234,12 +215,7 @@ describe("Test des filtres de données", () =>
 
        it("Si plusieurs sélecteurs sont utilisés, seules les données correspondant à tous ces choix doivent être affichées. Il peut n'y avoir aucun résultat.",  () =>
         {
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=3;
-            selector.selector2HTML();
-            let selector2=new Selector(converter);
-            selector2.datasViewElt={ id:"selector2"};
-            selector2.datasFieldNb=4;
+            let selector2=new Selector(converter, 4, { id:"selector2" });
             selector2.selector2HTML();
             converter.datasSelectors=[selector, selector2];
             let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
@@ -259,8 +235,7 @@ describe("Test des filtres de données", () =>
         {
             converter.datasSourceUrl="http://localhost:9876/datas/datas1+tagsfield.csv";
             await converter.parse();
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=5;
+            selector=new Selector(converter, 5, { id:"selector1" });
             selector.separator="|";
             selector.selector2HTML(); 
             converter.datasSelectors=[selector];
@@ -271,19 +246,16 @@ describe("Test des filtres de données", () =>
             expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelectTagsField);
         });
 
-        it("Les sélecteurs basés sur un séparateur peuvent fonctionner avec un autre filtre.", async () =>
+        it("Les filtres basés sur un séparateur peuvent fonctionner avec un autre filtre.", async () =>
         {
             converter.datasSourceUrl="http://localhost:9876/datas/datas1+tagsfield.csv";
             await converter.parse();
-            selector.datasViewElt={ id:"selector1"};
-            selector.datasFieldNb=4;
+            selector=new Selector(converter, 4, { id:"selector1" });
             selector.selector2HTML();
-            let selector2=new Selector(converter);
-            selector2.datasViewElt={ id:"selector2"};
-            selector2.datasFieldNb=5;
+            let selector2=new Selector(converter, 5, { id:"selector2" });
             selector2.separator="|";
             selector2.selector2HTML();
-            converter.datasSelectors=[selector, selector2];            
+            converter.datasSelectors=[selector, selector2];
             let selectElement=document.getElementById("freeDatas2HTML_selector2") as HTMLInputElement;
             selectElement.value="11"; //="Exemple10" retournant une seule ligne
             selectElement.dispatchEvent(new Event('change'));

tests/sortingFieldSpec.ts

@@ -15,7 +15,6 @@ describe("Test des champs de classement.", () =>
         converter.datasViewElt={  id:"datas" };
         converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
         await converter.run(); 
-        sortingField=new SortingField(converter);
     });
 
     afterEach( () =>
@@ -28,61 +27,53 @@ describe("Test des champs 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);
+            expect(() => { return  new SortingField(converter, 0); }).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);
+            expect(() => { return new SortingField(converter, 0, "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);
+            expect(() => { return new SortingField(converter, 0, "td"); }).toThrowError(errors.sortingFieldsNbFail);
         });
 
-        it("Ne doit pas générer d'erreur, si initialisé avec des données correctes.", () =>
+         it("Doit générer une erreur, si initialiser avec un numéro du champ de classement n'existant pas dans les données.", () =>
         {
-            expect(() => { return  new SortingField(converter, "th"); }).not.toThrowError();
-            expect(() => { return  new SortingField(converter); }).not.toThrowError();
+            expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldFieldNotFound);
+            expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldFieldNotFound);
+            expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldFieldNotFound);
         });
         
-         it("Doit générer une erreur, si le numéro du champ de classement n'existe pas dans les données.", () =>
+        it("Si tous les paramètres sont ok, ils doivent être acceptés.", () =>
         {
-            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; 
+            const sortingField=new SortingField(converter, 1, "th");
             expect(sortingField.datasFieldNb).toEqual(1);
+            expect(sortingField.fieldsDOMSelector).toEqual("th");
         });
     });
     
-    describe("Création et action des liens permettant de classer les données affichées.", () =>
+    describe("Création 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; 
+            let sortingField=new SortingField(converter, 0);
             sortingField.field2HTML();
-            let sortingField2=new SortingField(converter);
-            sortingField2.datasFieldNb=2;
+            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);
         });
-        
     });
 
     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; 
+            let sortingField=new SortingField(converter, 2);
             sortingField.field2HTML();
             converter.datasSortingFields=[sortingField];
             let getTHLink=document.querySelector("th a") as HTMLElement;
@@ -115,7 +106,7 @@ describe("Test des champs de classement.", () =>
                     return 0;
             };
             converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
-            sortingField.datasFieldNb=4; 
+            let sortingField=new SortingField(converter, 4);
             sortingField.field2HTML();
             converter.datasSortingFields=[sortingField];
             let getTHLink=document.querySelector("th a") as HTMLElement;