Skip to content

Commit

Permalink
feat(swipe-action): 完善测试案例
Browse files Browse the repository at this point in the history
  • Loading branch information
@SzHeJason
SzHeJason committed Oct 19, 2018
1 parent a6c00df commit 350f100
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 22 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@
"webpack": "^4.16.5",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.3",
"yaml-loader": "^0.5.0"
"yaml-loader": "^0.5.0",
"simulant": "^0.2.2"
}
}
30 changes: 16 additions & 14 deletions src/components/swipe-action/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ export default class AtSwipeAction extends AtComponent {
constructor () {
super(...arguments)

this.endValue = 0
this.startX = null
this.maxOffsetSize = 0
this.isTouching = false
this.endValue = 0
this.maxOffsetSize = 0

this.state = {
offsetSize: 0,
Expand All @@ -31,28 +31,19 @@ export default class AtSwipeAction extends AtComponent {

if (isClose && isOpened) {
this._reset()
this.handleClosed()
}
}

_reset () {
this.endValue = 0
this.isTouching = false
this.handleClosed()
this.setState({
isOpened: false,
offsetSize: 0
offsetSize: 0,
isOpened: false
})
}

handleTouchStart = e => {
const { clientX } = e.touches[0]

if (this.props.disabled) return

this.startX = clientX
this.isTouching = true
}

handleOpened = () => {
if (_isFunction(this.props.onOpened) && !this.state.isOpened) {
this.props.onOpened()
Expand All @@ -65,6 +56,15 @@ export default class AtSwipeAction extends AtComponent {
}
}

handleTouchStart = e => {
const { clientX } = e.touches[0]

if (this.props.disabled) return

this.startX = clientX
this.isTouching = true
}

handleTouchEnd = () => {
this.isTouching = false

Expand Down Expand Up @@ -113,11 +113,13 @@ export default class AtSwipeAction extends AtComponent {

handleClick = (item, index, ...arg) => {
const { onClick, autoClose } = this.props

if (_isFunction(onClick)) {
onClick(item, index, ...arg)
}
if (autoClose) {
this._reset()
this.handleClosed()
}
}

Expand Down
279 changes: 272 additions & 7 deletions src/components/swipe-action/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,58 @@
import Nerv, { findDOMNode } from 'nervjs'
import { renderToString } from 'nerv-server'
import { Simulate, renderIntoDocument } from 'nerv-test-utils'
import { renderIntoDocument } from 'nerv-test-utils'
import simulant from 'simulant'

import { View } from '@tarojs/components'

import AtSwipeAction from '../../../.temp/components/swipe-action/index'

const MAX_OFFSET_SIZE = 101

const Simulate = {}
const EVENTS = [
'keyDown',
'keyPress',
'keyUp',
'focus',
'blur',
'click',
'contextMenu',
'doubleClick',
'drag',
'dragEnd',
'dragEnter',
'dragExit',
'dragLeave',
'dragOver',
'dragStart',
'drop',
'mouseDown',
'mouseEnter',
'mouseLeave',
'mouseMove',
'mouseOut',
'mouseOver',
'mouseUp',
'change',
'input',
'submit',
'touchCancel',
'touchEnd',
'touchMove',
'touchStart',
'load',
'error',
'animationStart',
'animationEnd',
'animationIteration',
'transitionEnd'
]
EVENTS.forEach(event => {
Simulate[event] = (node, mock) =>
simulant.fire(node, event.toLowerCase(), mock)
})

const OPTIONS = [
{
text: '取消',
Expand Down Expand Up @@ -39,21 +86,239 @@ describe('SwipeAction Snap', () => {
})
})

describe('SwipeAction Behavior ', () => {
describe('SwipeAction Swipe Behavior', () => {
const onClick = jest.fn()
const onClosed = jest.fn()
const onOpened = jest.fn()

const component = renderIntoDocument(
<AtSwipeAction
options={OPTIONS}
onClick={onClick}
onClosed={onClosed}
onOpened={onOpened}
>
<View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>
)
const componentDom = findDOMNode(component, 'at-swipe-action')
component.maxOffsetSize = MAX_OFFSET_SIZE

beforeEach(() => {
onClick.mockReset()
onClosed.mockReset()
onOpened.mockReset()
component._reset()
})

it('SwipeAction onClick', () => {
const onClick = jest.fn()
const optionDom = componentDom.querySelector('.at-swipe-action__option')

Simulate.click(optionDom)

expect(onClick).toBeCalled()
})

it('SwipeAction Swipe Right', () => {
// 一开始向右滑动是没有效果的
expect(component.isTouching).toBeFalsy()
Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})
expect(component.isTouching).toBeTruthy()

Simulate.touchMove(componentDom, {
touches: [{ clientX: 100 }]
})

component.forceUpdate()
expect(component.state.offsetSize).toEqual(0)

Simulate.touchEnd(componentDom)
expect(onClosed).not.toBeCalled()
expect(onOpened).not.toBeCalled()
expect(component.state.isOpened).toBeFalsy()
expect(component.state.offsetSize).toEqual(0)
})

it('SwipeAction Swipe Left', () => {
// 一开始向左滑动 直到最大时将停止
expect(component.isTouching).toBeFalsy()
Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})
expect(component.isTouching).toBeTruthy()

Simulate.touchMove(componentDom, {
touches: [{ clientX: -110 }]
})

component.forceUpdate()
expect(component.state.offsetSize).toEqual(-110)

Simulate.touchEnd(componentDom)
component.forceUpdate()

expect(onOpened).toBeCalled()
expect(onClosed).not.toBeCalled()
expect(component.state.isOpened).toBeTruthy()
expect(component.state.offsetSize).toEqual(-MAX_OFFSET_SIZE)
})

it('SwipeAction Completed Swipe Action', () => {
// 开始向左滑懂
Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})

Simulate.touchMove(componentDom, {
touches: [{ clientX: -100 }]
})

component.forceUpdate()
expect(component.state.offsetSize).toEqual(-100)

// 向左滑动结束
Simulate.touchEnd(componentDom)
component.forceUpdate()

expect(onOpened).toBeCalled()
expect(component.state.isOpened).toBeTruthy()
expect(component.endValue).toEqual(-MAX_OFFSET_SIZE)
expect(component.state.offsetSize).toEqual(-MAX_OFFSET_SIZE)

// 开始向右滑动
Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})

Simulate.touchMove(componentDom, {
touches: [{ clientX: 100 }]
})

component.forceUpdate()
expect(component.state.offsetSize).toEqual(-1)

// 向右滑动结束
Simulate.touchEnd(componentDom)
component.forceUpdate()
expect(onClosed).toBeCalled()
expect(component.endValue).toEqual(0)
expect(component.state.isOpened).toBeFalsy()
expect(component.state.offsetSize).toEqual(0)
})
})

