From 9a598901ca484f392ff530cd4e9cf43b3d588c31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Wed, 3 Nov 2021 16:03:49 +0100 Subject: [PATCH] Nouveaux tests pour la classe principale + adaptations. --- public/CSS/fd2html.css | 3 +- public/userFile.html | 15 +++----- public/withCSV.html | 3 +- src/FreeDatas2HTML.ts | 3 +- src/exampleWithCSV.ts | 15 ++++++-- src/exampleWithUserFile.ts | 72 +++++++++++++++++++++---------------- tests/freeDatas2HTMLSpec.ts | 45 ++++++++++++++++------- 7 files changed, 97 insertions(+), 59 deletions(-) diff --git a/public/CSS/fd2html.css b/public/CSS/fd2html.css index 208407d..438a307 100644 --- a/public/CSS/fd2html.css +++ b/public/CSS/fd2html.css @@ -5,4 +5,5 @@ h4 { font-size:1.1em } p,li { font-size: 17px } ul, li { padding-left: 0.5em; margin-left:0 } -} \ No newline at end of file +} +article#datas { overflow-x:auto; } \ No newline at end of file diff --git a/public/userFile.html b/public/userFile.html index 02489b0..b405920 100644 --- a/public/userFile.html +++ b/public/userFile.html @@ -13,12 +13,11 @@

freeDatas2HTML

Afficher votre fichier CSV dans la page web

-

Sur cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix, en choisissant en options les champs à afficher, sur lesquels filter filter les données, faire des recherche... ou encore le nombre de lignes par page.

-

Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données.

-

Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples.

+

Sur cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou moins lisible. freeDatas2HTML permet d'afficher les données autrement que sous forme de tableau pour prévoir ce type de situation.

+

Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.

+
- Configuration
@@ -27,16 +26,10 @@
-
-
-
- - -
-
+

diff --git a/public/withCSV.html b/public/withCSV.html index ff83fc5..e81af73 100644 --- a/public/withCSV.html +++ b/public/withCSV.html @@ -18,7 +18,8 @@
-
+
+

Nombre total de résultats :

