import React from "react"
import Modal from "react-modal"
import sinon from "sinon"

import { Alert } from "../../web/static/js/components/alert"

describe("Alert component", () => {
  let wrapper
  let portalToModalContent
  let modalBody

  const alertConfig = {
    headerText: "Some ole header text",
    BodyComponent: () => <p>"Some completely different body text"</p>,
  }

  let actions = {}

  beforeEach(() => {
    wrapper = mountWithConnectedSubcomponents(<Alert config={alertConfig} actions={actions} />)
    portalToModalContent = wrapper.find(Modal).instance().portal
    modalBody = portalToModalContent.content
  })

  it("renders the headerText in a header text component", () => {
    expect(modalBody.querySelector(".header").textContent).to.match(/some ole header text/i)
  })

  it("renders the headerText in a header text component", () => {
    expect(
      modalBody.querySelector(".content").textContent
    ).to.match(/some completely different body text/i)
  })

  it("renders the button autofocused", () => {
    const button = modalBody.querySelector("button")
    expect(button).to.deep.equal(document.activeElement)
  })

  describe("clicking the button", () => {
    beforeEach(() => {
      actions = { clearAlert: sinon.spy() }

      wrapper = mountWithConnectedSubcomponents(<Alert config={alertConfig} actions={actions} />)
      portalToModalContent = wrapper.find(Modal).instance().portal
      modalBody = portalToModalContent.content
      modalBody.querySelector("button").click()
    })

    it("invokes the clearAlert action", () => {
      expect(actions.clearAlert).called
    })
  })
})

@@ -394,16 +394,68 @@
 s = %7B%7D%0A%0A
+  describe(%22when passed an alert config%22, () =%3E %7B%0A  
   before
@@ -463,24 +463,26 @@
 ach(() =%3E %7B%0A
+  
     wrapper 
@@ -565,24 +565,26 @@
 ns%7D /%3E)%0A    
+  
 portalToModa
@@ -632,24 +632,26 @@
 .portal%0A    
+ 
+ 
 modalBody = 
@@ -679,22 +679,26 @@
 content%0A
+  
   %7D)%0A%0A
+  
   it(%22re
@@ -747,32 +747,34 @@
 onent%22, () =%3E %7B%0A
+  
     expect(modal
@@ -842,38 +842,42 @@
  header text/i)%0A
+  
   %7D)%0A%0A
+  
   it(%22renders th
@@ -926,24 +926,26 @@
 () =%3E %7B%0A    
+  
 expect(%0A    
@@ -942,24 +942,26 @@
 pect(%0A      
+ 
+ 
 modalBody.qu
@@ -992,24 +992,26 @@
 textContent%0A
+  
     ).to.mat
@@ -1055,20 +1055,24 @@
 xt/i)%0A  
+ 
+ 
 %7D)%0A%0A
+  
   it(%22re
@@ -1114,16 +1114,18 @@
 %3E %7B%0A    
+  
 const bu
@@ -1165,16 +1165,18 @@
 utton%22)%0A
+  
     expe
@@ -1224,24 +1224,26 @@
 lement)%0A
+  
   %7D)%0A%0A  
 describe
@@ -1230,24 +1230,26 @@
 )%0A    %7D)%0A%0A  
+ 
+ 
 describe(%22cl
@@ -1272,32 +1272,34 @@
 n%22, () =%3E %7B%0A    
+  
 beforeEach(() =%3E
@@ -1307,16 +1307,18 @@
 %7B%0A      
+ 
+ 
 actions 
@@ -1348,16 +1348,18 @@
 py() %7D%0A%0A
+  
       wr
@@ -1446,32 +1446,34 @@
 ions%7D /%3E)%0A      
+  
 portalToModalCon
@@ -1509,32 +1509,34 @@
 stance().portal%0A
+  
       modalBody 
@@ -1568,24 +1568,26 @@
 ntent%0A      
+  
 modalBody.qu
@@ -1616,28 +1616,32 @@
 click()%0A    
+ 
+ 
 %7D)%0A%0A
+  
     it(%22invo
@@ -1678,24 +1678,26 @@
  =%3E %7B%0A      
+  
 expect(actio
@@ -1718,16 +1718,25 @@
 .called%0A
+      %7D)%0A
     %7D)%0A 

Add proper nesting to alert.jsx test