describe('SwipeAction Props', () => {
it('SwipeAction Disabled', () => {
const component = renderIntoDocument(
<AtSwipeAction options={OPTIONS} onClick={onClick}>
<AtSwipeAction disabled options={OPTIONS}>
<View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>
)
const componentDom = findDOMNode(component, 'at-swipe-action')
component.maxOffsetSize = MAX_OFFSET_SIZE

const optionDom = componentDom.querySelector('.at-swipe-action__option')
Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})

Simulate.click(optionDom)
Simulate.touchMove(componentDom, {
touches: [{ clientX: -110 }]
})
component.forceUpdate()
expect(component.state.offsetSize).toEqual(0)
})

expect(onClick).toBeCalled()
it('SwipeAction Disabled', () => {
const component = renderIntoDocument(
<AtSwipeAction disabled options={OPTIONS}>
<View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>
)
const componentDom = findDOMNode(component, 'at-swipe-action')
component.maxOffsetSize = MAX_OFFSET_SIZE

Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})

Simulate.touchMove(componentDom, {
touches: [{ clientX: -110 }]
})
component.forceUpdate()
expect(component.state.offsetSize).toEqual(0)
})

it('SwipeAction AutoClose', () => {
const component = renderIntoDocument(
<AtSwipeAction autoClose options={OPTIONS}>
<View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>
)
const componentDom = findDOMNode(component, 'at-swipe-action')
const swipeActionButtonDom = componentDom.querySelector(
'.at-swipe-action__option'
)
component.maxOffsetSize = MAX_OFFSET_SIZE

Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})
component.forceUpdate()

Simulate.touchMove(componentDom, {
touches: [{ clientX: -110 }]
})
component.forceUpdate()

Simulate.touchEnd(componentDom)
component.forceUpdate()

expect(component.state.isOpened).toBeTruthy()
expect(component.state.offsetSize).toEqual(-MAX_OFFSET_SIZE)

