Enzyme check checkbox status

Question

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?

Answer 1

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');
  });
});