javascript - 防止Jasmine测试expect()在JS执行完成之前解析

Question

希望能帮到你。我对单元测试相当陌生。我设置了 Karma + Jasmine，它运行 PhantomJS 浏览器。这一切都很好。

我遇到的问题是页面上有一个链接，当单击该链接时，它会注入(inject)一些 HTML。我想测试 HTML 是否已注入(inject)。

现在，我的测试可以正常工作，但只是有时，根据我可以判断我的 JS 运行速度是否足够快，HTML 会在 expect() 运行之前注入(inject)。如果不是，则测试失败。

如何让我的 Jasmine 测试在 expect() 运行之前等待所有 JS 完成执行？

有问题的测试是 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 how to wait real time before running an expectation我认为，发表评论帮助我更好地理解了。因此，我们想要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);
        });
    }
}

更新

经过研究后发现 .click() 事件是异步的，这就是我对竞争问题感到困惑的原因。文档和 Stack Overflow 问题深思熟虑，网络建议使用 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
    // ...

});

不幸的是，这会产生相同的结果。又近了一步，但还没有完全实现。

Answer 1

经过一番研究，似乎您对单击事件的使用正在触发异步事件循环，本质上是说“嘿，将这个东西设置为单击，然后触发所有处理程序”

您当前的代码看不到它，也没有真正的方法来等待它。我确实相信您应该能够使用此处的信息构建和调度鼠标单击事件。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

我认为这应该允许您构建一个单击事件并将其分派(dispatch)到您的元素上。不同之处在于，dispatchEvent 是同步的 - 它应该阻止您的测试，直到单击处理程序完成。这应该允许您在没有失败或竞争条件的情况下进行断言。