Simulate.click(swipeActionButtonDom)
component.forceUpdate()

expect(component.endValue).toEqual(0)
expect(component.isTouching).toBeFalsy()
expect(component.state.isOpened).toBeFalsy()
expect(component.state.offsetSize).toEqual(0)
})

it('SwipeAction IsClose', () => {
const component = renderIntoDocument(
<AtSwipeAction autoClose options={OPTIONS}>
<View className='normal'>AtSwipeAction 一般使用场景</View>
</AtSwipeAction>
)
const componentDom = findDOMNode(component, 'at-swipe-action')
component.maxOffsetSize = MAX_OFFSET_SIZE

Simulate.touchStart(componentDom, {
touches: [{ clientX: 0 }]
})
component.forceUpdate()

Simulate.touchMove(componentDom, {
touches: [{ clientX: -110 }]
})
component.forceUpdate()

Simulate.touchEnd(componentDom)
component.forceUpdate()

expect(component.state.isOpened).toBeTruthy()
expect(component.state.offsetSize).toEqual(-MAX_OFFSET_SIZE)

const spy = jest
.spyOn(component, 'componentWillReceiveProps')
.bind(component)
spy({ isClose: true })

component.forceUpdate()

expect(component.state.isOpened).toBeFalsy()
})
})
2 changes: 2 additions & 0 deletions src/components/tabs/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ exports[`AtTabs Snap render AtTabs -- props current 1`] = `"<div style=\\"height
exports[`AtTabs Snap render AtTabs -- props customStyle 1`] = `"<div style=\\"height:;color:red;\\" class=\\"at-tabs\\"><div class=\\"at-tabs__header\\"></div><div style=\\"transform:translate3d(-0%, 0px, 0px);height:;\\" class=\\"at-tabs__body\\"><div style=\\"height:1PX;width:0%;\\" class=\\"at-tabs__underline\\"></div></div></div>"`;
exports[`AtTabs Snap render AtTabs -- props height 1`] = `"<div style=\\"height:300px;\\" class=\\"at-tabs at-tabs--vertical\\"><div class=\\"at-tabs__header\\"><div id=\\"tab0\\" class=\\"at-tabs__item at-tabs__item--active\\">标签页1</div><div id=\\"tab1\\" class=\\"at-tabs__item\\">标签页2</div><div id=\\"tab2\\" class=\\"at-tabs__item\\">标签页3</div></div><div style=\\"transform:translate3d(0px, -0%, 0px);height:300px;\\" class=\\"at-tabs__body\\"><div style=\\"height:300%;width:1PX;\\" class=\\"at-tabs__underline\\"></div></div></div>"`;
exports[`AtTabs Snap render AtTabs -- props scroll 1`] = `"<div style=\\"height:;\\" class=\\"at-tabs\\"><div style=\\"height:;\\" scrollX scrollWithAnimation scrollLeft=\\"0\\" scrollTop=\\"0\\" scrollIntoView=\\"\\" class=\\"taro-scroll taro-scroll-view__scroll-x at-tabs__header at-tabs__header--scroll\\"><div id=\\"tab0\\" class=\\"at-tabs__item at-tabs__item--active\\">标签页1</div><div id=\\"tab1\\" class=\\"at-tabs__item\\">标签页2</div><div id=\\"tab2\\" class=\\"at-tabs__item\\">标签页3</div></div><div style=\\"transform:translate3d(-0%, 0px, 0px);height:;\\" class=\\"at-tabs__body\\"><div style=\\"height:1PX;width:300%;\\" class=\\"at-tabs__underline\\"></div></div></div>"`;
exports[`AtTabs Snap render AtTabs -- props swipeable 1`] = `"<div style=\\"height:;\\" class=\\"at-tabs\\"><div class=\\"at-tabs__header\\"><div id=\\"tab0\\" class=\\"at-tabs__item at-tabs__item--active\\">标签页1</div><div id=\\"tab1\\" class=\\"at-tabs__item\\">标签页2</div><div id=\\"tab2\\" class=\\"at-tabs__item\\">标签页3</div></div><div style=\\"transform:translate3d(-0%, 0px, 0px);height:;\\" class=\\"at-tabs__body\\"><div style=\\"height:1PX;width:300%;\\" class=\\"at-tabs__underline\\"></div></div></div>"`;
Expand Down

0 comments on commit 350f100

Please sign in to comment.