Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Relecture code et tests de la classe gérant les champs permettant de classer les données.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-10-19 13:05:27 +02:00
parent 7cc64618a6
commit b3a57c89a3
3 changed files with 61 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/SortingField.ts
View File

@ -10,13 +10,13 @@ export class SortingField implements SortingFields
_datasFieldNb: number; _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 les noms des champs ont été importés et affichés correctement
constructor(converter: FreeDatas2HTML, datasFieldNb: number, fieldsDOMSelector: string="th") constructor(converter: FreeDatas2HTML, datasFieldNb: number, fieldsDOMSelector: string="th")
{ {
if(converter.fields === undefined) if(converter.fields === undefined)
throw new Error(errors.sortingFieldNeedDatas); throw new Error(errors.sortingFieldNeedDatas);
else if(! converter.checkFieldExist(Number(datasFieldNb))) else if(! converter.checkFieldExist(datasFieldNb))
throw new Error(errors.sortingFieldFieldNotFound); throw new Error(errors.sortingFieldNotFound);
else else
{ {
const fields=document.querySelectorAll(fieldsDOMSelector); const fields=document.querySelectorAll(fieldsDOMSelector);
@ -33,6 +33,11 @@ export class SortingField implements SortingFields
} }
} }
get converter() : FreeDatas2HTML
{
return this._converter;
}
get fieldsDOMSelector() : string get fieldsDOMSelector() : string
{ {
return this._fieldsDOMSelector; return this._fieldsDOMSelector;
@ -48,30 +53,23 @@ export class SortingField implements SortingFields
return this._order; return this._order;
} }
// Création du lien dans le HTML correspondant au champ de classement
public field2HTML() : void public field2HTML() : void
{ {
if(this._converter === undefined || this._fieldsDOMSelector === "" || this._datasFieldNb === undefined) const fields=document.querySelectorAll(this._fieldsDOMSelector);
throw new Error(errors.sortingField2HTMLFail); let htmlContent=fields[this._datasFieldNb].innerHTML;
else 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) // "!" car je sais que sortingElement existe, puisque je viens de le créer !
{ {
const fields=document.querySelectorAll(this._fieldsDOMSelector); e.preventDefault();
let htmlContent=fields[this._datasFieldNb].innerHTML; let order=field._order ;
htmlContent="<a href='#freeDatas2HTMLSorting"+this._datasFieldNb+"' id='freeDatas2HTMLSorting"+this._datasFieldNb+"'>"+htmlContent+"</a>"; if(order === undefined || order === "desc")
fields[this._datasFieldNb].innerHTML=htmlContent; field._order="asc";
const sortingElement=document.getElementById("freeDatas2HTMLSorting"+this._datasFieldNb), field=this; else
sortingElement!.addEventListener("click", function(e) // je sais que sortingElement existe, car je viens de le créer ! field._order="desc";
{ field._converter.datasSortedField=field;
e.preventDefault(); field._converter.refreshView();
let order=field._order ; });
if(order === undefined || order === "desc")
field._order="asc";
else
field._order="desc";
field._converter.datasSortedField=field;
field._converter.refreshView();
});
}
} }
} }

2
src/errors.js
View File

@ -33,7 +33,7 @@ module.exports =
selectorSelectedIndexNotFound: "La valeur sélectionnée n'a pas été trouvée dans la liste des champs.", 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.", 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.", sortingFieldNeedDatas: "Le création d'un champ de classement nécessite la transmission de la liste des champs.",
sortingFieldFieldNotFound: "Au moins un des champs devant permettre de classer les données n'existe pas dans le fichier.", sortingFieldNotFound: "Au moins un des champs devant permettre de classer les données n'existe pas dans le fichier.",
sortingFieldsNbFail: "Le nombre de champs trouvés dans le DOM ne correspond pas à celui des données à classer.", 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.", sortingFieldsNotInHTML: "Les champs pouvant servir à classer les données n'ont pas été trouvés dans le DOM.",
}; };

101
tests/sortingFieldSpec.ts
View File

