import React from 'react';
import { mount } from 'enzyme';

import Accordion from '../src/Accordion';
import Card from '../src/Card';

describe('<Accordion>', () => {
  it('should output a div', () => {
    mount(<Accordion />).assertSingle('div');
  });

  it('should not add any new elements', () => {
    let wrapper = mount(
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle eventKey="0" />
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body text</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>,
    );

    wrapper.children().should.have.length(1);

    let card = wrapper.find('.card');

    card.children().should.have.length(2);
  });

  it('should only have one card collapsed', () => {
    let wrapper = mount(
      <Accordion defaultActiveKey="0">
        <Card>
          <Card.Header>
            <Accordion.Toggle eventKey="0" />
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body text</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle eventKey="1" />
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body text</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>,
    );
    let collapses = wrapper.find('.accordion-collapse');

    collapses.forEach((collapse, i) => {
      collapse
        .props()
        .className.endsWith('show')
        .should.equal(i === 0);
    });
  });
  it('should fire the onClick callback only once', () => {
    let onClickSpy = sinon.spy();
    mount(
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle onClick={onClickSpy} eventKey="0" />
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body text</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle onClick={onClickSpy} eventKey="1" />
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body text</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>,
    )
      .find('.card-header')
      .at(0)
      .find('button')
      .simulate('click');

    expect(onClickSpy).to.be.calledOnce;
  });

  it('Should have div as default component', () => {
    mount(<Accordion />).assertSingle('div');
  });
});

@@ -266,523 +266,24 @@
 uld 
-not add any new elements', () =%3E %7B%0A    let wrapper = mount(%0A      %3CAccordion%3E%0A        %3CCard%3E%0A          %3CCard.Header%3E%0A            %3CAccordion.Toggle eventKey=%220%22 /%3E%0A          %3C/Card.Header%3E%0A          %3CAccordion.Collapse eventKey=%220%22%3E%0A            %3CCard.Body%3Ebody text%3C/Card.Body%3E%0A          %3C/Accordion.Collapse%3E%0A        %3C/Card%3E%0A      %3C/Accordion%3E,%0A    );%0A%0A    wrapper.children().should.have.length(1);%0A%0A    let card = wrapper.find('.card');%0A%0A    card.children().should.have.length(2);%0A  %7D);%0A%0A  it('should only have one
+only have second
  car
@@ -308,18 +308,20 @@
 %3E %7B%0A    
-le
+cons
 t wrappe
@@ -895,18 +895,20 @@
  );%0A    
-le
+cons
 t collap
@@ -931,18 +931,17 @@
 nd('
-.a
+A
 ccordion
 -col
@@ -940,10 +940,9 @@
 dion
--c
+C
 olla
@@ -966,70 +966,42 @@
 pses
-.forEach((collapse, i) =%3E %7B%0A      collapse%0A        .props
+%0A      .at(0)%0A      .getDOMNode
 ()%0A
-  
     
@@ -1017,24 +1017,30 @@
 ame.
-endsWith
+should.include
 ('show')
 %0A   
@@ -1039,46 +1039,99 @@
 ow')
+;
 %0A    
-    .should.equal(i === 0);%0A    %7D
+collapses%0A      .at(1)%0A      .getDOMNode()%0A      .className.should.include('collapse'
 );%0A 
@@ -1135,16 +1135,17 @@
 ;%0A  %7D);%0A
+%0A
   it('sh
@@ -1153,43 +1153,59 @@
 uld 
-fire the onClick callback only once
+expand next card and collapse current card on click
 ', (
@@ -1215,18 +1215,20 @@
 %3E %7B%0A    
-le
+cons
 t onClic
@@ -1246,24 +1246,40 @@
 n.spy();%0A   
+ const wrapper =
  mount(%0A    
@@ -1853,16 +1853,29 @@
 %3E,%0A    )
+;%0A    wrapper
 %0A      .
@@ -1884,15 +1884,13 @@
 nd('
-.card-h
+CardH
 eade
@@ -1895,33 +1895,33 @@
 der')%0A      .at(
-0
+1
 )%0A      .find('b
@@ -1963,15 +1963,8 @@
     
-expect(
 onCl
@@ -1973,12 +1973,15 @@
 kSpy
-).to
+.should
 .be.
@@ -1996,47 +1996,234 @@
 ce;%0A
-  %7D
+%0A    const collapses = wrapper.find('AccordionCollapse'
 );%0A%0A  
-it('Should have div as default
+  collapses%0A      .at(0)%0A      .getDOMNode()%0A      .className.should.include('collapse');%0A%0A    // Enzyme doesn't really provide support for async utilities%0A    // on
  com
@@ -2232,61 +2232,378 @@
 nent
-', () =%3E %7B%0A    mount(%3CAccordion /%3E).assertSingle('div
+s, but in an ideal setup we should be testing for%0A    // this className to be %60show%60 after the collapsing animation is done%0A    // (which is possible in %60@testing-library%60 via %60waitForElement%60).%0A    // https://testing-library.com/docs/dom-testing-library/api-async#waitforelement%0A    collapses%0A      .at(1)%0A      .getDOMNode()%0A      .className.should.include('collapsing
 ');%0A

change accordion spec to test closer to design