mardi 26 février 2019

Enyme fails to find and simulate input change

Instead of changing the input enzyme inserts new variable into my TaskForm state with undifined key and the value that im trying to insert. My results looks like this

Expected value to equal: {"description": "new task description", "id": "", "title": "new task"} Received: {"description": "", "id": "", "title": "", "undefined": "new task"}

import React, { Component } from 'react';
const uuidv4 = require('uuid/v4')
//This is my component
class TaskForm extends Component {
  state = {
    title: '',
    description: '',
    id:''
  };
  onChange = e => this.setState({ [e.target.name]: e.target.value });
  resetForm = () => {
    this.setState({
      title:'',
      description:''
    })
  }
  onSubmit = e => {
      e.preventDefault()
      const task = this.state
      if(this.props.editTask){
        this.props.editTaskFunc(this.state)
      }else{
        this.setState(prevstate => ({
          id:uuidv4()
        }))
        this.props.addTask(this.state)
      }
      this.resetForm()
      this.props.closeToggle()
      
      
  }
  componentDidMount = () => {
    if(this.props.editTask){
      const {id,title,description} = this.props.editTask
      this.setState(
        prevState => ({
          id,
          title,
          description
        })
       
      );
    }
  }
  
  render() {
    const { title, description } = this.state;
    return (
      <form className="task-form" onSubmit={this.onSubmit}>
        <input name="title"  placeholder="Enter task title" type="text" value={title} onChange={this.onChange} required/>
        <input name="description" placeholder="Enter task description" type="text" value={description} onChange={this.onChange} required />
        <button>Submit</button>
        <button id="reset-btn" type="button" onClick={this.resetForm}>Reset</button>
      </form>
    );
  }
}

export default TaskForm;


//This is my test

import React from 'react';
import ReactDOM from 'react-dom';
import TaskForm from './TaskForm';
import { configure, shallow } from 'enzyme';

import Adapter from 'enzyme-adapter-react-16'
configure({adapter: new Adapter()});
const taskForm = shallow(<TaskForm/>)
describe('<TaskForm/>',() => {
  it('renders without crashing', () => {
    expect(taskForm).toMatchSnapshot()
  }); 
  it('renders  state inital empty array called tasks ', () => {
    expect(taskForm.state()).toEqual({
        title: '',
        description: '',
        id:''
    })
  });
   describe('entering input and reseting <TaskForm/> state',() => {

    beforeEach(() => {
        // taskForm.find("[name='title']").simulate('change',{target:{value:"new task"}})
        // taskForm.find("[name='description']").simulate('change',{target:{value:"new task description"}})
        taskForm.find("[name='title']").simulate('change',{target:{value:"new task"}})
    })
    afterEach(() => {
        taskForm.setState({
            title: '',
            description: '',
            id:''
          })
    })
       it('<TaskForm/> should have  changed state',() => {
        expect(taskForm.state()).toEqual({
            title: 'new task',
            description: 'new task description',
            id:''
        })
       })
    //    it('resets <TaskForm/> state on click',() => {
       
    //      taskForm.find('#reset-btn').simulate('click')
    //      expect(taskForm.state()).toEqual({
    //         title: '',
    //         description: '',
    //         id:''
    //     })
    //    })
   })
  
    
})

Aucun commentaire:

Enregistrer un commentaire