Я пытаюсь получить покрытие тестирования выше 80%, и эта линия предотвращает это. Я не могу заставить оператор if срабатывать при тестировании приложения. Поведение работает, как и ожидалось, в представлении клиента, но в тестовом файле происходит сбой, и я не могу понять, почему.
Я хочу протестировать функцию handleClickOutside.
class UserInfo extends Component {
constructor(props) {
super(props);
this.popup = null;
this.state = { user: this.props.user, showMenu: false };
this.handleToggleTheme = this.handleToggleTheme.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClickOutside, true);
}
handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this.popup);
console.log(domNode);
console.log(event);
if (domNode && !domNode.contains(event.target)) {
console.log('Hit');
this.setState({ showMenu: false });
event.stopPropagation();
}
};
handleToggleTheme() {
this.props.onToggleTheme();
}
render() {
return (
<Root>
<ThemeControlWrapper>
<Switch onChange={this.handleToggleTheme} />
<ThemeIcon src={SunIcon} alt="Light Mode Icon" />
</ThemeControlWrapper>
<UserInfoWrapper
ref={userInfo => {
this.anchor = userInfo;
}}
onClick={() =>
this.setState(state => {
return { showMenu: !state.showMenu };
})
}
className={this.props.className}
>
<UserPhoto src={Config.PublicFolder + "/user/photo.jpg"} />
<UserName>{this.state.user.name}</UserName>
{this.state.showMenu ? <ArrowUpIcon /> : <ArrowDownIcon />}
</UserInfoWrapper>
<Popup
anchor={this.anchor}
show={this.state.showMenu}
ref={popupElement => {
this.popup = popupElement;
}}
>
<Menu>
<MenuItem>
<LogoutIcon />
<LogoutText>Logout</LogoutText>
</MenuItem>
</Menu>
</Popup>
</Root>
);
}
}
Вот тест для этой функции
const defaultUser = {
appsWithDashboard: apps
};
const withDualThemeAndUserWrapper = ({
WrappedComponent,
customUser = { permissions: [], roles: [], partitions: [] }
}) => props => (
<DualThemeProvider>
<UserProvider user={customUser}>
<WrappedComponent {...props} />
</UserProvider>
</DualThemeProvider>
);
let WithThemeAndUserContext = withDualThemeAndUserWrapper({
WrappedComponent: () => <UserInfo user={{ name: "Andrew" }} />,
customUser: defaultUser
});
let wrapper;
describe("handleClickOutside", () => {
test("Should fire handleClickOutside", () => {
wrapper.instance().handleClickOutside({
target : <div className="hello">Hello</div>});
expect(wrapper.state("showMenu")).toBeTruthy();
wrapper.instance().handleClickOutside({
target : <div className="goodbye">Goodbye</div>});
expect(wrapper.state("showMenu")).toBeFalsy();
})
});
Как мне запустить тест, чтобы он проверял, что handleClickOutside выполняет все возможные результаты. Спасибо