Im trying to test a react autocomplete module using Enzyme and Jest to drive the test. So far I have
test("Render Autocomplete Test",async () => {
let expectedUnmappedEntityArray = [];
let wrapper = shallow(<Map
unmappedArray={[0]}
entity='User'
/>);
wrapper.instance().state.newMapping[0].selectedEntity = "John Smith(johnS)";
wrapper.instance().state.newMapping[0].permissionsToSave = ['Cashier'];
wrapper.instance().state.newMapping[0].isRemoved = false;
wrapper.instance().state.unmappedArray[0] = wrapper.instance().state.newMapping[0];
wrapper.instance().state.unmappedArray[0].selectedEntity = "Will Smith(willS)";
wrapper.find('Button').simulate('click'); //Opens the dialog with the autocomplete in it
wrapper.find(Dialog).dive().find('Autocomplete').simulate('change',{target:{value:'Will'}});
console.log(wrapper.instance().state.unmappedEntityArray[0].selectedEntity);
wrapper.find(Dialog).dive().find('Autocomplete').simulate('focus');
});
for the test and the render is basically like this,
render() {
render() {
return (
<div style=>
<br />
<Button primary raised onClick={this.onAddMappingModalShow}>
Add Mapping
</Button>
<br />
<br />
<br />
<Dialog>
<DialogHeader>
Select a {this.state.entity} to map it
</DialogHeader>
<DialogBody scrollable>
<Table>
<thead>
<tr>
<th>{this.state.entity}</th>
<th>Permissions</th>
<th />
</tr>
</thead>
<tbody>
{this.state.addMappingModalOpen &&
this.state.newMapping.map(
(item, index) =>
!item.isRemoved && (
<tr key={"new_mapping_" + index}>
<td>
{this.state.unmappedArray.length > 0 && (
<Autocomplete
label={"Search " + this.state.entity + "..."}
helperText={
<TextFieldHelperText>
Please enter minimum 2 characters
</TextFieldHelperText>
}
minChars={2}
items={this.state.unmappedArray}
value={item.selectedEntity}
onSelected={value => {
console.log('foo');
}}
/>
)}
</td>
</tbody>
</Table>
</DialogBody>
</span>
</div>
</DialogFooter>
</Dialog>
</div>
);
} }
No matter what I do I can't seem to touch the inside of the autocomplete section and get it to go inside on Selected. So far all I really know is that the dialog is rendering and that the autocomplete appears to exist. So why can't I select it and get it to print anything inside of it?
Aucun commentaire:
Enregistrer un commentaire