DEBUG -- Problems with ReactDOM.findDOMNode() #479

product_edit.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Grid,
  Row,
  Col,
  Form,
  FormGroup,
  ControlLabel,
  FormControl,
  Button
} from 'react-bootstrap';

class ProductEdit extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {error, product} = this.props;
    return (
      <Grid>
        <Row>
          <Col sm={6} smOffset={3} xs={12}>
            <Form className="product-form" onSubmit={this.saveProduct.bind(this)}>
              <FormGroup>
                <h1>{product
                    ? `Edit ${product.name}`
                    : 'Add new product'}</h1>

                {error
                  ? <p className="error-message" style={{
                      color: 'red'
                    }}>{error}</p>
                  : null}

                <ControlLabel>Product Name</ControlLabel>
                <FormControl type="text" ref='nameRef' defaultValue={product
                  ? product.name
                  : null} placeholder="Enter your product name"/>
                <ControlLabel>Product Description</ControlLabel>
                <FormControl componentClass="textArea" ref='descriptionRef' defaultValue={product
                  ? product.description
                  : null} placeholder="Enter your product description"/>
                <hr/>
                <Button type='submit' bsStyle='success'>
                  Save
                </Button>
                {product
                  ? <Button onClick={this.removeProduct.bind(this)} bsStyle='danger'>Remove</Button>
                : null}
              </FormGroup>
            </Form>
          </Col>
        </Row>
      </Grid>
    );
  }
  saveProduct(event) { // Because the test cannot get event argument
    // so call preventDefault() on undefined cause an error
    if (event && event.preventDefault) {
      event.preventDefault();
    }
    const {save} = this.props;
    const {productId} = this.props;
    const {nameRef, descriptionRef} = this.refs;
    save(productId, ReactDOM.findDOMNode(nameRef).value, ReactDOM.findDOMNode(descriptionRef).value);
    // ReactDOM.findDOMNode(nameRef).value="";
  }
  removeProduct() {
    const {remove} = this.props;
    const {productId} = this.props;
    remove(productId);
  }
}

export default ProductEdit;

product_edit.tests.js

const {describe, it} = global;
import {assert} from 'chai';
import {mount, shallow} from 'enzyme';
import ProductEdit from '../product_edit';

describe('products.components.product_edit', () => {
  describe('renders', () => {
  //Other tests...
  })

  describe('interactions', () => {
    it('should create a new product when submit', done => {
      //Setup
      const name = "The Name";
      const description = "The description";
      //Verification
      const onSave = (id, n, d) => {
        assert.equal(n, name, 'name not the same');
        assert.equal(d, description, 'description not the same');
        done();
      }
      //Exercise
      const productEdit = mount(<ProductEdit save={onSave}/>);
      const instance = productEdit.instance();

      instance.refs = {
        nameRef: {
          value: name
        },
        descriptionRef: {
          value: description
        }
      };

      productEdit.find('.product-form').simulate('submit');

    });
  })
});