@ -1,5 +1,4 @@
import { FreeDatas2HTML, Selector, SortingField } from "../src/freeDatas2HTML"; import { FreeDatas2HTML, SortingField } from "../src/freeDatas2HTML";
const errors=require("../src/errors.js"); const errors=require("../src/errors.js");
const fixtures=require("./fixtures.js"); const fixtures=require("./fixtures.js");
@ -28,15 +27,15 @@ 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("CSV"); converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1.csv" }); // Pas lancé converter.run() donc les données n'ont pas été parsées :
expect(() => { return new SortingField(converter, 0); }).toThrowError(errors.sortingFieldNeedDatas); expect(() => { return new SortingField(converter, 0); }).toThrowError(errors.sortingFieldNeedDatas);
}); });
it("Doit générer une erreur, si initialisé avec un numéro du champ de classement n'existant pas dans les données.", () => it("Doit générer une erreur, si initialisé avec un numéro du champ de classement n'existant pas dans les données.", () =>
{ {
expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldFieldNotFound); expect(() => { return new SortingField(converter, 9); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldFieldNotFound); expect(() => { return new SortingField(converter, -1); }).toThrowError(errors.sortingFieldNotFound);
expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldFieldNotFound); expect(() => { return new SortingField(converter, 1.1); }).toThrowError(errors.sortingFieldNotFound);
}); });
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.", () =>
@ -44,7 +43,7 @@ describe("Test des champs de classement.", () =>
expect(() => { return new SortingField(converter, 0, "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 trouvés dans le DOM pour les entêtes est différent du nombre de champs des données.", () =>
{ {
expect(() => { return new SortingField(converter, 0, "td"); }).toThrowError(errors.sortingFieldsNbFail); expect(() => { return new SortingField(converter, 0, "td"); }).toThrowError(errors.sortingFieldsNbFail);
}); });
@ -57,8 +56,8 @@ describe("Test des champs de classement.", () =>
}); });
}); });
describe("Création des liens permettant de classer les données affichées.", () => 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.", () => it("Doit générer un élement lien <a> avec comme ancre l'élément HTML correspondant au nom de la colonne.", () =>
{ {
let sortingField=new SortingField(converter, 0); let sortingField=new SortingField(converter, 0);
@ -69,62 +68,36 @@ describe("Test des champs de classement.", () =>
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.", () => it("Lorsqu'ils sont cliqués, doivent transmettre l'information au convertisseur + lui demander d'actualiser l'affichage.", () =>
{
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 () =>
{ {
let sortingField=new SortingField(converter, 2); const sortingField1=new SortingField(converter, 2);
sortingField.field2HTML(); sortingField1.field2HTML();
converter.datasSortingFields=[sortingField]; const sortingField2=new SortingField(converter, 3);
let getTHLink=document.querySelector("th a") as HTMLElement; sortingField2.field2HTML();
getTHLink.click();// tri ascendant converter.datasSortingFields=[sortingField1, sortingField2];
let getTR=document.querySelectorAll("tr");
let txtDatasViewsElt=getTR[1].innerHTML; let getTHLinks=document.querySelectorAll("th a") as NodeListOf<HTMLElement>;
expect(txtDatasViewsElt).toEqual("<td>89</td><td>Actinium</td><td>Ac</td><td>Actinide</td><td>≤ 1</td>"); spyOn(converter, "refreshView");
getTHLink.click();// tri descendant getTHLinks[0].click();// tri ascendant 1er champ
getTR=document.querySelectorAll("tr"); expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
txtDatasViewsElt=getTR[1].innerHTML; expect(sortingField1.converter.datasSortedField.order).toEqual("asc");
expect(txtDatasViewsElt).toEqual("<td>40</td><td>Zirconium</td><td>Zr</td><td>Métal de transition</td><td>&gt; 100000</td>"); expect(converter.refreshView).toHaveBeenCalledTimes(1);
getTHLink.click();// de nouveau ascendant
getTR=document.querySelectorAll("tr"); getTHLinks[1].click();// tri ascendant mais sur le second champ
txtDatasViewsElt=getTR[1].innerHTML; expect(sortingField2.converter.datasSortedField).toEqual(sortingField2);
expect(txtDatasViewsElt).toEqual("<td>89</td><td>Actinium</td><td>Ac</td><td>Actinide</td><td>≤ 1</td>"); expect(sortingField2.converter.datasSortedField.order).toEqual("asc");
expect(converter.refreshView).toHaveBeenCalledTimes(2);
getTHLinks[0].click();// tri descendant sur le 1er champ
expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
expect(sortingField1.converter.datasSortedField.order).toEqual("desc");
expect(converter.refreshView).toHaveBeenCalledTimes(3);
getTHLinks[0].click();// de nouveau ascendant
expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
expect(sortingField1.converter.datasSortedField.order).toEqual("asc");
expect(converter.refreshView).toHaveBeenCalledTimes(4);
}); });
});
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 }];
let sortingField=new SortingField(converter, 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>");
});
});
}); });