Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enzyme check checkbox status

I have following example component

export default class Header extends Component{

render(){
  let activeStyle   = {"backgroundColor": "green"};
  let inActiveStyle = {"backgroundColor": "red"};
  return(
    <div className="profile-header" style={(this.props.active)?
      activeStyle:inActiveStyle}>
      <input type="checkbox" checked={this.props.active} readOnly/>
  </div>
 );
}
}

Using Enzyme and chai I would like to assert, that for

this.props.active = true 

The backgroundColor is green and the checkbox is checked.

Here's my test case

describe('<Header />', () => {
  it('valid component', () => {
    const wrapper = shallow(<ProfileHeader
    active= {true}
    />);
   ????
});

But how can I assert both cases?

like image 719
Anh Tuan Nguyen Avatar asked Oct 19 '16 14:10

Anh Tuan Nguyen


1 Answers

Check the below solution, for the background color you can check with the css string selector (may need some changes in the selector). All the below assertions are tested and working.

describe('<Header />', () => {
  it('valid component', () => {
    const wrapper = shallow(<ProfileHeader />);
    wrapper.setProps({ active: true });
    let checkbox = wrapper.find({ type: 'checkbox' });
    expect(checkbox.props().checked).to.equal(true);
    expect(wrapper.find('.backgroundColor')).to.equal('green');
    wrapper.setProps({ active: false });
    checkbox = wrapper.find({ type: 'checkbox' });
    expect(checkbox.props().checked).to.equal(false);
    expect(wrapper.find('.backgroundColor')).to.equal('red');
  });
});
like image 141
anoop Avatar answered Nov 15 '22 01:11

anoop



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!