import * as React from "react";
import {shallow} from 'enzyme';
import {findByTestAttr} from "utils/testUtils";
import Modal from './index';

const defaultProps = {
  visible: false
};
const setup = (props = {}, children?: React.ReactChildren) => {
  const setupProps = {...defaultProps, ...props};
  if (children) {
    return shallow(<Modal {...setupProps}/>)
  } else {
    return shallow(<Modal {...setupProps}>{children}</Modal>)
  }
};



describe('Modal', () => {

  it('renders without error', () => {
    const wrapper = setup({visible: true});
    const component = findByTestAttr(wrapper, 'wen-modal');
    expect(component.length).toBe(1);
    wrapper.unmount();
  });

  it('hides with `visible` props is false', () => {
    const wrapper = setup();
    const component = findByTestAttr(wrapper, 'wen-modal');
    expect(component.length).toBe(0);
  });

  it('inserts children in correct position', ()=> {
    const wrapper = shallow(
      <Modal visible={true}>
        <div className="insert-component"></div>
      </Modal>
    );
    const modalBody = findByTestAttr(wrapper, 'wen-modal-body');
    expect(modalBody.children.length).not.toBe(0);
    const insertComponent = findByTestAttr(wrapper, 'insert-component');
    expect(insertComponent.length).toBe(1);
  });

  it('accept extra classNames ', () => {
    const wrapper = setup({
      visible: true,
      className: 'test'
    });
   const modal = findByTestAttr(wrapper, 'wen-modal');
   expect(modal.hasClass('test')).toBe(true);
  });

  it('calls onCancel when click "取消" button', () => {
    const fn = jest.fn();
    const wrapper = setup({
      visible: true,
      onCancel: fn
    });
    wrapper.find('.wen-modal-cancel-button').simulate('click');
    expect(fn.mock.calls.length).toBe(1);

  });

  it('calls onOk when click "确定" button', () => {
    const fn = jest.fn();
    const wrapper = setup({
      visible: true,
      onOk: fn
    });
    wrapper.find('.wen-modal-ok-button').simulate('click');
    expect(fn.mock.calls.length).toBe(1);
  });

  describe('`width` props', () => {
    it ('can received correct `width` props', () => {
      const wrapper = setup({
        visible: true,
        width: '100px'
      });
      const modal = findByTestAttr(wrapper, 'wen-modal');
      expect(modal.prop('style')).toHaveProperty('width', '100px')
    });

    it ('can set number of string to "px"', () => {
      const wrapper = setup({
        visible: true,
        width: '200'
      });
      const modal = findByTestAttr(wrapper, 'wen-modal');
      expect(modal.prop('style')).toHaveProperty('width', '200px')
    });
  });
});






