/// <reference types="cypress" />

context('Querying', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/querying');
  });

  // The most commonly used query is 'cy.get()', you can
  // think of this like the '$' in jQuery

  it('cy.get() - query DOM elements', () => {
    // https://on.cypress.io/get

    cy.get('#query-btn').should('contain', 'Button');

    cy.get('.query-btn').should('contain', 'Button');

    cy.get('#querying .well>button:first').should('contain', 'Button');
    //              ↲
    // Use CSS selectors just like jQuery

    cy.get('[data-test-id="test-example"]').should('have.class', 'example');

    // 'cy.get()' yields jQuery object, you can get its attribute
    // by invoking `.attr()` method
    cy.get('[data-test-id="test-example"]')
      .invoke('attr', 'data-test-id')
      .should('equal', 'test-example');

    // or you can get element's CSS property
    cy.get('[data-test-id="test-example"]').invoke('css', 'position').should('equal', 'static');

    // or use assertions directly during 'cy.get()'
    // https://on.cypress.io/assertions
    cy.get('[data-test-id="test-example"]')
      .should('have.attr', 'data-test-id', 'test-example')
      .and('have.css', 'position', 'static');
  });

  it('cy.contains() - query DOM elements with matching content', () => {
    // https://on.cypress.io/contains
    cy.get('.query-list').contains('bananas').should('have.class', 'third');

    // we can pass a regexp to `.contains()`
    cy.get('.query-list').contains(/^b\w+/).should('have.class', 'third');

    cy.get('.query-list').contains('apples').should('have.class', 'first');

    // passing a selector to contains will
    // yield the selector containing the text
    cy.get('#querying').contains('ul', 'oranges').should('have.class', 'query-list');

    cy.get('.query-button').contains('Save Form').should('have.class', 'btn');
  });

  it('.within() - query DOM elements within a specific element', () => {
    // https://on.cypress.io/within
    cy.get('.query-form').within(() => {
      cy.get('input:first').should('have.attr', 'placeholder', 'Email');
      cy.get('input:last').should('have.attr', 'placeholder', 'Password');
    });
  });

  it('cy.root() - query the root DOM element', () => {
    // https://on.cypress.io/root

    // By default, root is the document
    cy.root().should('match', 'html');

    cy.get('.query-ul').within(() => {
      // In this within, the root is now the ul DOM element
      cy.root().should('have.class', 'query-ul');
    });
  });

  it('best practices - selecting elements', () => {
    // https://on.cypress.io/best-practices#Selecting-Elements
    cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
      // Worst - too generic, no context
      cy.get('button').click();

      // Bad. Coupled to styling. Highly subject to change.
      cy.get('.btn.btn-large').click();

      // Average. Coupled to the `name` attribute which has HTML semantics.
      cy.get('[name=submission]').click();

      // Better. But still coupled to styling or JS event listeners.
      cy.get('#main').click();

      // Slightly better. Uses an ID but also ensures the element
      // has an ARIA role attribute
      cy.get('#main[role=button]').click();

      // Much better. But still coupled to text content that may change.
      cy.contains('Submit').click();

      // Best. Insulated from all changes.
      cy.get('[data-cy=submit]').click();
    });
  });
});