293 lines
14 KiB
TypeScript
293 lines
14 KiB
TypeScript
|
import { FreeDatas2HTML, Selector } from "../src/freeDatas2HTML";
|
||
|
|
|
||
|
|
const errors=require("../src/errors.js");
|
||
|
|
const fixtures=require("./fixtures.js");
|
||
|
|
|
||
|
|
describe("Test des filtres de données", () =>
|
||
|
|
{
|
||
|
|
let converter: FreeDatas2HTML;
|
||
|
|
let selector: Selector;
|
||
|
|
|
||
|
|
beforeEach( async () =>
|
||
|
|
{
|
||
|
|
document.body.insertAdjacentHTML("afterbegin", fixtures.datasViewEltHTML);
|
||
|
|
converter=new FreeDatas2HTML();
|
||
|
|
converter.datasViewElt={ id:"datas" };
|
||
|
|
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
|
||
|
|
await converter.parse();
|
||
|
|
selector=new Selector(converter);
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach( () =>
|
||
|
|
{
|
||
|
|
document.body.removeChild(document.getElementById("fixture"));
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Test des données reçues pour configurer un filtre.", () =>
|
||
|
|
{
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
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 s'il n'y a aucun élément trouvé dans le DOM pour l'id fourni.", () =>
|
||
|
|
{
|
||
|
|
expect(() => { return converter.datasViewElt={ id:"dontExist" }; }).toThrowError(errors.elementNotFound+"dontExist");
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si un élément est trouvé dans le DOM pour l'id fourni, doit l'accepter.", () =>
|
||
|
|
{
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
let myContainer=document.getElementById("selector1");
|
||
|
|
expect(selector.datasViewElt).toEqual({ id:"selector1", "eltDOM": myContainer });
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Doit générer une erreur, si le numéro de champ fourni n'existe pas dans les données fournies.", () =>
|
||
|
|
{
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si le numéro de champ fourni est valide, il doit être accepté.", () =>
|
||
|
|
{
|
||
|
|
expect(() => { return selector.datasFieldNb=1; }).not.toThrowError();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si un séparateur vide est fourni pour un filtre, il doit être ignoré.", () =>
|
||
|
|
{
|
||
|
|
selector.separator="";
|
||
|
|
expect(selector.separator).toBeUndefined();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Création et action des sélecteurs permettant de filter les données affichées.", () =>
|
||
|
|
{
|
||
|
|
beforeEach( async () =>
|
||
|
|
{
|
||
|
|
document.body.insertAdjacentHTML("afterbegin", fixtures.datasViewEltHTML);
|
||
|
|
converter=new FreeDatas2HTML();
|
||
|
|
converter.datasViewElt={ id:"datas" };
|
||
|
|
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
|
||
|
|
await converter.parse();
|
||
|
|
selector=new Selector(converter);
|
||
|
|
});
|
||
|
|
|
||
|
|
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.selector2HTML();
|
||
|
|
expect(document.getElementById("selector2").innerHTML).toEqual(fixtures.selector2HTML);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si des valeurs vides sont présentes dans une champ utilisé pour un sélecteur, elles doivent être ignorées.", async () =>
|
||
|
|
{
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si un séparateur est fourni, les valeurs distinctes extraites de ce champ doivent le prendre en compte.", async () =>
|
||
|
|
{
|
||
|
|
converter.datasSourceUrl="http://localhost:9876/datas/datas1+tagsfield.csv";
|
||
|
|
await converter.parse();
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
selector.datasFieldNb=5;
|
||
|
|
selector.separator="|";
|
||
|
|
selector.selector2HTML();
|
||
|
|
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithSeparator);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si une fonction spécifique est fournie pour le champ utilisé pour ce filtre, elle doit être prise en compte.", () =>
|
||
|
|
{
|
||
|
|
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 }];
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
selector.datasFieldNb=4;
|
||
|
|
selector.separator="|";
|
||
|
|
selector.selector2HTML();
|
||
|
|
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithFunction);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Doit retourner false, si une donnée testée ne correspond pas à la valeur sélectionnée dans la liste.", () =>
|
||
|
|
{
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
selector.datasFieldNb=3;
|
||
|
|
selector.selector2HTML();
|
||
|
|
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
|
||
|
|
selectElement.value="4";
|
||
|
|
let data2Test= {
|
||
|
|
"Z (numéro atomique)" : "53",
|
||
|
|
"Élément": "Iode",
|
||
|
|
"Symbole": "I",
|
||
|
|
"Famille": "Halogene", // manque un accent :)
|
||
|
|
"Abondance des éléments dans la croûte terrestre (μg/k)": "> 1 et < 100 000",
|
||
|
|
};
|
||
|
|
expect(selector.dataIsOk(data2Test)).toBeFalse();
|
||
|
|
let data2Test2= { // le champ à filtrer est manquant
|
||
|
|
"Z (numéro atomique)" : "53",
|
||
|
|
"Élément": "Iode",
|
||
|
|
"Symbole": "I",
|
||
|
|
"Abondance des éléments dans la croûte terrestre (μg/k)": "> 1 et < 100 000",
|
||
|
|
};
|
||
|
|
expect(selector.dataIsOk(data2Test2)).toBeFalse();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Doit retourner true, si une donnée testée correspond pas à la valeur sélectionnée dans la liste.", () =>
|
||
|
|
{
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
selector.datasFieldNb=3;
|
||
|
|
selector.selector2HTML();
|
||
|
|
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
|
||
|
|
selectElement.value="4";
|
||
|
|
let data2Test= {
|
||
|
|
"Z (numéro atomique)" : "53",
|
||
|
|
"Élément": "Iode",
|
||
|
|
"Symbole": "I",
|
||
|
|
"Famille": "Halogène",
|
||
|
|
"Abondance des éléments dans la croûte terrestre (μg/k)": "> 1 et < 100 000",
|
||
|
|
};
|
||
|
|
expect(selector.dataIsOk(data2Test)).toBeTrue();
|
||
|
|
});
|
||
|
|
|
||
|
|
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",
|
||
|
|
"Élément": "Yode",
|
||
|
|
"Symbole": "L",
|
||
|
|
"Famille": "Halogene",
|
||
|
|
"Abondance des éléments": "> 1 et < 100 000",
|
||
|
|
};
|
||
|
|
expect(selector.dataIsOk(data2Test)).toBeTrue();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Action des sélecteurs en corrélation avec le convertisseur.", () =>
|
||
|
|
{
|
||
|
|
beforeEach( async () =>
|
||
|
|
{
|
||
|
|
document.body.insertAdjacentHTML("afterbegin", fixtures.datasViewEltHTML);
|
||
|
|
converter=new FreeDatas2HTML();
|
||
|
|
converter.datasViewElt={ id:"datas" };
|
||
|
|
converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
|
||
|
|
await converter.parse();
|
||
|
|
selector=new Selector(converter);
|
||
|
|
});
|
||
|
|
|
||
|
|
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";
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor1Select);
|
||
|
|
selectElement.value="0";
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTML);
|
||
|
|
});
|
||
|
|
|
||
|
|
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;
|
||
|
|
selector2.selector2HTML();
|
||
|
|
converter.datasSelectors=[selector, selector2];
|
||
|
|
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
|
||
|
|
selectElement.value="2";
|
||
|
|
selectElement=document.getElementById("freeDatas2HTML_selector2") as HTMLInputElement;
|
||
|
|
selectElement.value="1";
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2Select);
|
||
|
|
selectElement.value="4";
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLFor2SelectNone);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Si un séparateur est fourni pour un sélecteur, lorsque qu'une valeur y est sélectionnée, toutes les lignes de données la contenant doivent être affichées.", async () =>
|
||
|
|
{
|
||
|
|
converter.datasSourceUrl="http://localhost:9876/datas/datas1+tagsfield.csv";
|
||
|
|
await converter.parse();
|
||
|
|
selector.datasViewElt={ id:"selector1"};
|
||
|
|
selector.datasFieldNb=5;
|
||
|
|
selector.separator="|";
|
||
|
|
selector.selector2HTML();
|
||
|
|
converter.datasSelectors=[selector];
|
||
|
|
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
|
||
|
|
selectElement.value="11"; //="Exemple10" retournant une seule ligne
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelectTagsField);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Les sélecteurs 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.selector2HTML();
|
||
|
|
let selector2=new Selector(converter);
|
||
|
|
selector2.datasViewElt={ id:"selector2"};
|
||
|
|
selector2.datasFieldNb=5;
|
||
|
|
selector2.separator="|";
|
||
|
|
selector2.selector2HTML();
|
||
|
|
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'));
|
||
|
|
let txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelectTagsField);
|
||
|
|
selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
|
||
|
|
selectElement.value="1"; // doit garder la ligne
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelectTagsField);
|
||
|
|
selectElement.value="3"; // doit supprimer la ligne restant
|
||
|
|
selectElement.dispatchEvent(new Event('change'));
|
||
|
|
txtDatasViewsElt=document.getElementById("datas").innerHTML;
|
||
|
|
expect(txtDatasViewsElt).toEqual("<table><thead><tr><th>Z (numéro atomique)</th><th>Élément</th><th>Symbole</th><th>Famille</th><th>Abondance des éléments dans la croûte terrestre (μg/k)</th><th>Étiquettes</th></tr></thead><tbody></tbody></table>");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
});
|