Here we want to test a toggle button component, when the button was click, state should change, style should change also.

Toggle component:

// see this live: https://codesandbox.io/s/GvWpGjKQ
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import glamorous from 'glamorous'
import {darken} from 'polished' // imagine this is in a "components" file
const primaryColor = '#337ab7'
const toggledOnStyles = {
backgroundColor: darken(0.15, primaryColor),
borderColor: darken(0.25, primaryColor),
'&:hover,&:active,&:focus': {
backgroundColor: darken(0.2, primaryColor),
borderColor: darken(0.3, primaryColor),
},
}
const toggledOffStyles = {
backgroundColor: primaryColor,
borderColor: darken(0.1, primaryColor),
'&:hover,&:active,&:focus': {
backgroundColor: darken(0.1, primaryColor),
borderColor: darken(0.2, primaryColor),
},
}
const ToggleButton = glamorous.button(
{
display: 'inline-block',
padding: '6px 12px',
marginBottom: '0',
fontSize: '14px',
fontWeight: '400',
lineHeight: '1.4',
textAlign: 'center',
cursor: 'pointer',
borderRadius: '4px',
color: '#fff',
},
props => (props.on ? toggledOnStyles : toggledOffStyles),
) class Toggle extends Component {
constructor(props, ...rest) {
super(props, ...rest)
this.state = {
toggledOn: props.initialToggledOn || false,
}
} handleToggleClick = () => {
const toggledOn = !this.state.toggledOn
this.props.onToggle(toggledOn)
this.setState({toggledOn})
} render() {
const {children} = this.props
const {toggledOn} = this.state
return (
<ToggleButton
on={toggledOn}
onClick={this.handleToggleClick}
data-test="button"
>
{children}
</ToggleButton>
)
}
} Toggle.propTypes = {
initialToggledOn: PropTypes.bool,
onToggle: PropTypes.func.isRequired,
children: PropTypes.any.isRequired,
} export default Toggle

Test:

import React from 'react'
import {render, mount} from 'enzyme'
import Toggle from '../toggle' test('component render with default state', () => {
const wrapper = renderToggle();
expect(wrapper).toMatchSnapshotWithGlamor();
}) test('when button is clicked, the style of button should change', () => {
const onToggle = jest.fn() // jest mock function
const wrapper = mountToggle({
onToggle
})
// It is recommended that for the element we need to test
// we can add 'data-test' attr, so that we can reference
// the element inside testing
const button = wrapper.find('[data-test="button"]')
// we can verify the style changes inside snapshots
expect(wrapper).toMatchSnapshotWithGlamor('1. Before toggle')
button.simulate('click')
expect(wrapper).toMatchSnapshotWithGlamor('2. After toggle')
}) test('onToggle function should be called when the button is clicked', () => {
const onToggle = jest.fn() // jest mock function
const wrapper = mountToggle({
onToggle
})
// It is recommended that for the element we need to test
// we can add 'data-test' attr, so that we can reference
// the element inside testing
const button = wrapper.find('[data-test="button"]')
button.simulate('click')
expect(onToggle).toHaveBeenCalledTimes(1)
expect(onToggle).toHaveBeenCalledWith(true)
}) /**
* The difference between mount and render function is that
* 1. render is faster, because after rendered, it output string,
* so there is no lifecycle hooks bind with it.
* 2. mount, on the other hand, will bind lifecycle hooks and events,
* the output is actual DOM element
* */ function mountToggle(props = {}) {
const propToUse = Object.assign(
{},
{
onToggle() {
},
children: 'I am a child'
},
props
) return mount(<Toggle {...propToUse} />)
} function renderToggle(props = {}) {
const propToUse = Object.assign(
{},
{
onToggle() {
},
children: 'I am a child'
},
props
) return render(<Toggle {...propToUse} />)
}

[React & Testing] Simulate Event testing的更多相关文章

  1. Unit Testing, Integration Testing and Functional Testing

    转载自:https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional- ...

  2. Difference Between Performance Testing, Load Testing and Stress Testing

    http://www.softwaretestinghelp.com/what-is-performance-testing-load-testing-stress-testing/ Differen ...

  3. Go testing 库 testing.T 和 testing.B 简介

    testing.T 判定失败接口 Fail 失败继续 FailNow 失败终止 打印信息接口 Log 数据流 (cout 类似) Logf format (printf 类似) SkipNow 跳过当 ...

  4. [AngularJS Unit tesint] Testing keyboard event

    HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ...

  5. [Unit Testing] AngularJS Unit Testing - Karma

    Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...

  6. Penetration Testing、Security Testing、Automation Testing

    相关学习资料 http://www.cnblogs.com/LittleHann/p/3823513.html http://www.cnblogs.com/LittleHann/p/3828927. ...

  7. 测试理论--branch testing and boundary testing

    1 branch testing 分支测试 测试代码的所有分支 2 boundary testing 测试 程序的限制条件

  8. [Unit Testing] Fundamentals of Testing in Javascript

    In this lesson, we’ll get the most fundamental understanding of what an automated test is in JavaScr ...

  9. [Angular Unit Testing] Debug unit testing -- component rendering

    If sometime you want to log out the comonent html to see whether the html render correctly, you can ...

随机推荐

  1. nginx大量TIME_WAIT的解决办法--转

    原文地址:http://liuyieyer.iteye.com/blog/2214722?utm_source=tuicool&utm_medium=referral 由于网站使用nginx做 ...

  2. P2617 Dynamic Ranking

    题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]……a[j]中第k小的数是多少(1≤k≤ ...

  3. 我比xx强在哪里?弱在哪里?

    向下管理? 向上管理? 自我形象? 人机关系运作? 弱项不在管理方面: 在向上的人际关系处理和机会把握方面.

  4. Svn备份与Bandizip压缩批处理程序

    目的:为了定时备份多个svn仓库数据,使用批处理程序进行备份并Bandizip进行压缩保存到指定位置,操作完成后弹出成功提示. 为了完成以上目标,需要了解以下几个方面: 批处理命令 Svn命令 Ban ...

  5. Js中的数据类型--String

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 上一期咱们大概了解了下什么是JavaScript,想必大家也都知道 今天主要说下Js中的数据类型 在Js中一共分为六种数据类型 其中基本数据 ...

  6. 实现人脸识别性别之路---matplotlib之注释

    一.准备数据 利用np.linspace()函数得到一定范围内的数据集 利用2*x+1的公式求出y 二.创建窗口 三.根据具有规律的数据画图 四.调整坐标轴 1.将原本的坐标轴的上轴和右轴去掉,使用基 ...

  7. JAVA基础数据类型

    JAVA的数据类型粗略分两种 1.基本数据类型 整数类型: byte,short,int,long 浮点类型: float,double 字符类型: char 布尔类型: boolean 基本语法格式 ...

  8. 【Henu ACM Round#16 C】Graph and String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...

  9. java设计模式--事件监听器模式和观察者模式

    监听器模式:事件源经过事件的封装传给监听器,当事件源触发事件后,监听器接收到事件对象可以回调事件的方法 观察者模式:观察者(Observer)相当于事件监听者,被观察者(Observable)相当于事 ...

  10. [Javascript] this in Function Calls

    In most cases, the value of a function's this argument is determined by how the function is called. ...