测试阵营选择组件

https://github.com/JedWatson/react-select 测试阵营选择组件

我想用作出反应，选择反应成分，但我需要补充测试。

我试过几个选项，我发现谷歌，但似乎没有任何工作。我有下面的代码，但它不会导致更改事件。我已经能够添加焦点活动，它增加了'is-focussed'类，但'is-open'类仍然缺失。

我用：作为参考

我曾尝试只在输入字段中使用改变事件，但是这也毫无帮助。我注意到有一个onInputChange={this.change}为选择。

测试

import Home from '../../src/components/home'; 
import { mount } from 'enzyme' 

describe('Home',() => { 

it("renders home",() => { 

    const component = mount(<Home/>); 

    // default class on .Select div 
    // "Select foobar Select--single is-searchable" 

    const select = component.find('.Select'); 

    // After focus event 
    // "Select foobar Select--single is-searchable is-focussed" 
    // missing is-open 
    TestUtils.Simulate.focus(select.find('input')); 

    //this is not working 
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 40, key: 'ArrowDown' }); 
    TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 13, key: 'Enter' }); 

    // as per code below I expect the h2 to have the select value in it eg 'feaure' 

}); 
});

下测试组件

import React, { Component } from 'react'; 
import Select from 'react-select'; 

class Home extends Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     message: "Please select option"}; 
    this.change = this.change.bind(this); 
} 

change(event) { 

    if(event.value) { 
     this.setState({message: event.label}); 
    } 
} 

render() { 

    const options = [ {label: 'bug', value: 1} , {label: 'feature', value: 2 }, {label: 'documents', value: 3}, {label: 'discussion', value: 4}]; 

    return (
     <div className='content xs-full-height'> 
      <div> 
       <h2>{this.state.message}</h2> 

       <Select 
        name="select" 
        value={this.state.message} 
        options={options} 
        onInputChange={this.change} 
        onChange={this.change} 
       /> 

      </div> 
     </div> 
    ); 
} 
} 

export default Home;

命令行 要运行的测试，我做的事：

>> npm run test

和package.js我有此脚本：

"test": "mocha --compilers js:babel-core/register -w test/browser.js ./new",

测试设置

和browser.js是：

import 'babel-register'; 
import jsdom from 'jsdom'; 

const exposedProperties = ['window', 'navigator', 'document']; 

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); 
global.window = document.defaultView; 
Object.keys(document.defaultView).forEach((property) => { 
    if (typeof global[property] === 'undefined') { 
     exposedProperties.push(property); 
     global[property] = document.defaultView[property]; 
    } 
}); 

global.navigator = { 
    userAgent: 'node.js' 
};

我也使用此测试方法概述尝试：https://github.com/StephenGrider/ReduxSimpleStarter

任何帮助将不胜感激

来源

2017-02-01 Llewellyn

从https://github.com/JedWatson/react-select/issues/1357

只有解决办法，我发现是通过键下事件来模拟一个选择：

wrapper.find('.Select-control').simulate('keyDown', { keyCode: 40 }); 
// you can use 'input' instead of '.Select-control' 
wrapper.find('.Select-control').simulate('keyDown', { keyCode: 13 }); 
expect(size).to.eql('your first value in the list')

这里

来源

2017-09-13 15:34:04 Keith

重要注意的是，这两个的keyDown模拟被触发所需改变事件。 –

测试阵营选择组件

回答

相关问题