ферментный статус проверки флажок

Question

Я следующий пример компонента

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

Использование энзим и Chai Я хотел бы утверждать, что для

this.props.active = true 

BackgroundColor зеленый и флажок.

Вот мой тест

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

Но как я могу утверждать, в обоих случаях?

Answer 1

Проверьте приведенное ниже решение, для цвета фона, который вы можете проверить с помощью селектора строк css (могут потребоваться некоторые изменения в селекторе). Все нижеприведенные утверждения проверены и работают.

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