Как я могу проверить useCallback с элементом ref, используя jest + энзим - PullRequest
Новая
       15

Как я могу проверить useCallback с элементом ref, используя jest + энзим

0 голосов
/ 02 мая 2020

В моем приложении реакции я имитировал выпадающий список bootstrap. И он работает нормально.

Я хочу проверить useCallback, useEffect и метод документа

Точки выполнения:

  1. При загрузке компонента handleMouseEvent прикрепится к document mouseup event. И когда срабатывает mouseup event, он выполняет handleMouseEvent.
  2. Затем метод hasFocus возвращает статус фокуса выпадающего меню.
  3. Затем, используя статус фокуса, появляется выпадающее меню или скрыть.

Dropdown.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;

А вот мой тестовый код

spe c. 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();
    });
});

Пожалуйста, помогите мне в этом

...