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 =newPageObject(<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 =newLoginPageObject();
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 =newNewsFeedItemPageObject({
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.