text: /// <reference types="Cypress" />
  
  describe("Central de Atendimento", () => {
    const seconds = 3000
    beforeEach(() => {
      cy.visit("./src/index.html");
    });
  
    it("Verifica título da aplicação", () => {
      //cy.tittle verifica a tag "title" contida no HTML;
      cy.title().should("be.equal", "Central de Atendimento ao Cliente TAT");
    });
  
    it("Preenche os campos obrigatórios", () => {
      const longText =
        "Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste, Teste";
  
      cy.clock()
  
      cy.get("#firstName").type("Leo");
      cy.get("#lastName").type("Barroso");
      cy.get("#email").type("leobarrosoadm@gmail.com");
      cy.get("#open-text-area").type(longText, { delay: 0 });
      cy.contains("button", "Enviar").click();
  
      cy.get(".success").should("be.visible");
  
      cy.tick(seconds)
      cy.get(".success").should("not.be.visible");
  
    });
  
    it("Exibe mensagem de erro ao submeter o formulário com um email com formatação inválida", () => {
      cy.clock()
      cy.get("#firstName").type("Leo");
      cy.get("#lastName").type("Barroso");
      cy.get("#email").type("leobarrosoadmgmail.com");
      cy.get("#open-text-area").type("Mensagem de teste.");
      cy.contains("button", "Enviar").click();
      
      cy.get(".error").should("be.visible");
  
      cy.tick(seconds)
      cy.get(".error").should("not.be.visible");
  
    });
  
    it("Campo telefone continua vazio quando preenchido com valor não-numérico", () => {
      cy.get("#phone").type("abcdefghij").should("have.value", "");
    });
  
    it("Exibe mensagem de erro quando o telefone se torna obrigatório mas não é preenchido antes do envio do formulário", () => {
      cy.clock()
      cy.get("#firstName").type("Leo");
      cy.get("#lastName").type("Barroso");
      cy.get("#email").type("leobarrosoadm@gmail.com");
      cy.get("#phone-checkbox").check();
      cy.get("#open-text-area").type("Mensagem de teste.");
      cy.contains("button", "Enviar").click();
  
      cy.get(".error").should("be.visible");
  
      cy.tick(seconds)
      cy.get(".error").should("not.be.visible");
  
    });
  
    it("Preenche e limpa os campos nome, sobrenome, email e telefone", () => {
      cy.get("#firstName")
        .type("Leo")
        .should("have.value", "Leo")
        .clear()
        .should("have.value", "");
  
      cy.get("#lastName")
        .type("Barroso")
        .should("have.value", "Barroso")
        .clear()
        .should("have.value", "");
  
      cy.get("#email")
        .type("leobarrosoadm@gmail.com")
        .should("have.value", "leobarrosoadm@gmail.com")
        .clear()
        .should("have.value", "");
  
      cy.get("#phone")
        .type("5585988889999")
        .should("have.value", "5585988889999")
        .clear()
        .should("have.value", "");
    });
  
    it("Exibe mensagem de erro ao submeter o formulário sem preencher os campos obrigatórios", () => {
      cy.clock()
      cy.contains('button', 'Enviar').click();
      
      cy.get(".error").should("be.visible");
      
      cy.tick(seconds)
      cy.get(".error").should("not.be.visible");
  
    });
  
    it("Envia o formuário com sucesso usando um comando customizado", () => {
      cy.clock()
      cy.preencherSubmeterFormulario();
  
      cy.get(".success").should("be.visible");
  
      cy.tick(seconds)
      cy.get(".success").should("not.be.visible")
    });
  
    it("Seleciona um produto (YouTube) por seu texto", () => {
      cy.get("#product").select("YouTube").should("have.value", "youtube");
    });
  
    it("Seleciona um produto (Mentoria) por seu valor (value)", () => {
      cy.get("#product").select("mentoria").should("have.value", "mentoria");
    });
  
    it("Seleciona um produto (Blog) por seu índice", () => {
      cy.get("#product").select(4).should("have.value", "youtube");
    });
  
    it('Marca o tipo de atendimento "Feedback"', () => {
      cy.get('input[type="radio"][value="feedback"]')
        .check()
        .should("have.value", "feedback");
    });
  
    it("Marca cada tipo de atendimento", () => {
      cy.get('input[type="radio"]')
        .should("have.length", 3)
        .each(($radio) => {
          cy.wrap($radio).check();
          cy.wrap($radio).should("be.checked");
        });
    });
  
    it("Marca ambos checkboxes, depois desmarca o último", () => {
      cy.get('input[type="checkbox"]')
        .check()
        .should("be.checked")
        .last()
        .uncheck()
        .should("not.be.checked");
    });
  
    it("Seleciona um arquivo da pasta fixtures", () => {
      cy.get('input[type="file"]')
        .should("not.have.value")
        .selectFile("./cypress/fixtures/example.json")
        .should(($input) => {
          expect($input[0].files[0].name).to.equal("example.json");
        });
    });
  
    it("Seleciona um arquivo simulando um drag-and-drop", () => {
      cy.get('input[type="file"]')
        .should("not.have.value")
        .selectFile("./cypress/fixtures/example.json", { action: "drag-drop" })
        .should(($input) => {
          expect($input[0].files[0].name).to.equal("example.json");
        });
    });
  
    it("Seleciona um arquivo utilizando uma fixture para a qual foi dada um alias", () => {
      cy.fixture("example.json").as("sampleFile");
      cy.get('input[type="file"]')
        .selectFile("@sampleFile")
        .should(($input) => {
          expect($input[0].files[0].name).to.equal("example.json");
        });
    });
  
    it("Verifica que a política de privacidade abre em outra aba sem a necessidade de um clique", () => {
      cy.get("#privacy a").should("have.attr", "target", "_blank");
    });
  
    it("acessa a página da política de privacidade removendo o target e então clicanco no link", () => {
      cy.get("#privacy a")
          .invoke("removeAttr", "target")
          .click();
  
      cy.contains('Talking About Testing').should('be.visible')
    });
  
    it('exibe e esconde as mensagens de sucesso e erro usando o .invoke', () => {
      cy.get('.success')
        .should('not.be.visible')
        .invoke('show')
        .should('be.visible')
        .and('contain', 'Mensagem enviada com sucesso.')
        .invoke('hide')
        .should('not.be.visible')
      cy.get('.error')
        .should('not.be.visible')
        .invoke('show')
        .should('be.visible')
        .and('contain', 'Valide os campos obrigatórios!')
        .invoke('hide')
        .should('not.be.visible')
    })
  
    it('preenche a area de texto usando o comando invoke', () => {
      const longText = Cypress._.repeat('0123456789', 20)
  
      cy.get('#open-text-area')
        .invoke('val', longText)
        .should('have.value', longText)
    })
  
    it('Faz uma requisição HTTP', () => {
      cy.request('https://cac-tat.s3.eu-central-1.amazonaws.com/index.html')
        .should(function(response) {
          const { status, statusText, body} = response
          expect(status).to.equal(200)
          expect(statusText).to.equal('OK')
          expect(body).to.include('CAC TAT')
        })
    })
  
    it.only('Encontrar o gato', () => {
      cy.get('#cat')
        .invoke('show')
        .should('be.visible')
      cy.get('#title')
        .invoke('text', 'CAT TAT')
      cy.get('#subtitle')
        .invoke('text', 'Eu 💖 gatos!')
    })
  
  });
  