/* global describe, it, beforeEach, cy */
/* eslint-disable-next-line */
import React from 'react'
import fakeData from '../../js/data/report.json'
import sampleRubric from '../../public/sample-rubric'

describe('Provide Feedback', function () {
  beforeEach(() => {
    // cypress currently doesn't handle window.fetch so:
    // diable browser's fetch this way the fetch polyfill is used which uses XHR
    cy.on('window:before:load', win => {
      win.fetch = null
    })

    cy.server()

    // Return the fake report data
    cy.route({
      method: 'GET',
      url: '/',
      response: fakeData
    })

    // Fake report data references sample-rubric.json file, so it has to be stubbed too
    cy.route({
      method: 'GET',
      url: '/sample-rubric.json',
      response: sampleRubric
    })

    // On first load portal-report does a PUT request to save some report settings
    cy.route({
      method: 'PUT',
      url: '/',
      response: {}
    })

    let fakeServer = 'http://portal.test'
    cy.visit(`http://localhost:8080/?reportUrl=${encodeURIComponent(fakeServer)}`)
  })

  it('Is visible', function () {
    cy.get('.question [data-cy=feedbackButton]').should('be.visible')
  })

  it('Shows dialog when clicked', function () {
    cy.get('.question [data-cy=feedbackButton]').first().click()
    // do I need to wait here?
    cy.get('[data-cy=feedbackBox]').should('be.visible')
  })
})

@@ -31,20 +31,28 @@
 Each, cy
+, expect
  */%0A
-
 /* eslin
@@ -966,24 +966,48 @@
 e: %7B%7D%0A    %7D)
+.as('putReportSettings')
 %0A%0A    let fa
@@ -1357,89 +1357,1213 @@
     
-// do I need to wait here?%0A    cy.get('%5Bdata-cy=feedbackBox%5D').should('be.visible
+cy.get('.feedback-panel').should('be.visible')%0A  %7D)%0A%0A  it('Sends feedback to the server', function () %7B%0A    // This is the first put that happens when the UI is initialized%0A    cy.wait('@putReportSettings')%0A    cy.get('.question %5Bdata-cy=feedbackButton%5D').first().click()%0A    cy.get('%5Bdata-cy=feedbackBox%5D').first().type('Your answer was great!')%0A    // This is the second put that happens when the user finishes typing%0A    cy.wait('@putReportSettings')%0A    cy.get('@putReportSettings').should((xhr) =%3E %7B%0A      // Newer versions of Chai have a 'nested' chained method that would simplify this%0A      expect(xhr.requestBody).to.have.property('feedback')%0A      expect(xhr.requestBody.feedback).to.have.property('feedback', 'Your answer was great!')%0A    %7D)%0A  %7D)%0A%0A  it('Shows error if feedback fails to send', function () %7B%0A    // This is the first put that happens when the UI is initialized%0A    cy.wait('@putReportSettings')%0A%0A    cy.route(%7B%0A      method: 'PUT',%0A      url: '/',%0A      status: 403,%0A      response: %7B%7D%0A    %7D)%0A%0A    cy.get('.question %5Bdata-cy=feedbackButton%5D').first().click()%0A    cy.get('%5Bdata-cy=feedbackBox%5D').first().type('Your answer was great!')%0A    cy.contains('Connection to server failed
 ')%0A 

add tests for server error status