Enzyme Check Flag

Question

I have the following 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 tea, I would like to argue that for

this.props.active = true 

The background color is green, the check box is selected.

Here is my test case

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

But how can I state both cases?

Answer 1

Check the solution below for the background color, which you can check with the css string selector (some changes to the selector may be required). All statements below are verified and work.

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