##Depreciated: Use react-test-tree instead. Its an evolution of react-page-objects which should be easy for you to migrate to

React Page Objects

React page objects make it easy to test react components.

React gives you some useful utilities for testing React components however they lead to verbose code that clutters your tests.

var TestUtils = require("react/addons").addons.TestUtils;

var element = TestUtils.renderIntoDocument(<LoginPage />);
var emailNode = element.email.getDOMNode();

expect(emailNode.value).to.equal("foo@bar.com");

element.password.getDOMNode().value = "bar@baz.com";
TestUtils.Simulate.change(element.password.getDOMNode(), {
  target: {
    value: "password"
  }
});

TestUtils.Simulate.click(element.login.getDOMNode());

React Page Objects hides this complexity by providing a simpler API

var page = new PageObject(<LoginPage />);

expect(page.email.value).to.equal("foo@bar.com");
page.email.value = "bar@baz.com";
page.login.click();

##Tutorial

Say you have a login page built in React you want to test

var LoginPage = React.createClass({
  render: function () {
    return (
      <div className="login-page">
        <input ref="email" type="text" value={this.state.email} onChange={this.onEmailChanged} />
        <input ref="password" type="password" value={this.state.password} onChange={this.onPasswordChanged} />
        <input ref="login" value="Login" type="submit" onClick={this.login} />
      </div>
    );
  },
  login: function () {
    AuthService.authenticate(this.state.email, this.state.password);
  },
  onEmailChanged: function (e) {
    this.setState({ email: e.target.value });
  },
  onPasswordChanged: function () {
    this.setState({ password: this.refs.password.getDOMNode().value });
  },
  getInitialState: function () {
    return {
      email: "",
      password: ""
    };
  }
});

To easily reference specific elements within the component, you should add refs to them.

If you then pass an instance of the component into a page object, any refs will be accessible. You can then get the values of the elements and simulate events (e.g. click, select, etc).

var page = new PageObject(<LoginPage />);

page.email.value = "foo@bar.com";
page.password.value = "password";
page.login.click();

You can also create a custom type for a page using PageObject#extend

var LoginPageObject = PageObject.extend({
  getComponent: function () {
    return <LoginPage />;
  },
  loginAs: function (email, password) {
    this.email.value = "foo@bar.com";
    this.password.value = "password";
    this.login.click();
  }
});

var page = new LoginPageObject();

page.loginAs("foo@bar.com", "password");

The elements hash map allows you to specify the page object type of any refs allowing you to build more complex pages. They key in the elements is the name of the ref and the value is the page object type.

var NewsFeedItem = React.createClass({
  render: function () {
    return (
      <div className="news-feed-item">
        <User ref="user" user={this.props.item.user} />
        <h1 ref="title">{this.props.item.title}</h1>
        <div ref="body">{this.props.item.body}</div>
      </div>
    );
  }
});

var NewsFeedItemPageObject = PageObject.extend({
  elements: {
    user: PageObject
  },
  getComponent: function (props) {
    return <NewsFeed {...props} />;
  }
});

var User = React.createClass({
  render: function () {
    return (
      <div className="user">
        <span ref="name">{this.props.user.name}</span>
      </div>
    );
  }
});

var item = new NewsFeedItemPageObject({
  item: {
    user: { name: "Foo Bar" },
    title: "Foo",
    body: "Lorum Ipsum"
  }
});

expect(item.title.value).to.equal("Foo");
expect(item.user.name.value).to.equal("Foo Bar");

If you have an array of page objects, you should add a ref to the parent element and then in elements hash the value should be an array containing the page object type.

var NewsFeed = React.createClass({
  render: function () {
    return (
      <div className="news-feed">
        <div className="news-feed-items" ref="items">
          {this.state.items.map(function (item) {
            return <NewsFeedItem key={item.id} item={item} />;
          })}
        </div>
      </div>
    );
  },
  getInitialState: function () {
    return {
      items: NewsFeedService.getNewsFeedItemsFor(this.props.user)
    };
  }
});

var NewsFeedPageObject = PageObject.extend({
  elements: {
    items: [NewsFeedItemPageObject]
  },
  getComponent: function (props) {
    return <NewsFeed {...props} />;
  }
});

var newsFeed = new NewsFeedPageObject({
  user: "foo"
});

expect(newsFeed.items).to.not.be.empty;
expect(newsFeed.items.get(1).user.name.value).to.equal("foo");

Want to work on this for your day job?

This project was created by the Engineering team at Qubit. As we use open source libraries, we make our projects public where possible.

We’re currently looking to grow our team, so if you’re a JavaScript engineer and keen on ES2016 React+Redux applications and Node micro services, why not get in touch? Work with like minded engineers in an environment that has fantastic perks, including an annual ski trip, yoga, a competitive foosball league, and copious amounts of yogurt.

Find more details on our Engineering site. Don’t have an up to date CV? Just link us your Github profile! Better yet, send us a pull request that improves this project.

avincent6/react-page-objects

React Page Objects

Want to work on this for your day job?