import { shallow } from 'enzyme'

describe('Enzyme Shallow', () => {
  it('App should have title equals to Todos', () => {
    let app = shallow(<App />)
    expect(app.find('h1').text()).to.equal('Todos')
  })
}

import { render } from 'enzyme'

describe('Enzyme Render', () => {
  it('Todo item should not have todo-done class', () => {
    let app = render(<App />)
    expect(app.find('.todo-done').length).to.equal(0)
  })
})

import { mount } from 'enzyme'

describe('Enzyme Mount', () => {
  it('should delete Todo when click button', () => {
    let app = mount(<App />)
    let todoLength = app.find('li').length
    app.find('button.delete').at(0).simulate('click')
    expect(app.find('li').length).to.equal(todoLength - 1)
  })
})

it('simulates click events', () => {
  const onButtonClick = sinon.spy()
  const wrapper = shallow(<Foo onButtonClick={onButtonClick} />)
  wrapper.find('button').simulate('click')
  expect(onButtonClick.calledOnce).to.be.true
})

/* CSS Selector */
wrapper.find('.foo') //class syntax
wrapper.find('input') //tag syntax
wrapper.find('#foo') //id syntax
wrapper.find('[htmlFor="foo"]') //prop syntax

/* Component Constructor */
wrapper.find(MyComponent)
MyComponent.displayName = 'MyComponent'
wrapper.find('MyComponent')

/* Object Property Selector */
const wrapper = mount(
  <div>
    <span foo={3} bar={false} title="baz" />
  </div>,
)

wrapper.find({ foo: 3 })
wrapper.find({ bar: false })
wrapper.find({ title: 'baz' })