Component attributes (props)

Props are the way to pass down data from a parent to a child component in React.

For this next example, we want to change the InvestmentListItem component to render the value of the roi variable formatted in percentage.

To implement the next specs, we are going to use a few helper methods that React offers through the React.addons.TestUtils object, as follows:

describe("InvestmentListItem", function() {
  var TestUtils = React.addons.TestUtils;

  describe("given an Investment", function() {
    var investment, component;

    beforeEach(function() {
      investment = new Investment({
        stock: new Stock({ symbol: 'peto', sharePrice: 0.25 }),
        shares: 100,
        sharePrice: 0.20
      });

      component = TestUtils.renderIntoDocument(
        <InvestmentListItem investment={investment}/>
      );
    });

    it("should render the return of investment as a percentage", function() {
      var roi = TestUtils.findRenderedDOMComponentWithClass...