Предотвращение теста «Жасмин», ожидаемого () до завершения выполнения JS - PullRequest
Новая
       34

Предотвращение теста «Жасмин», ожидаемого () до завершения выполнения JS

0 голосов
/ 29 марта 2019

Я надеюсь, что вы можете помочь. Я довольно новичок в модульном тестировании. У меня есть Karma + Jasmine, на котором установлен браузер PhantomJS. Это все хорошо.

С чем я борюсь, так это с тем, что у меня есть ссылка на странице, при нажатии на которую она вставляет некоторый HTML. Я хочу проверить, что HTML-код был введен.

Теперь у меня есть тест, работающий, но только иногда, из того, что я могу выяснить, достаточно ли быстро работает мой JS, HTML вводится до запуска expect(). Если нет, то тест не пройден.

Как я могу заставить мой тест Jasmine ждать завершения всех JS до запуска expect()?

Тест на вопрос it("link can be clicked to open a modal", function() {

modal.spec.js 

const modalTemplate = require('./modal.hbs');

import 'regenerator-runtime/runtime';
import 'core-js/features/array/from';
import 'core-js/features/array/for-each';
import 'core-js/features/object/assign';
import 'core-js/features/promise';

import Modal from './modal';

describe("A modal", function() {

    beforeAll(function() {
        const data = {"modal": {"modalLink": {"class": "", "modalId": "modal_1", "text": "Open modal"}, "modalSettings": {"id": "", "modifierClass": "", "titleId": "", "titleText": "Modal Title", "closeButton": true, "mobileDraggable": true}}};
        const modal = modalTemplate(data);
        document.body.insertAdjacentHTML( 'beforeend', modal );
    });

    it("link exists on the page", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        expect(modalLink).not.toBeNull();
    });

    it("is initialised", function() {
        spyOn(Modal, 'init').and.callThrough();
        Modal.init();

        expect(Modal.init).toHaveBeenCalled();
    });

    it("link can be clicked to open a modal", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        modalLink.click();

        const modal = document.body.querySelector('.modal');
        expect(modal).not.toBeNull();
    });

    afterAll(function() {

        console.log(document.body);

        // TODO: Remove HTML

    });

});

РЕДАКТИРОВАТЬ - Подробнее

Чтобы уточнить это, ссылка Jasmine 2.0 о том, как ждать в реальном времени, прежде чем запустить ожидание , вставленное в комментарии, помогла мне понять немного лучше, я думаю. Итак, что мы говорим, мы хотим spyOn функции и ждать ее вызова, а затем инициировать обратный вызов, который затем разрешает тест.

Отлично.

Моя следующая проблема: если вы посмотрите на структуру моего ModalViewModel класса ниже, мне нужно иметь возможность spyOn insertModal(), чтобы сделать это, но единственная функция, которая доступна в init(). Что бы я сделал, чтобы продвинуться вперед с помощью этого метода? 

import feature from 'feature-js';
import { addClass, removeClass, hasClass } from '../../01-principles/utils/classModifiers';
import makeDraggableItem from '../../01-principles/utils/makeDraggableItem';
import '../../01-principles/utils/polyfil.nodeList.forEach'; // lt IE 12

const defaultOptions = {
    id: '',
    modifierClass: '',
    titleId: '',
    titleText: 'Modal Title',
    closeButton: true,
    mobileDraggable: true,
};

export default class ModalViewModel {
    constructor(module, settings = defaultOptions) {
        this.options = Object.assign({}, defaultOptions, settings);
        this.hookModalLink(module);

    }

    hookModalLink(module) {
        module.addEventListener('click', (e) => {
            e.preventDefault();


            this.populateModalOptions(e);
            this.createModal(this.options);
            this.insertModal();

            if (this.options.closeButton) {
                this.hookCloseButton();
            }

            if (this.options.mobileDraggable && feature.touch) {
                this.hookDraggableArea();
            }

            addClass(document.body, 'modal--active');

        }, this);
    }

    populateModalOptions(e) {
        this.options.id = e.target.getAttribute('data-modal');
        this.options.titleId = `${this.options.id}_title`;
    }

    createModal(options) {
        // Note: As of ARIA 1.1 it is no longer correct to use aria-hidden when aria-modal is used
        this.modalTemplate = `<section id="${options.id}" class="modal ${options.modifierClass}" role="dialog" aria-modal="true" aria-labelledby="${options.titleId}" draggable="true">
                                ${options.closeButton ? '<a href="#" class="modal__close icon--cross" aria-label="Close" ></a>' : ''}
                                ${options.mobileDraggable ? '<a href="#" class="modal__mobile-draggable" ></a>' : ''}
                                <div class="modal__content">
                                    <div class="row">
                                        <div class="columns small-12">
                                            <h2 class="modal__title" id="${options.titleId}">${options.titleText}</h2>
                                        </div>
                                    </div>
                                </div>
                            </section>`;

        this.modal = document.createElement('div');
        addClass(this.modal, 'modal__container');
        this.modal.innerHTML = this.modalTemplate;
    }

    insertModal() {
        document.body.appendChild(this.modal);
    }

    hookCloseButton() {
        this.closeButton = this.modal.querySelector('.modal__close');

        this.closeButton.addEventListener('click', (e) => {
            e.preventDefault();
            this.removeModal();
            removeClass(document.body, 'modal--active');
        });
    }

    hookDraggableArea() {
        this.draggableSettings = {
            canMoveLeft: false,
            canMoveRight: false,
            moveableElement: this.modal.firstChild,
        };

        makeDraggableItem(this.modal, this.draggableSettings, (touchDetail) => {
            this.handleTouch(touchDetail);
        }, this);
    }

