vendredi 15 février 2019

Testing React-Autocomplete in Enzyme

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