Skip to content

Commit

Permalink
test: filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@Myllaume
Myllaume committed Jun 15, 2024
1 parent a1b7477 commit f4a9567
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 59 deletions.
11 changes: 4 additions & 7 deletions e2e/batch/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,16 @@ record_types:
undefined:
stroke: "#eeeeee"
fill: "#eeeeee"
concept:
personne:
stroke: "#d7191c"
fill: "#d7191c"
note:
œuvre:
stroke: "#fdae61"
fill: "#fdae61"
personne:
stroke: "#ffffbf"
fill: "#ffffbf"
objet:
institution:
stroke: "#abd9e9"
fill: "#abd9e9"
idée:
otlet:
stroke: "#2c7bb6"
fill: "#2c7bb6"
link_types:
Expand Down
83 changes: 69 additions & 14 deletions e2e/batch/data.json
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,82 @@
[
{
"title": "Concept",
"type": ["concept"],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida nulla id aliquet commodo."
"title": "Paul Otlet",
"type": ["otlet", "personne"],
"titre": "Fondateur du Mundaneum",
"begin": "1868",
"end": "1944",
"pays": "Belgique",
"content": "Paul Otlet est la tête pensante du Mundaneum, ce lieu de rassemblement de la connaissance qui héberge notamment le Répertoire Bibliographique Universel. Il a consacré toute sa vie à développer cet organisme et le réseau de personnalités et d'institutions qui l'entourent.\n",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Paul_Otlet"
},
{
"title": "Note",
"type": ["note"],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida nulla id aliquet commodo."
"title": "Edouard Otlet",
"type": ["personne"],
"titre": "Père de Paul Otlet",
"begin": "1842",
"end": "1907",
"pays": "Belgique",
"content": "Père de Paul Otlet. Entrepreneur investi dans les technologies des transports, il fait fortune grâce au tramway et à travers différentes entreprises qu'il exploite, notamment au Congo belge. Sa mauvaise gestion et une crise économique en 1900 auront raison de son entreprise.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/%C3%89douard_Otlet"
},
{
"title": "Robert Pagès",
"type": ["personne"],
"titre": "Intellectuel français, théoricien du document",
"begin": "1919",
"end": "2007",
"pays": "France",
"content": "Robert Pagès est connu comme homme de science, psychologue social au CNRS, et ancien résistant. Depuis 2017, il est redécouvert par les sciences de l’information et de la communication du fait de ses écrits contemporains de ceux de Suzanne Briet, notamment son concept d'auto-document.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Robert_Pag%C3%A8s"
},
{
"title": "Henri La Fontaine",
"type": ["personne"],
"titre": "Homme politique, co-fondateur du Mundaneum",
"begin": "1854",
"end": "1943",
"pays": "Belgique",
"content": "Henri La Fontaine est un homme politique socialiste. En 1913, il obtient le Prix Nobel de la Paix. Avec Paul Otlet, il collabore à un vaste réseau intellectuel en faveur de la connaissance et milite autour d'associations internationales pour la paix et pour les droits des femmes.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Henri_La_Fontaine"
},
{
"title": "Melvil Dewey",
"type": ["personne"],
"titre": "Bibliothécaire, auteur de la Classification décimale",
"begin": "1851",
"end": "1931",
"pays": "Etats-Unis",
"content": "Mevil Dewey est un bibliothécaire américain. Avec la classification décimale, il révolutionne l'organisation des bibliothèques aux Etats-Unis et crée des structures professionnelles d'apprentissage pour les bibliothécaires. Il crée notamment l'ALA (American Library Association) ainsi que le Library Journal",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Melvil_Dewey"
},
{
"title": "Personne",
"title": "Le Corbusier",
"type": ["personne"],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida nulla id aliquet commodo."
"titre": "Architecte",
"begin": "1887",
"end": "1965",
"pays": "France, Suisse",
"content": "Charles-Edouard Jeanneret, dit le Corbusier, est un architecte représentatif du mouvement moderne. Son style est largement dominé par le fonctionnalisme. Il échange avec Otlet au sujet des projets de cité mondiale. Le projet est d'ailleurs un temps envisagé du côté de Genève.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Le_Corbusier"
},
{
"title": "Objet",
"type": ["objet"],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida nulla id aliquet commodo."
"title": "CDU",
"type": ["œuvre"],
"titre": "Classification décimale universelle",
"begin": "1895",
"end": null,
"pays": "Belgique",
"content": "La classification décimale universelle (CDU) est un système de classification de bibliothèque développé par Paul Otlet et Henri La Fontaine à l’Institut international de bibliographie en 1895, à partir de la classification décimale de Dewey (CDD), et avec l’autorisation de Melvil Dewey. Elle a connu plusieurs éditions depuis 1905. Elle a été traduite en 40 langues.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Classification_d%C3%A9cimale_universelle"
},
{
"title": "Idée",
"type": ["idée"],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida nulla id aliquet commodo."
"title": "Mundaneum",
"type": ["institution"],
"titre": "Le projet phare de Paul Otlet",
"begin": "1920",
"end": null,
"pays": "Belgique",
"content": "Le Mundaneum est le centre intellectuel créé en 1920 au Palais du Cinquantenaire (Bruxelles). Ses activités de coopération internationale sont marquées par l'université internationale et l'encyclopédie didactique d'un nouveau genre.",
"lien_wikipedia": "https://fr.wikipedia.org/wiki/Mundaneum"
}
]
101 changes: 63 additions & 38 deletions e2e/filters.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,95 @@
const data = require('./batch/data.json');

