mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 16:51:11 +03:00
add tooltip test coverage
This commit is contained in:
parent
3a8d95b03b
commit
27542ea322
@ -3,10 +3,53 @@ import { mount } from 'enzyme';
|
|||||||
import Tooltip from '../../src/components/Tooltip';
|
import Tooltip from '../../src/components/Tooltip';
|
||||||
|
|
||||||
describe('<Tooltip />', () => {
|
describe('<Tooltip />', () => {
|
||||||
let wrapper;
|
let elem;
|
||||||
|
let content;
|
||||||
|
let mouseOverHandler;
|
||||||
|
let mouseOutHandler;
|
||||||
|
|
||||||
test('initially renders without crashing', () => {
|
test('initially renders without crashing', () => {
|
||||||
wrapper = mount(<Tooltip />);
|
elem = mount(<Tooltip />);
|
||||||
expect(wrapper.length).toBe(1);
|
expect(elem.length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shows/hides with mouse over and leave', () => {
|
||||||
|
elem = mount(<Tooltip />);
|
||||||
|
mouseOverHandler = elem.find('.mouseOverHandler');
|
||||||
|
mouseOutHandler = elem.find('.mouseOutHandler');
|
||||||
|
expect(elem.state().isDisplayed).toBe(false);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(0);
|
||||||
|
mouseOverHandler.props().onMouseOver();
|
||||||
|
expect(elem.state().isDisplayed).toBe(true);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(1);
|
||||||
|
mouseOutHandler.props().onMouseLeave();
|
||||||
|
expect(elem.state().isDisplayed).toBe(false);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shows/hides with focus and blur', () => {
|
||||||
|
elem = mount(<Tooltip />);
|
||||||
|
mouseOverHandler = elem.find('.mouseOverHandler');
|
||||||
|
mouseOutHandler = elem.find('.mouseOutHandler');
|
||||||
|
expect(elem.state().isDisplayed).toBe(false);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(0);
|
||||||
|
mouseOverHandler.props().onFocus();
|
||||||
|
expect(elem.state().isDisplayed).toBe(true);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(1);
|
||||||
|
mouseOutHandler.props().onBlur();
|
||||||
|
expect(elem.state().isDisplayed).toBe(false);
|
||||||
|
elem.update();
|
||||||
|
content = elem.find('.pf-c-tooltip__content');
|
||||||
|
expect(content.length).toBe(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -45,7 +45,9 @@ class Tooltip extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
style={{ position: 'relative' }}
|
style={{ position: 'relative' }}
|
||||||
|
className="mouseOutHandler"
|
||||||
onMouseLeave={() => this.setState({ isDisplayed: false })}
|
onMouseLeave={() => this.setState({ isDisplayed: false })}
|
||||||
|
onBlur={() => this.setState({ isDisplayed: false })}
|
||||||
>
|
>
|
||||||
{ isDisplayed
|
{ isDisplayed
|
||||||
&& (
|
&& (
|
||||||
@ -61,6 +63,7 @@ class Tooltip extends React.Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
<span
|
<span
|
||||||
|
className="mouseOverHandler"
|
||||||
onMouseOver={() => this.setState({ isDisplayed: true })}
|
onMouseOver={() => this.setState({ isDisplayed: true })}
|
||||||
onFocus={() => this.setState({ isDisplayed: true })}
|
onFocus={() => this.setState({ isDisplayed: true })}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user