From ea4174cf73c4b50f286a59edd9dcbbe1cb36b5bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Wed, 22 Sep 2021 17:12:00 +0200 Subject: [PATCH] =?UTF-8?q?Simplification=20instanciation=20des=20filtres?= =?UTF-8?q?=20(selector)=20+=20adaptation=20tests=20et=20script=20d=C3=A9m?= =?UTF-8?q?o.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/firstExample.ts | 16 ++---- src/freeDatas2HTMLInterfaces.ts | 2 +- src/freeDatas2HTMLSelector.ts | 48 ++++++++---------- tests/selectorSpec.ts | 90 ++++++++++++--------------------- 5 files changed, 60 insertions(+), 98 deletions(-) diff --git a/package.json b/package.json index dcdb1ae..858f656 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freedatas2html", - "version": "0.4.3", + "version": "0.4.4", "description": "Visualization of data from various sources (CSV, API, HTML...) with filters, classification, pagination, etc.", "main": "index.js", "scripts": { diff --git a/src/firstExample.ts b/src/firstExample.ts index a954cd2..c574357 100644 --- a/src/firstExample.ts +++ b/src/firstExample.ts @@ -23,7 +23,7 @@ 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 :"); @@ -36,20 +36,14 @@ 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 diff --git a/src/freeDatas2HTMLInterfaces.ts b/src/freeDatas2HTMLInterfaces.ts index 31846bd..4710197 100644 --- a/src/freeDatas2HTMLInterfaces.ts +++ b/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[]; diff --git a/src/freeDatas2HTMLSelector.ts b/src/freeDatas2HTMLSelector.ts index 634eeab..5f6ca96 100644 --- a/src/freeDatas2HTMLSelector.ts +++ b/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 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'));