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

describe('Test the /structures page', () => {
  beforeEach(() => {
    // visit the structures index
    cy.visit('/structures?parent=12097')

    // wait for the page to be completely loaded
    cy.get('.structure-card', { timeout: 8000 })
    cy.contains('Nos Structures adhérentes')
  })

  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.get('button').contains('Liste').click()

    // map shall not be visible in list view
    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', () => {

    // extract the number of results
    let resultsCount
    cy.get('.results-count').then(($elt) => {
      resultsCount = parseInt($elt.text().match(/(\d+) \w+/gi))

      // switch to list mode
      cy.get('button').contains('Liste').click()

      // number of results shall be the same
      cy.get('.results-count')
        .invoke('text')
        .should('match', new RegExp('' + resultsCount + / \w+/.source, 'gi'))
    })
  })

  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)

    // Filter everything (there should be 0 results after that)
    cy.getByLabel('input', 'Quoi ?').type('some long text that will hopefully match no result')
    cy.get('button').contains('Rechercher').click()

    // Without any results, only page 1 is displayed
    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', () => {
    // extract the number of results, it should be greater than 0
    let resultsCount
    cy.get('.results-count').then(($elt) => {
      resultsCount = parseInt($elt.text().match(/(\d+) \w+/gi))
      expect(resultsCount).to.be.gt(0)
    })

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

    cy.get('.results-count').invoke('text').should('match', /0 \w+/gi)
  })

  it('The results shall be filtered according to the text filter', () => {
    cy.getByLabel('input', 'Quoi ?').type('tambour')
    cy.get('button').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__title').contains(/Strasbourg \(\d{5}\)/).click()
    cy.get('button').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__title').contains('Big band').click()
    cy.get('button').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__title').contains('01 - Ain').click()
    cy.get('button').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__title').contains('CONFÉDÉRATION MUSICALE DE FRANCE').click()
    cy.get('button').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.get('button').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+/)
  })
})