zarm-web

import React from 'react'; import { render, mount } from 'enzyme'; import toJson from 'enzyme-to-json'; import Swipe from '../index'; describe('Swipe', () => { it('renders normal Swipe correctly', () => { const wrapper = render( <Swipe speed={1000}> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); expect(toJson(wrapper)).toMatchSnapshot(); }); it('renders vertical Swipe correctly', () => { const wrapper = render( <Swipe speed={1000} direction="top"> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); expect(toJson(wrapper)).toMatchSnapshot(); }); it('autoPlays correctly', () => { jest.useFakeTimers(); const wrapper = mount( <Swipe speed={1000}> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); jest.runOnlyPendingTimers(); expect(wrapper.state('activeIndex')).toEqual(1); }); it('behaves correctly on touchstart', () => { const wrapper = mount( <Swipe speed={1000}> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); wrapper.find('.ui-swipe-items').simulate('touchStart', { touches: [ { pageX: 10, }, ], }); expect(wrapper.state('pointStart')).toEqual(10); }); it('behaves correctly on touchmove', () => { const wrapper = mount( <Swipe speed={1000}> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); wrapper.find('.ui-swipe-items') .simulate('touchMove', { touches: [ { pageX: 100, }, ], }); expect(wrapper.state('pointEnd')).toEqual(100); }); it('behaves correctly on touchend', () => { const wrapper = mount( <Swipe speed={1000}> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.baidu.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E4%BD%B3%E4%B9%90%E9%94%AD.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.taobao.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> <div className="ui-swipe-item"> <div className="ui-swipe-pic"> <a href="http://www.qq.com"> <img alt="" src="http://map.baidu.com/fwmap/upload/h5v1.2-%E9%A6%96%E9%A1%B5banner-%E9%BB%84%E6%B2%B9%E8%96%AF%E7%89%87-0.png" /> </a> </div> </div> </Swipe> ); wrapper.find('.ui-swipe-items') .simulate('touchStart', { touches: [ { pageX: 0, }, ], }) .simulate('touchMove', { touches: [ { pageX: 100, }, ], }) .simulate('touchEnd'); expect(wrapper.state('activeIndex')).toEqual(-1); }); });