    handleTouch(touchDetail) {
        this.touchDetail = touchDetail;
        const offset = this.touchDetail.moveableElement.offsetTop;

        if (this.touchDetail.type === 'tap') {
            if (hasClass(this.touchDetail.eventObject.target, 'modal__mobile-draggable')) {

                if (offset === this.touchDetail.originY) {
                    this.touchDetail.moveableElement.style.top = '0px';
                } else {
                    this.touchDetail.moveableElement.style.top = `${this.touchDetail.originY}px`;
                }

            } else if (offset > this.touchDetail.originY) {
                this.touchDetail.moveableElement.style.top = `${this.touchDetail.originY}px`;
            } else {
                this.touchDetail.eventObject.target.click();
            }
        } else if (this.touchDetail.type === 'flick' || (this.touchDetail.type === 'drag' && this.touchDetail.distY > 200)) {

            if (this.touchDetail.direction === 'up') {

                if (offset < this.touchDetail.originY) {
                    this.touchDetail.moveableElement.style.top = '0px';
                } else if (offset > this.touchDetail.originY) {
                    this.touchDetail.moveableElement.style.top = `${this.touchDetail.originY}px`;
                }

            } else if (this.touchDetail.direction === 'down') {

                if (offset < this.touchDetail.originY) {
                    this.touchDetail.moveableElement.style.top = `${this.touchDetail.originY}px`;
                } else if (offset > this.touchDetail.originY) {
                    this.touchDetail.moveableElement.style.top = '95%';
                }

            }
        } else {
            this.touchDetail.moveableElement.style.top = `${this.touchDetail.moveableElementStartY}px`;
        }
    }

    removeModal() {
        document.body.removeChild(this.modal);
    }

    static init() {
        const instances = document.querySelectorAll('[data-module="modal"]');

        instances.forEach((module) => {
            const settings = JSON.parse(module.getAttribute('data-modal-settings')) || {};
            new ModalViewModel(module, settings);
        });
    }
}

UPDATE

После проработки было обнаружено, что события .click() являются асинхронными, поэтому я понимаю проблему гонки. Документация и проблемы переполнения стека, продуманные в Интернете, рекомендуют использовать createEvent() и dispatchEvent(), поскольку PhantomJs не понимает new MouseEvent().

Вот мой код, который сейчас пытается это сделать.

modal.spec.js 

// All my imports and other stuff
// ...

function click(element){
    var event = document.createEvent('MouseEvent');
    event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(event);
}

describe("A modal", function() {

    // Some other tests
    // Some other tests

    it("link can be clicked to open a modal", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        click(modalLink);

        const modal = document.body.querySelector('.modal');
        expect(modal).not.toBeNull();
    });

    // After all code
    // ...

});

К сожалению, это дает те же результаты. 1 шаг ближе, но не совсем там.

Ответы [ 2 ]

1 голос
/ 29 марта 2019

После небольшого исследования выясняется, что использование вами события click вызывает асинхронный цикл событий, в сущности говоря: «Эй, поставьте эту штуку на нажатие, а затем запустите все обработчики»

Ваш текущийкод не может этого увидеть и не может реально ждать.Я верю, что вы сможете создать и отправить событие щелчка мышью, используя информацию здесь.https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Я думаю, что это должно позволить вам создать событие щелчка и направить его на ваш элемент.Разница в том, что dispatchEvent является синхронным - он должен блокировать ваш тест, пока обработчики щелчков не будут завершены.Это должно позволить вам сделать ваше утверждение без сбоев или условий гонки.

0 голосов
/ 29 марта 2019

Я наконец нашел решение.

Это 2 части, первая часть пришла от @CodyKnapp. Его понимание click() функции, выполняемой асинхронно, помогло решить первую часть проблемы.

Вот код этой части.

modal.spec.js 

// All my imports and other stuff
// ...

function click(element){
    var event = document.createEvent('MouseEvent');
    event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(event);
}

describe("A modal", function() {

    // Some other tests
    // Some other tests

    it("link can be clicked to open a modal", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        click(modalLink);

        const modal = document.body.querySelector('.modal');
        expect(modal).not.toBeNull();
    });

    // After all code
    // ...


});

Это позволило выполнять код синхронно.

Вторая часть была плохим пониманием с моей стороны, как писать тесты Жасмин. В моих первоначальных тестах я запускал Modal.init() внутри it("is initialised", function() {, хотя на самом деле я хочу запустить это внутри beforeAll(). Это устранило проблему, из-за которой мои тесты не всегда были успешными.

Вот мой окончательный код:

modal.spec.js 

const modalTemplate = require('./modal.hbs');

import '@babel/polyfill';

import Modal from './modal';

function click(element){
    var event = document.createEvent('MouseEvent');
    event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(event);
}

describe("A modal", function() {

    beforeAll(function() {
        const data = {"modal": {"modalLink": {"class": "", "modalId": "modal_1", "text": "Open modal"}, "modalSettings": {"id": "", "modifierClass": "", "titleId": "", "titleText": "Modal Title", "closeButton": true, "mobileDraggable": true}}};
        const modal = modalTemplate(data);
        document.body.insertAdjacentHTML( 'beforeend', modal );

        spyOn(Modal, 'init').and.callThrough();
        Modal.init();
    });

    it("link exists on the page", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        expect(modalLink).not.toBeNull();
    });

    it("is initialised", function() {
        expect(Modal.init).toHaveBeenCalled();
    });

    it("link can be clicked to open a modal", function() {
        const modalLink = document.body.querySelector('[data-module="modal"]');
        click(modalLink);

        const modal = document.body.querySelector('.modal');
        expect(modal).not.toBeNull();
    });

    afterAll(function() {

        console.log(document.body);

        // TODO: Remove HTML

    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...