diff --git a/src/FreeDatas2HTML.ts b/src/FreeDatas2HTML.ts index edbc4bc..ff11971 100644 --- a/src/FreeDatas2HTML.ts +++ b/src/FreeDatas2HTML.ts @@ -94,7 +94,7 @@ export class FreeDatas2HTML return this._nbDatasValid; } - get fields2Rend() : number[] + get fields2Rend() : number[] { return this._fields2Rend; } @@ -209,6 +209,7 @@ export class FreeDatas2HTML if(this._datasCounterElt !== undefined) { // Dans certains cas, il est nécessaire de rechercher de nouveau l'élément pour que l'affichage fonctionne correctement. + // Du coup, revoir intérêt de faire la même chose dans le setter ? const searchEltInDOM=document.getElementById(this._datasCounterElt.id); if(searchEltInDOM !== null) searchEltInDOM.textContent=""+this._nbDatasValid; diff --git a/src/exampleWithCSV.ts b/src/exampleWithCSV.ts index 4929d59..438e1c3 100644 --- a/src/exampleWithCSV.ts +++ b/src/exampleWithCSV.ts @@ -1,4 +1,4 @@ -import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./FreeDatas2HTML"; +import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML"; const initialise = async () => { @@ -23,6 +23,7 @@ const initialise = async () => converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" }); converter.datasViewElt={ id:"datas" }; await converter.run(); + // Adaptation du rendu suivant la taille de l'écran const myRender=new Render(); if(window.innerWidth < 800) @@ -66,9 +67,17 @@ const initialise = async () => filtre2.filter2HTML(); let filtre3=new Selector(converter, 5, { id:"filtre3"}, ","); filtre3.filter2HTML(); + // + un moteur de recherche + const mySearch=new SearchEngine(converter, { id:"search" }, [1,3,5]); + mySearch.label="Qui cherche trouve ?"; + mySearch.btnTxt="Va chercher !"; + mySearch.automaticSearch=true; + mySearch.nbCharsForSearch=2; + mySearch.placeholder="Tapes en NB, chef !"; + mySearch.filter2HTML(); // + Injection des filtres dans le convertisseur - converter.datasFilters=[filtre1,filtre2,filtre3]; - + converter.datasFilters=[filtre1,filtre2,filtre3, mySearch]; + // Ajout de champs permettant de classer les données // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires if(window.innerWidth >= 800) diff --git a/src/exampleWithUserFile.ts b/src/exampleWithUserFile.ts index 34f8225..8b8cf76 100644 --- a/src/exampleWithUserFile.ts +++ b/src/exampleWithUserFile.ts @@ -10,9 +10,12 @@ const initialise = async () => const dataDisplayOptionsElt=document.getElementById("displayOptions"); if(myFile === null || myForm === null || dataDisplayOptionsElt === null || dataDisplayElt === null) - throw new Error("Certains éléments nécessaires n'ont pas été trouvés dans le DOM;"); + throw new Error("Certains éléments nécessaires au fonctionnement n'ont pas été trouvés dans le DOM;"); const converter=new FreeDatas2HTML("CSV"); + const myRender=new Render(); + myRender.settings.allBegining=""; + converter.datasRender=myRender; myFile.addEventListener("change", function(e) { @@ -22,7 +25,7 @@ const initialise = async () => if(selectedFiles !== null && selectedFiles.length === 1) { if(selectedFiles[0].type !== "text/csv" && selectedFiles[0].type !== "text/tsv") - dataDisplayOptionsElt.innerHTML=`

Le fichier que vous avez sélectionné ne semble pas être un fichier CSV ?

`; + dataDisplayOptionsElt.innerHTML=`

Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.

`; else { const reader=new FileReader(); @@ -30,17 +33,11 @@ const initialise = async () => { converter.parser.datas2Parse=reader.result as string; await converter.run(); - let fieldsSelectorHTML=`
Quels champs souhaitez-vous afficher ?`; - let filtersSelectorHTML=`
Avec quels champs souhaitez-vous pouvoir filtrer vos données ?`; for(let i=0; i < converter.fields.length; i++) - { - fieldsSelectorHTML+=``; - filtersSelectorHTML+=``; - } + fieldsSelectorHTML+=``; fieldsSelectorHTML+=`
`; - filtersSelectorHTML+=`
`; - dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+filtersSelectorHTML+``; + dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+``; }; reader.readAsText(selectedFiles[0]); } @@ -50,6 +47,7 @@ const initialise = async () => myForm.addEventListener("submit", function(e) { e.preventDefault(); + dataDisplayElt.innerHTML=""; const fields2Rend: number[]=[]; let checkBox: HTMLInputElement, nbSelector=0; for(let i=0; i < converter.fields.length; i++) @@ -60,33 +58,47 @@ const initialise = async () => if(checkBox.checked) fields2Rend.push(i); } - if(nbSelector < 3) - { - checkBox=document.getElementById("selectedFilter_"+i) as HTMLInputElement; - if(checkBox !== null) - { - if(checkBox.checked) - { - nbSelector++; - let filtre1=new Selector(converter, i, { id:"filtre"+nbSelector} ); - filtre1.filter2HTML(); - converter.datasFilters.push(filtre1); - } - } - } } - /// + rendre classable toutes les colonnes - /// + ajout moteur de recherche - /// + nombre de résultat - /// + rendu autre que tableau ou alors permettre scroll horizontale ? if( fields2Rend.length === 0) dataDisplayElt.innerHTML=`

Vous n'avez sélectionné aucun champ à afficher !

`; else { converter.fields2Rend=fields2Rend; converter.datasViewElt={ id:"datas" }; - converter.run();// run pour prendre les champs à afficher, mais refreshView devrait suffire ! + + // + Un moteur de recherche : + const mySearch=new SearchEngine(converter, { id:"search" }); + mySearch.label="Qui cherche trouve ?"; + mySearch.btnTxt="Va chercher !"; + mySearch.automaticSearch=true; + mySearch.nbCharsForSearch=2; + mySearch.placeholder="Saisir un moins 2 caractères"; + mySearch.filter2HTML(); + converter.datasFilters=[mySearch]; + + // + 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; + converter.pagination=pagination; + pagination.options2HTML(); + + // Actualisation de l'affichage + converter.refreshView(); + + // + Compteur : + converter.datasCounterElt={ id:"counter" }; + converter.datasCounter2HTML(); + + // +Toutes les colonnes classables : + let sortingField: SortingField; + for(let i=0; i < converter.fields2Rend.length; i++) + { + sortingField=new SortingField(converter, i); + sortingField.field2HTML(); + converter.datasSortingFields.push(sortingField); + } } }); } @@ -94,7 +106,7 @@ const initialise = async () => { console.error(e); if(document.getElementById("datas")!==null) - document.getElementById("datas")!.innerHTML="Désolé, mais un problème technique empêche l'affichage des données."; + document.getElementById("datas")!.innerHTML=`Désolé, mais un problème imprévu empêche l'affichage des données.`; } } initialise(); \ No newline at end of file diff --git a/tests/freeDatas2HTMLSpec.ts b/tests/freeDatas2HTMLSpec.ts index a88dfc6..365bbb5 100644 --- a/tests/freeDatas2HTMLSpec.ts +++ b/tests/freeDatas2HTMLSpec.ts @@ -111,18 +111,6 @@ describe("Tests du script central de FreeDatas2HTML", () => expect(converter.fields).toEqual(converter.parser.parseResults.fields); }); - it("Si le parsage s'est bien déroulé et que tous les champs doivent être affichés, leur liste doit être transmise au moteur de rendu sans altération.", () => - { - expect(converter.datasRender.fields).toEqual(converter.parser.parseResults.fields); - }); - - it("Si le parsage s'est bien déroulé et qu'une liste de champs à afficher a été fournie, seuls ceux demandés doivent être transmis au moteur de rendu.", async () => - { - converter.fields2Rend=[1,2]; - await converter.run(); - expect(converter.datasRender.fields).toEqual([converter.parser.parseResults.fields[1],converter.parser.parseResults.fields[2]]); - }); - it("Si le parsage s'est bien déroulé et qu'un élément HTML est renseigné pour recevoir les données, un premier affichage doit être demandé.", async () => { spyOn(converter, "refreshView"); @@ -244,6 +232,39 @@ describe("Tests du script central de FreeDatas2HTML", () => expect(converter.datas2HTML).toHaveBeenCalled(); expect(converter.datasRender.datas).toEqual(converter.datas2Rend); }); + + it("Si des champs à afficher n'ont pas été renseignés, tous ceux trouvés par le parserur doivent tous être transmis au moteur de rendu.", () => + { + converter.refreshView(); + expect(converter.datasRender.fields).toEqual(converter.parser.parseResults.fields); + }); + + it("Si dans champs à afficher ont été renseignés, ils doivent être transmis au moteur rendu", async () => + { + converter.fields2Rend=[1,2]; + await converter.run(); + expect(converter.datasRender.fields).toEqual([converter.parser.parseResults.fields[1],converter.parser.parseResults.fields[2]]); + }); + + it("Doit appelé la fonction actualisant le compteur d'enregistrements.", () => + { + spyOn(converter, "datasCounter2HTML"); + converter.refreshView(); + expect(converter.datasCounter2HTML).toHaveBeenCalled(); + }); + + it("Si un élément du DOM est renseigné pour le compteur, il doit afficher le nombre d'enregistrements.", async () => + { + converter.datasCounterElt={ id:"counter" }; + converter.datasCounter2HTML(); + converter.refreshView(); + expect(document.getElementById("counter").textContent).toEqual("118"); + // Y compris quand aucune donnée trouvée : + converter.parser=new ParserForCSV(); + converter.parser.datas2Parse="name,firstname,city"; + await converter.run(); + expect(document.getElementById("counter").textContent).toEqual("0"); + }); it("Doit appelé le moteur de rendu et afficher le résultat dans la page.", async () => {
Nombre de résultats :