Bik*_*ram 5 reactjs jestjs enzyme react-hooks
在我的反应应用程序中,我模仿了引导下拉菜单。而且它运行良好。
我想测试 useCallback、useEffect 和 document 方法
执行点:
handleMouseEvent将附加到document mouseup event. 当mouseup event触发时,就会执行handleMouseEvent。hasFocus方法将返回下拉列表的焦点状态。下拉菜单.jsx
const Dropdown = props => {
let dropdownRef = createRef();
const hasFocus = useCallback((target) => {
if (!dropdownRef) return false;
let dropdownHasFocus = false;
const nodeIterator = document.createNodeIterator(
dropdownRef, NodeFilter.SHOW_ELEMENT, null, false
);
let node;
while (node) {
if (node === target) {
dropdownHasFocus = true;
break;
}
node = nodeIterator.nextNode()
}
return dropdownHasFocus;
}, [ dropdownRef ]);
const handleMouseEvent = useCallback((event) => {
const dropdownHasFocus = hasFocus(event.target);
console.log(dropdownHasFocus);
// setToggleStatus(dropdownHasFocus);
}, [ hasFocus ]);
useEffect(() => {
// handles mouse events like click and dblclick
document.addEventListener('mouseup', handleMouseEvent);
return () => {
document.removeEventListener('mouseup', handleMouseEvent);
}
}, [ dropdownRef, handleMouseEvent ]);
return <div class="dropdown"> {/* Dropdown HTML */} </div>;
}
export default Dropdown;
Run Code Online (Sandbox Code Playgroud)
这是我的测试代码
规范.jsx
describe('Dropdown testcase', () => {
const map = {};
beforeEach(() => {
document.addEventListener = jest.fn((event, callback) => {
map[ event ] = callback;
});
});
it('test hasFocus', () => {
const selectedSpy = jest.fn();
const component = shallow(
<Dropdown
items={DropdownData}
name="Dropdown"
selected={selectedSpy}
/>
);
expect(component.find('div.dropdown-menu.show').exists()).toBeFalsy();
component.find('span.dropdown-toggle').simulate('click');
expect(component.find('div.dropdown-menu.show').exists()).toBeTruthy();
/* map.mouseup({
target: document.createElement('span', { className: 'dropdown-toggle' }, 'Dropdown')
}); */
expect(component.find('div.dropdown-menu.show').exists()).toBeFalsy();
});
});
Run Code Online (Sandbox Code Playgroud)
请在这方面帮助我
| 归档时间: |
|
| 查看次数: |
3290 次 |
| 最近记录: |