switch.test.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import Switch from '../index';
  2. // import { shallow, mount } from 'enzyme';
  3. // import Enzyme, { shallow, render, mount } from 'enzyme';
  4. // import Adapter from 'enzyme-adapter-react-16';
  5. // Enzyme.configure({
  6. // adapter: new Adapter()
  7. // });
  8. import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
  9. import { wrap } from 'lodash';
  10. let CHECKED_CLS = `.${BASE_CLASS_PREFIX}-switch-checked`;
  11. describe('Switch', () => {
  12. it('switch with custom className & style', () => {
  13. const wrapper = mount(<Switch className="test" style={{ color: 'red' }} />);
  14. expect(wrapper.hasClass('test')).toEqual(true);
  15. expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
  16. wrapper
  17. .find('input')
  18. .first()
  19. .simulate('change', {
  20. target: {
  21. checked: true,
  22. },
  23. });
  24. wrapper.unmount();
  25. });
  26. it('switch checkedText / unchekcedText', () => {
  27. const checkSwitch = mount(<Switch checkedText='semi' uncheckedText='design' checked={true} />);
  28. const unCheckSwitch = mount(<Switch checkedText='semi' uncheckedText='design' />);
  29. expect(checkSwitch.find('.semi-switch-checked-text').text()).toEqual('semi');
  30. expect(unCheckSwitch.find('.semi-switch-unchecked-text').text()).toEqual('design');
  31. });
  32. it('switch disabled when props.disabled', () => {
  33. const wrapperUnchecked = mount(<Switch disabled />);
  34. expect(wrapperUnchecked.exists(`.semi-switch-disabled`)).toEqual(true);
  35. expect(wrapperUnchecked.state('nativeControlDisabled')).toEqual(true);
  36. wrapperUnchecked.setProps({ disabled: false });
  37. wrapperUnchecked.update();
  38. expect(wrapperUnchecked.exists(`.semi-switch-disabled`)).toEqual(false);
  39. expect(wrapperUnchecked.state('nativeControlDisabled')).toEqual(false);
  40. const wrapperChecked = mount(<Switch disabled defaultChecked />);
  41. expect(wrapperChecked.exists(CHECKED_CLS)).toEqual(true);
  42. expect(wrapperChecked.exists(`.semi-switch-disabled`)).toEqual(true);
  43. expect(wrapperChecked.state('nativeControlDisabled')).toEqual(true);
  44. wrapperChecked.setProps({ disabled: false })
  45. wrapperChecked.update();
  46. expect(wrapperChecked.exists(`.semi-switch-disabled`)).toEqual(false);
  47. expect(wrapperChecked.state('nativeControlDisabled')).toEqual(false);
  48. });
  49. it('switch onChange', () => {
  50. let onChange = () => {};
  51. let spyChange = sinon.spy(onChange);
  52. const wrapper = mount(<Switch onChange={spyChange} />);
  53. let input = wrapper.find('input').first();
  54. let event = { target: { checked: true }};
  55. input.simulate('change', event)
  56. expect(spyChange.calledOnce).toEqual(true);
  57. expect(spyChange.calledWithMatch(true)).toEqual(true);
  58. });
  59. it('switch onMouseEnter / onMouseLeave', () => {
  60. let onMouseEnter = () => {};
  61. let onMouseLeave = () => {};
  62. let spyEnter = sinon.spy(onMouseEnter);
  63. let spyLeave = sinon.spy(onMouseLeave);
  64. const wrapper = mount(<Switch defaultChecked onMouseEnter={spyEnter} onMouseLeave={spyLeave} />);
  65. const div = wrapper.find('div.semi-switch').first();
  66. div.simulate('mouseEnter', {});
  67. expect(spyEnter.calledOnce).toEqual(true);
  68. div.simulate('mouseLeave', {});
  69. expect(spyLeave.calledOnce).toEqual(true);
  70. });
  71. it('switch size', () => {
  72. const largeSwitch = shallow(<Switch size='large' />);
  73. const defaultSwitch = shallow(<Switch size='default' />);
  74. const smallSwitch = shallow(<Switch size='small' />);
  75. expect(smallSwitch.exists('.semi-switch-small')).toEqual(true);
  76. expect(defaultSwitch.exists('.semi-switch-small')).toEqual(false);
  77. expect(defaultSwitch.exists('.semi-switch-large')).toEqual(false);
  78. expect(largeSwitch.exists('.semi-switch-large')).toEqual(true);
  79. });
  80. it('switch controlled mode', () => {
  81. let checked = false;
  82. let onChange = val => {
  83. checked = val;
  84. };
  85. const spy = sinon.spy(onChange);
  86. let wrapper = mount(<Switch checked={checked} onChange={spy} />);
  87. expect(wrapper.exists(CHECKED_CLS)).toEqual(false);
  88. wrapper
  89. .find('input')
  90. .first()
  91. .simulate('change', {
  92. target: {
  93. checked: true,
  94. },
  95. });
  96. expect(spy.calledOnce).toBe(true);
  97. expect(checked === true).toEqual(true);
  98. // !!!important,在回调函数中修改了props.checke的值,不会在已monted的wrapper中生效,需要手动更新一次
  99. wrapper.setProps({ checked: true });
  100. // 更新了props之后,实际上在Symbol(enzyme.__node__).rendered.instance.className已有对应的CHECKED_CLS存在,
  101. // 但不知道为啥,必须手动触发一次update之后,调用exists后才是true,很奇怪
  102. wrapper.update();
  103. expect(wrapper.exists(CHECKED_CLS)).toEqual(true);
  104. });
  105. it('switch with loading', () => {
  106. const wrapperLoading = shallow(<Switch loading />);
  107. expect(wrapperLoading.exists(`.${BASE_CLASS_PREFIX}-switch-loading`)).toEqual(true);
  108. const wrapper = shallow(<Switch />);
  109. expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-switch-loading`)).toEqual(false);
  110. });
  111. });