frames/test/cypress/integration/structures/index.spec.js

describe('Test the /structures page', () => {
  beforeEach(() => {
    cy.visit('/structures?parent=12097')
    cy.contains('Nos Structures adhérentes', { timeout: 10000 })
  })

  it('Map, filters, and all results shall display by default', () => {
    // leaflet map is visible and was correctly instanciated
    cy.get('#map', { timeout: 8000 })
      .should('be.visible')
      .children('.leaflet-pane')

    // an input exists with the label 'Quoi ?'
    cy.getByLabel('input', 'Quoi ?')
      .should('be.enabled')

    // an input exists with the label 'Où ?'
    cy.getByLabel('input', 'Où ?')
      .should('be.enabled')

    // a select exists with the label 'Type'
    cy.getByLabel('input', 'Type')
      .should('be.enabled')

    // a select exists with the label 'Département'
    cy.getByLabel('input', 'Département')
      .should('be.enabled')

    // a select exists with the label 'Fédération'
    cy.getByLabel('input', 'Fédération')
      .should('be.enabled')

    // a select exists with the label 'Distance'
    cy.getByLabel('input', 'Distance')
      .should('be.enabled')

    // there are results displayed
    cy.get('.structure-card').should('exist')
  })

  it('If view is set on list mode, map shall be hidden', () => {
    cy.contains('Liste').click()

    cy.get('#map', { timeout: 8000 })
      .should('not.be.visible')

    // results should still be visible
    cy.get('.structure-card')
      .should('have.length', 8)
  })

  it('When list view is activated, displayed results and filters shall stay the same', () => {
    cy.getByLabel('input', 'Quoi ?').type('some long text that will hopefully match no result')
    cy.contains('Rechercher').click()

    cy.get('.structure-card')
      .should('have.length', 0)

    cy.contains('Liste').click()

    cy.get('.structure-card')
      .should('have.length', 0)
  })

  it('The results shall be paginated', () => {
    // 8 results are displayed (a whole page)
    cy.get('.structure-card')
      .should('have.length', 8)

    // 8 pages are displayed in the pagination bar (max authorized)
    cy.get('.v-pagination')
      .find('button')
      .filter((_, elt) => { return elt && elt.innerText.match(/\d+/) })
      .should('have.length.gte', 2)

    cy.getByLabel('input', 'Quoi ?').type('some long text that will hopefully match no result')
    cy.contains('Rechercher').click()

    cy.get('.v-pagination')
      .find('button')
      .filter((_, elt) => { return elt && elt.innerText.match(/\d+/) })
      .should('have.length', 1)
  })

  it('The number of results shall match the current search', () => {
    cy.get('.results-count')
      .invoke('text')
      .should('match', /\d+ Résultats/)

    cy.getByLabel('input', 'Quoi ?').type('some long text that will hopefully match no result')
    cy.contains('Rechercher').click()

    cy.get('.results-count').should('have.text', '0 Résultats')
  })

  it('The results shall be filtered according to the text filter', () => {
    cy.getByLabel('input', 'Quoi ?').type('tambour')
    cy.contains('Rechercher').click()

    cy.get('.structure-card .title')
      .invoke('text')
      .then((s) => { return s.toLowerCase() })
      .should('match', /.*tambour.*/m)
  })

  it('The results shall be filtered according to the location filter', () => {
    cy.getByLabel('input:visible', 'Où ?').type('strasbourg')
    cy.get('.v-list-item div').contains(/Strasbourg \(\d{5}\)/).click()
    cy.contains('Rechercher').click()

    // we check that there is not a postal code that is not like '67xxx'
    // note: we're forced to make this negative assertion, because some structures
    //       could have no postal code displayed. So we consider the test passed if
    //       there is no postal code that would'nt have a 6 in first position
    //       and a 7 in second position
    cy.get('.structure-card .postalCode')
      .should('not.match', /.*[012345789]\d{4}.*/)
      .and('not.match', /.*\d[012345789]\d{3}.*/)
  })

  it('The results shall be filtered according to the practice filter', () => {
    cy.getByLabel('input:visible', 'Type').click()
    cy.get('.v-list-item').contains('Big band').click()
    cy.contains('Rechercher').click()

    cy.get('.structure-card').should('contain.text', 'Big band')
  })

  it('The results shall be filtered according to the department filter', () => {
    cy.getByLabel('input:visible', 'Département').click()
    cy.get('.v-list-item').contains('01 - Ain').click()
    cy.contains('Rechercher').click()

    // we check that there is not a postal code that is not like '01xxx' (@see note from location filter test)
    cy.get('.structure-card .postalCode')
      .should('not.match', /.*[123456789]\d{4}.*/)
      .and('not.match', /.*\d[023456789]\d{3}.*/)
  })

  it('The results shall be filtered according to the federation filter', () => {
    cy.getByLabel('input:visible', 'Fédération').click()
    cy.get('.v-list-item').contains('CONFÉDÉRATION MUSICALE DE FRANCE').click()
    cy.contains('Rechercher').click()

    // I don't know how to test this...
    cy.get('.structure-card').should('have.length.gte', 1)
  })

  it('The results shall be filtered according to the map bounds', () => {
    // dragging the map there should lead in the middle of the atlantic, where we have no clients (for now)
    cy.get('#map', { timeout: 6000 })
      .dragMapFromCenter({ xMoveFactor: 2, yMoveFactor: 0 })

    cy.get('.structure-card')
      .should('have.length', 0)
  })

  it('Reinitialize shall clear each filter field, display all results, and reset map bounds (in both map and list view)', () => {
    cy.getByLabel('input', 'Quoi ?').type('some long text that will hopefully match no result')
    cy.getByLabel('input:visible', 'Où ?').type('vesoul')
    cy.get('.v-list-item div').contains(/Vesoul \(\d{5}\)/).click()
    cy.getByLabel('input:visible', 'Type').click()
    cy.get('.v-list-item').contains('Big band').click()
    cy.getByLabel('input:visible', 'Département').click()
    cy.get('.v-list-item').contains('01 - Ain').click()
    cy.getByLabel('input:visible', 'Fédération').click()
    cy.get('.v-list-item').contains('CONFÉDÉRATION MUSICALE DE FRANCE').click()
    cy.getByLabel('.v-select__selections', 'Distance').click()
    cy.get('.v-list-item').contains('10km').click()

    // no structure will match these criterias
    cy.contains('Rechercher').click()
    cy.get('.structure-card')
      .should('have.length', 0)

    cy.contains('Réinitialiser').click()

    cy.getByLabel('input', 'Quoi ?').should('not.have.value', 'foo')
    cy.getByLabel('input:visible', 'Où ?').should('not.have.value', 'bar')
    cy.getByLabel('input:visible', 'Type').should('not.have.value', 'Big band')
    cy.getByLabel('input:visible', 'Département').should('not.have.value', '01 - Ain')
    cy.getByLabel('input:visible', 'Fédération').should('not.have.value', 'CONFÉDÉRATION MUSICALE DE FRANCE')
    cy.getByLabel('input:visible', 'Distance').should('not.have.value', '10km')

    cy.get('.structure-card')
      .should('have.length.gt', 0)
  })

  it('The see-more button of a structure card shall lead to the details page of the structure', () => {
    cy.get('.structure-card').contains('Voir plus').click()
    cy.url().should('match', /.*structures\/\d+/)
  })
})