import ReactTestUtils from "../../lib/ReactTestUtils"; import React from '../../src/May'; import { render, unmountComponentAtNode, findDOMNode } from '../../src/may-dom/MayDom' var ReactDOM = { render: render, unmountComponentAtNode: unmountComponentAtNode, findDOMNode: findDOMNode } React.render = render; // var React = require('react'); // var ReactDOM = require('react-dom'); // import React from "../../dist/ReactANU"; // var ReactDOM = React; // var ReactTestUtils = { Simulate: {} }; // "click,change,keyDown,keyUp,KeyPress,mouseDown,mouseUp,mouseMove".replace(/\w+/g, function (name) { // ReactTestUtils.Simulate[name] = function (node, opts) { // if (!node || node.nodeType !== 1) { // throw "第一个参数必须为元素节点"; // } // var fakeNativeEvent = opts || {}; // fakeNativeEvent.target = node; // fakeNativeEvent.simulated = true; // fakeNativeEvent.type = name.toLowerCase(); // React.eventSystem.dispatchEvent(fakeNativeEvent, name.toLowerCase()); // }; // }); describe('node模块', function () { var body = document.body, div beforeEach(function () { div = document.createElement('div') body.appendChild(div) }) afterEach(function () { body.removeChild(div) }) // it('连续点击一个DIV', async () => { // div.innerHTML = '看到我吗?' // var a = 1 // div.onclick = function () { // a++ // } // await browser.click(div).pause(100).$apply() // expect(a).toBe(2) // await browser.click(div).pause(100).$apply() // expect(a).toBe(3) // }); it('输出简单的元素', async () => { var s = React.render(
222
, div) //组件直接返回元素节点 expect(s.nodeName).toBe('DIV'); }); it('InputControlES6', async () => { class InputControlES6 extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { text: props.initialValue || 'placeholder' } // ES6 类中函数必须手动绑定 this.handleChange = this .handleChange .bind(this); } handleChange(event) { this.setState({ text: event.target.value }); } render() { return (
Type something:
) } } InputControlES6.defaultProps = { initialValue: '请输入内容' } var s = React.render(, div) var input = s.refs.input expect(input.value).toBe('请输入内容') //input已经是dom 暂不做这个兼容了 // expect(input.getDOMNode()).toBe(input) }) it('forceUpdate', async () => { class App extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { text: 'xxx' }; } shouldComponentUpdate() { return false } render() { return (
Type something:
); } } App.defaultProps = { initialValue: '请输入内容' }; div.innerHTML = 'remove' var s = React.render(, div) var index = 0 expect(s.mayInst.hostNode.nodeName).toBe('DIV') s.forceUpdate(function () { index++ }) expect(index).toBe(1) s.forceUpdate(function () { index++ }) expect(index).toBe(2) }) it('下拉菜单的选择', async () => { class Select extends React.Component { constructor() { super() this.state = { city: "bj" } } handleCity(e) { // expect(e.type).toBe('change') console.warn(e.type); var value = e.target.value; this.setState({ city: value }) } render() { return } } var s = React.render( {this .state .cities .map(function (el) { return }) } } } ; var s = React.render( }, this) } } } var s = React.render(, div) expect(s.mayInst.hostNode.children[0].checked).toBe(false) expect(s.mayInst.hostNode.children[1].checked).toBe(true) expect(s.mayInst.hostNode.children[2].checked).toBe(false) ReactTestUtils.Simulate.click(document.getElementById('radio3')); expect(s.mayInst.hostNode.children[0].checked).toBe(false) expect(s.mayInst.hostNode.children[1].checked).toBe(false) expect(s.mayInst.hostNode.children[2].checked).toBe(true) }) it('测试input元素的oninput事件', async () => { var values = ['x', 'xx', 'xxx', 'xxxx'] var el = '' class Input extends React.Component { constructor() { super() this.state = { value: 2 } } onInput(e) { console.log('oninput', e.type, e.target.value) el = values.shift() this.setState({ value: e.target.value }) } componentDidUpdate() { // console.warn(s.mayInst.hostNode.children[0].value); // expect(s.mayInst.hostNode.children[0].value).toBe(el) } render() { return
{this.state.value}
} } var s = React.render(, div) expect(s.mayInst.hostNode.children[0].value).toBe('2') }) it('测试textarea元素的oninput事件', async () => { var values = ['y', 'yy', 'yyy', 'yyyy'] var el = '' class TextArea extends React.Component { constructor() { super() this.state = { value: 4 } } onInput(e) { el = values.shift() this.setState({ value: e.target.value }) } componentDidUpdate() { // expect(s._renderedVnode._hostNode.children[0].value).toBe(el) } render() { return
{this.state.value}
} } var s = React.render({this.state.value} } } var s = React.render(