import Autocomplete from './autocomplete';
import countries from '../data/countries';

describe('Test the autocomplete functionality', () => {
  beforeEach(() => {
    cy.mount(<Autocomplete countries={countries} />);
  })

  it('check everything is working in ui', () => {
    cy.get('[data-cy="heading"]').contains('Search your country:');
    cy.get('input[type="text"]').should('have.value', '');
    cy.get('[data-cy="suggestion-list"]').should('not.exist');
  })

  it('check filter is working', () => {
    cy.get('input[type="text"]').type('no');
    cy.get('[data-cy="suggestion-list"]').should('be.visible').as('suggestList');
    cy.get('@suggestList').should('have.length', 1);
  })


  it('check selections are working', () => {
    cy.get('input[type="text"]').as('inputText');
    cy.get('@inputText').type('no').type(Cypress._.repeat('{downArrow}{downArrow}', 1));
    cy.get('[data-cy="suggestion-list"] li:nth-child(3)').should('have.class', 'active');
    cy.get('@inputText').type(Cypress._.repeat('{upArrow}', 1));
    cy.get('[data-cy="suggestion-list"] li:nth-child(2)').should('have.class', 'active');
    cy.get('[data-cy="suggestion-list"] li:nth-child(2)').click();
    cy.get('input[type="text"]').should('have.length', 1);
    cy.get('[data-cy="suggestion-list"]').should('not.exist');
  })

})