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

This commit is contained in:
Fabrice PENHOËT 2021-09-22 17:36:11 +02:00
parent ea4174cf73
commit c9700978bc
5 changed files with 35 additions and 47 deletions

View File

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

View File

@ -28,7 +28,7 @@ const initialise = async () =>
// Configuration de la pagination // Configuration de la pagination
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" }; 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; converter.pagination=pagination;
pagination.rend2HTML(); pagination.rend2HTML();
@ -47,17 +47,17 @@ const initialise = async () =>
converter.datasSelectors=[filtre1,filtre2,filtre3]; converter.datasSelectors=[filtre1,filtre2,filtre3];
// Ajout de champs permettant de classer les données // Ajout de champs permettant de classer les données
let sortingField1=new SortingField(converter); let sortingField1=new SortingField(converter, 0);
sortingField1.datasFieldNb=0; //sortingField1.datasFieldNb=0;
sortingField1.field2HTML(); sortingField1.field2HTML();
let sortingField2=new SortingField(converter); let sortingField2=new SortingField(converter, 1);
sortingField2.datasFieldNb=1; // sortingField2.datasFieldNb=1;
sortingField2.field2HTML(); sortingField2.field2HTML();
let sortingField3=new SortingField(converter); let sortingField3=new SortingField(converter, 2);
sortingField3.datasFieldNb=2; //sortingField3.datasFieldNb=2;
sortingField3.field2HTML(); sortingField3.field2HTML();
let sortingField4=new SortingField(converter); let sortingField4=new SortingField(converter, 4);
sortingField4.datasFieldNb=4; //sortingField4.datasFieldNb=4;
sortingField4.field2HTML(); sortingField4.field2HTML();
// Injection dans le convertisseur // Injection dans le convertisseur
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4]; converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];

View File

@ -36,7 +36,7 @@ export interface Selectors
} }
export interface SortingFields export interface SortingFields
{ {
datasFieldNb: number|undefined; datasFieldNb: number;
order?: "asc"|"desc"|undefined; order?: "asc"|"desc"|undefined;
field2HTML() : void; field2HTML() : void;
} }

View File

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

View File

@ -15,7 +15,6 @@ describe("Test des champs de classement.", () =>
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv"; converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
await converter.run(); await converter.run();
sortingField=new SortingField(converter);
}); });
afterEach( () => 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.", () => it("Doit générer une erreur, si initialisé sans fournir la liste des champs servant à classer les données.", () =>
{ {
converter=new FreeDatas2HTML(); 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.", () => 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.", () => 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, 9); }).toThrowError(errors.sortingFieldFieldNotFound);
expect(() => { return new SortingField(converter); }).not.toThrowError(); 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); const sortingField=new SortingField(converter, 1, "th");
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); 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.", () => 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(); sortingField.field2HTML();
let sortingField2=new SortingField(converter); let sortingField2=new SortingField(converter, 2);
sortingField2.datasFieldNb=2;
sortingField2.field2HTML(); sortingField2.field2HTML();
let getTH=document.getElementsByTagName("th"); let getTH=document.getElementsByTagName("th");
expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML); expect(getTH[0].innerHTML).toEqual(fixtures.sortingColumn1HTML);
expect(getTH[2].innerHTML).toEqual(fixtures.sortingColumn2HTML); expect(getTH[2].innerHTML).toEqual(fixtures.sortingColumn2HTML);
}); });
}); });
describe("Action des colonnes de classement en corrélation avec le convertiseur.", () => 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 () => 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(); sortingField.field2HTML();
converter.datasSortingFields=[sortingField]; converter.datasSortingFields=[sortingField];
let getTHLink=document.querySelector("th a") as HTMLElement; let getTHLink=document.querySelector("th a") as HTMLElement;
@ -115,7 +106,7 @@ describe("Test des champs de classement.", () =>
return 0; return 0;
}; };
converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }]; converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
sortingField.datasFieldNb=4; let sortingField=new SortingField(converter, 4);
sortingField.field2HTML(); sortingField.field2HTML();
converter.datasSortingFields=[sortingField]; converter.datasSortingFields=[sortingField];
let getTHLink=document.querySelector("th a") as HTMLElement; let getTHLink=document.querySelector("th a") as HTMLElement;