describe('Filters', () => {
beforeEach(() => {
cy.visit('temp/batch.html');
cy.get('#types-form').as('filtersContainer');
});

const filters = ['concept', 'note', 'personne', 'objet', 'idée'];
/** @param {string[]} names */
function assertFiltersAreChecked(names) {
cy.get('@filtersContainer')
.find('.filter input:checked')
.should('have.length', names.length)
.each((elt) => {
expect(elt.attr('name')).to.be.oneOf(names);
});
}

const filters = ['œuvre', 'personne', 'institution', 'otlet'];

it('should display filter for each type', () => {
filters.forEach((filterName) => {
cy.get('#types-form').contains(filterName).should('be.visible');
cy.get('@filtersContainer').contains(filterName).should('be.visible');
});
});

it('should check all filters if no URL params', () => {
assertFiltersAreChecked(filters);
});

it('should check only filters from URL params', () => {
cy.visit('temp/batch.html?filters=personne-otlet');
assertFiltersAreChecked(['personne', 'otlet']);
});

it('should uncheck input on filter label click', () => {
cy.get('#types-form .filter').first().as('filter');
cy.get('@filtersContainer').find('.filter').first().as('filter');
cy.get('@filter').find('input').should('be.checked');
cy.get('@filter').click();
cy.get('@filter').find('input').should('not.be.checked');
});

it('should toggle filter toggle node visibility', () => {
cy.get('[data-node="concept"]').should('be.visible');
cy.get('#types-form .filter')
.first()
.as('filter')
.find('.label')
.should('have.text', 'concept');
cy.get('@filter').click();
cy.get('[data-node="concept"]').should('not.be.visible');
cy.get('@filter').click();
cy.get('[data-node="concept"]').should('be.visible');
});
/** @param {string} name */
function clickOnFilter(name) {
cy.get('@filtersContainer').contains(name).click();
}

it.skip('should check only filter in search params if set', () => {
cy.visit('temp/batch.html?filters=concept,note');
const allTitles = data.map(({ title }) => title);

cy.get('#types-form input:checked').should('have.length', 2);
['concept', 'note'].forEach((filterName) => {
cy.get(`#types-form .filter:contains("${filterName}") input`).should('is.checked');
});
cy.shouldGraphHasNodes(allTitles);

clickOnFilter('œuvre');
assertFiltersAreChecked(['personne', 'institution', 'otlet']);

cy.shouldGraphHasNodes(allTitles.filter((title) => title !== 'CDU'));

clickOnFilter('œuvre');
assertFiltersAreChecked(['personne', 'œuvre', 'institution', 'otlet']);

cy.shouldGraphHasNodes(allTitles);

clickOnFilter('personne');
assertFiltersAreChecked(['œuvre', 'institution', 'otlet']);

cy.shouldGraphHasNodes(['Mundaneum', 'CDU', 'Paul Otlet']);

clickOnFilter('otlet');
assertFiltersAreChecked(['œuvre', 'institution']);

cy.shouldGraphHasNodes(['Mundaneum', 'CDU']);
});

describe('with alt key', () => {
it('should uncheck all inputs but not clicked one if alt key is pressed', () => {
let clickedFilterName;
assertFiltersAreChecked(filters);

cy.get('#types-form .filter input:checked').should('have.length', filters.length);
cy.get('@filtersContainer').contains('personne').click({ altKey: true });

const itemToClick = cy.get('#types-form .filter').first();
itemToClick
.find('.label')
.click({ altKey: true })
.then((elt) => {
const name = elt.find('input').attr('name');
clickedFilterName = name;
});

cy.get('#types-form .filter input:checked').should('have.length', 1);
assertFiltersAreChecked(['personne']);
});

it('should check all inputs if alt key is pressed on a second click on same filter', () => {
const itemToClick = cy.get('#types-form .filter').first();
itemToClick.find('.label').click({ altKey: true }).click({ altKey: true });
cy.get('#types-form .filter').each((elt) => {
const input = elt.find('input');
expect(input.is(':checked')).to.be.true;
});
assertFiltersAreChecked(filters);

cy.get('@filtersContainer').contains('personne').click({ altKey: true });

assertFiltersAreChecked(['personne']);

cy.get('@filtersContainer').contains('personne').click({ altKey: true });

assertFiltersAreChecked(filters);
});
});
});

0 comments on commit f4a9567

Please sign in to comment.