Тест-модал не может пройти модальный тестовый проход - PullRequest
Новая
       5

Тест-модал не может пройти модальный тестовый проход

0 голосов
/ 11 февраля 2020

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

const useModal: IUseModal = () => {
    const [isOpen, setIsShowing] = useState<boolean>(false);
    const toggle = (isOpen: boolean) => {
        setIsShowing(isOpen);
    };

    return [
        isOpen,
        toggle,
    ]
};
function useOnClickOutside(ref, handler) {
    useEffect(
        () => {
            const listener = (event: { target: any; }) => {
                if (!ref.current || ref.current.contains(event.target)) {
                    return;
                }

                handler(event);
            };

            document.addEventListener('mousedown', listener);
            document.addEventListener('touchstart', listener);

            return () => {
                document.removeEventListener('mousedown', listener);
                document.removeEventListener('touchstart', listener);
            };
        },
        [ref, handler]
    );
}

const modalRoot = document.getElementById('modal');

const Modal: React.FC<Props> = ({isOpen, toggle, title , children}) => {
    const ref = useRef<HTMLDivElement>(null);
    const el = document.createElement('div');

    useOnClickOutside(ref, () => toggle(false));

    useEffect(() => {
        if (modalRoot) modalRoot.appendChild(el);


        return (() => {
            if (modalRoot) modalRoot.removeChild(el);
        })
    });

    return (
        isOpen ? createPortal(
            <React.Fragment>
                <div className="flex absolute w-full top-0 bottom-0 justify-center items-center">
                    <div
                        className="modal-overlay absolute w-full h-full bg-black opacity-25 top-0 bottom-0"/>
                    <div ref={ref} style={{top: 100}} className="ease-in-out absolute z-50 bg-white">
                        <div className="h-12 flex flex-row justify-between border-b border-gray-300">
                            <span className="modal-title self-center ml-2 font-bold text-gray-600">{title}</span>
                            <button
                                onClick={() => toggle(false)}
                                className="focus:outline-none hover:bg-gray-300 h-10 w-10 tooltip">
                                <i className="fas fa-times text-gray-500"/>
                                <span className="tooltiptext text-xs font-thin">Close</span>
                            </button>
                        </div>
                        {children}
                    </div>
                </div>
            </React.Fragment>, el
        ) : null
    )
};

Вот мой тест 

import React from "react";
import setupTest from "../setupTests";
import Enzyme, {shallow} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import {Modal} from "./index";

Enzyme.configure({adapter: new Adapter()});
setupTest();


describe('test Modal component', () => {
    let isOpen = true;
    const mockToggle = jest.fn();
    const modal = shallow((<Modal toggle={mockToggle} isOpen={isOpen} title={'test title'}>
        <h1>Ok</h1>
        <h2>Ok2</h2>
    </Modal>));

    it('render correctly when open is true', () => {
        expect(modal.find('.modal-title').text()).toEqual('test title');
        expect(modal.find('h1').text()).toEqual('Ok');
        expect(modal.find('h2').text()).toEqual('Ok2');
    });

    it('remove modal when click close', () => { //can't make is pass
        modal.find('.modal-overlay').simulate('click');
        expect(mockToggle).toHaveBeenCalledTimes(1);
    })

});

Где моя ошибка? Пожалуйста, помогите мне

...