UI测试的异步处理优化

[RubyLouvre]

在开发迷你react过程中，我们需要判定官方 react与我们写的迷你react的接口一致性，于是引入了UI测试。

UI测试中最著名的项目是 Selenium， 在nodejs对应的实现是webdriver.io

现在我们重写了一个karma的一个launcher, karma-webdriverio-launcher

然后基于它包装了一个karma-event-driver-ext

这个东西的试验场就是本项目的 aaa分支

大家clone下来npm install，还需要安装两个东西才能运行

一个是selenium-server-standalone-3.3.1.jar
http://selenium-release.storage.googleapis.com/3.3/selenium-server-standalone-3.3.1.jar

另一个是浏览器的driver,这里我们先用chrome，大家选择对应的操作系统版本

http://chromedriver.storage.googleapis.com/index.html?path=2.29/

下回来后放到项目的根目录：

然后控制台中执行这两条命令

java -jar selenium-server-standalone-3.3.1.jar

node node_modules/karma-event-driver-ext

它们各自占用一个终端

最后在第二个终端中看 到测试结果

UI测试写在test/modules下的node.spec与event.spec里（另两个是普通的单元测试）

现在的问题是，karma-event-driver-ext实现得不太友好，测试代码要求用户写太多Promise

import React from 'src/React'
import eventHook, {beforeHook, afterHook, runCommand} from 'karma-event-driver-ext/cjs/event-driver-hooks.js';

describe('ReactDOM.render返回根组件的实例', function () {
    this.timeout(200000);
    before(async() => {
        await beforeHook();
    });
    after(async() => {
        await afterHook(false);
    });
    it('ReactDOM.render返回根组件的实例', async() => {
        class A extends React.Component {
            constructor() {
                super()
                this.state = {
                    aaa: 111
                }
            }
            click(e) {
                console.log('这个已经触发')
                this.setState({
                    aaa: this.state.aaa + 1
                })
                console.log('点击完')
            }
            componentDidMount() {
                resolve()
            }
            componentDidUpdate() {
                console.log('updated')
                console.log(this.state.aaa)
                resolve()

            }
            render() {
                return (
                    <div
                        id="aaa"
                        onClick={this
                        .click
                        .bind(this)}>
                        {this.state.aaa}
                    </div>
                )
            }
        }
        var resolve
        var p = new Promise(function (r) {
            resolve = r
        })
        var rootInstance = ReactDOM.render(
            <A/>, document.body)
        //等待组件mount
        await p
        p = new Promise(function (r) {
            resolve = r
        })
        //确保Promise是在await之前
        await runCommand((browser) => {
            browser.click('#aaa'); 
        });
        //等待组件update
        await p
        expect(rootInstance.state.aaa).toBe(112)
        p = new Promise(function (r) {
            resolve = r
        })
        await runCommand((browser) => {
            browser.click('#aaa'); 
        });
        //等待组件update
        await p
        expect(rootInstance.state.aaa).toBe(113)

    })

})

希望的形式是这样

import React from 'src/React'
import eventHook, {beforeHook, afterHook, runCommand} from 'karma-event-driver-ext/cjs/event-driver-hooks.js';

describe('ReactDOM.render返回根组件的实例', function () {
    this.timeout(200000);
    before(async() => {
        await beforeHook();
    });
    after(async() => {
        await afterHook(false);
    });
    it('ReactDOM.render返回根组件的实例', async() => {
        class A extends React.Component {
            constructor() {
                super()
                this.state = {
                    aaa: 111
                }
            }
            click(e) {
                console.log('这个已经触发')
                this.setState({
                    aaa: this.state.aaa + 1
                })
                console.log('点击完')
            }
            componentDidMount() {
                resolve()
            }
            componentDidUpdate() {
                console.log('updated')
                console.log(this.state.aaa)
                resolve()

            }
            render() {
                return (
                    <div
                        id="aaa"
                        onClick={this
                        .click
                        .bind(this)}>
                        {this.state.aaa}
                    </div>
                )
            }
        }
        var resolve, rootInstance
        await runCommand((brower, r) => {
               resolve = r
               rootInstance = ReactDOM.render(
             <A/>, document.body)
      })
 
        //确保Promise是在await之前
        await runCommand((browser, r) => {
           resolve = r
            browser.click('#aaa'); 
        });
    
        expect(rootInstance.state.aaa).toBe(112)
       
        await runCommand((browser, r) => {
             resolve = r
            browser.click('#aaa'); 
        });
        expect(rootInstance.state.aaa).toBe(113)

    })
})

看起来清爽多了

[RubyLouvre]

需要高手帮忙优化karma-event-driver-ext

[RubyLouvre]