Javascript 在JS完成执行之前防止Jasmine Test expect（）解析

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

我正在挣扎的是，我在页面上有一个链接，当点击这个链接时，它会注入一些HTML。我想测试HTML是否已经被注入

现在，我已经让测试开始工作了，但只是有时候，从我的JS运行速度来看，HTML是否在运行

expect（）

之前被注入。如果没有，测试失败

如何让Jasmine测试在运行

expect（）

之前等待所有JS完成执行

所讨论的测试是

it（“可以单击链接打开模式”），function（）{

模态规范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

    });

});

// 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
    // ...

});

// 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
    // ...


});

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

    });

});

编辑-更多信息

为了进一步说明这一点，我认为注释中的链接帮助我更好地理解了这一点。因此，我们想要

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事件并将其分派到您的元素上。区别在于dispatchEvent是同步的-它应该阻止您的测试，直到click处理程序完成。这应该允许您在没有失败或争用条件的情况下执行断言。

我终于找到了一个解决方案

这有两个部分，第一部分来自@CodyKnapp。他对异步运行的

click（）

函数的洞察帮助解决了问题的第一部分

这是这部分的代码

模态规范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

    });

});

// 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
    // ...

});

// 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
    // ...


});

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

    });

});

这允许代码同步运行

第二部分是我对如何编写Jasmine测试的理解不足。在我最初的测试中，我运行的是

Modal.init（）

内部的

it（“初始化”，function（）{

），而实际上我想在

beforeAll（）内部运行它

。这解决了我的测试不总是成功的问题

这是我的最终代码：

模态规范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

    });

});

// 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
    // ...

});

// 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
    // ...


});

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

    });

});

---

请查看此链接以获取更多帮助-嘿@demouser123，我不确定这是否有帮助，因为我没有进行AJAX调用，我只是创建一个HTML字符串并将其注入DOM中。@CodyKnapp我实际上同意你的观点，这对我来说也没有什么意义，毕竟我所要做的就是使用

函数
console.log（document.body）；
有时有注入的HTML，有时没有。我的假设是这是一个种族问题，但也许不是？经过一点研究（很抱歉删除了我的评论-我没有看到你的评论）我发现点击是异步的。这就是为什么你在你的断言和你添加的点击事件处理程序之间得到这个竞态条件。这是我看到的唯一可能的事情。我正在四处看看，看看是否有什么东西可以方便地等待点击的整个过程完成。@CodyKnapp很高兴知道，谢谢感谢您的帮助，希望您能在我被难倒的时候找到一些东西。太棒了，这是朝着正确方向迈出的一步，谢谢。我的下一个障碍是PhantomJS不支持
new MouseeEvent（）
，这是使用
所必需的。dispatchEvent（）
。如果您对使用jquery等不感兴趣，我会说这是一种方法。如果您使用这种方法，您可以使用jquery的
trigger
函数并将回调交给它来执行您的断言同意jquery的
trigger
甚至可能会使这更容易，但如果可能，我真的希望避免bri将jQuery加入到混合中。我很高兴看到你把一切都解决了。然而，我会说，监视和测试init可能没有必要。如果init没有提供其他可验证的行为，那么可能需要重新评估它是否值得拥有。嘿@CodyKnapp，这是一个非常好的观点，我将有一个了解什么是最好的测试以及我的一般测试策略。正如我之前所说的，这是我第一次尝试，所以任何提示/提示都是非常受欢迎的！谢谢。我想这真的取决于你的公共界面。我猜你正在使用测试中的DOM元素和行为……在这种情况下，我建议你测试的是什么与DOM的交互按您的意愿进行。只要行为正确，任何必须发生的事情都与测试无关。我很高兴分享更多关于它的想法-特别是如果您有具体问题-请随时向我传达您的任何想法/问题！@CodyKnapp感谢您的帮助和建议注意，我已经重构了我的代码，以更符合逻辑的方式工作，并测试必要的项目。我不会在这里发布，因为这与我无关，但你帮了我很大的忙。