Testing Reagieren Komponente wählen

https://github.com/JedWatson/react-select Testing Reagieren Komponente wählen

Ich möchte React-Select-Komponente reagieren verwenden, aber ich brauche Tests hinzuzufügen.

Ich habe mehrere Optionen ausprobiert, die ich mit Google gefunden habe, aber nichts scheint zu funktionieren. Ich habe den Code unten, aber es verursacht kein Änderungsereignis. Ich konnte ein Fokus-Ereignis hinzufügen, das die Klasse "is-focussed" hinzufügt, aber die Klasse "is-open" fehlt noch.

ich verwendet habe: https://github.com/JedWatson/react-select/blob/master/test/Select-test.js als Referenz

Ich habe versucht, nur auf das Eingabefeld ein Änderungsereignis zu verwenden, aber auch dies nicht geholfen hat. Ich habe bemerkt, dass es eine onInputChange={this.change} für die Auswahl gibt.

-Test

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' 

}); 
});

testende Komponente

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;

Befehlszeile auszuführen Test, den ich tun:

>> npm run test

und in package.js Ich habe dieses Skript:

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

Testaufbau

und browser.js ist:

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' 
};

Ich habe versucht, auch Verfahren zur Verwendung hier skizzierte Testen : https://github.com/StephenGrider/ReduxSimpleStarter

Jede Hilfe wird sehr geschätzt

Quelle

2017-02-01 Llewellyn

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

Nur Lösung, die ich fand, war eine Auswahl durch Schlüssel-down Ereignisse zu simulieren:

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')

Quelle

2017-09-13 15:34:04 Keith

Wichtiger Hinweis hier, dass beide dieser keyDown Simulationen benötigt, um die triggern Ändern Sie das Ereignis. –

Testing Reagieren Komponente wählen

Antwort

Verwandte Themen