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

Question

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

我正在努力解决的问题是我在页面上有一个 link，单击此 link 时它会注入一些 HTML。我想测试 HTML 是否已被注入。

现在，我的测试工作正常，但只是有时，根据我可以确定我的 JS 运行是否足够快 HTML 在 [=13= 之前注入] 是运行。如果不是，则测试失败。

如何让我的 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

    });

});

编辑 - 更多信息

为了进一步详细说明，我认为评论中的 link Jasmine 2.0 how to wait real time before running an expectation 帮助我更好地理解了一点。所以我们所说的是我们想要 spyOn 函数并等待它被调用，然后启动一个回调，然后解析测试。

太棒了。

我的下一个问题是，如果你看看下面我的 ModalViewModel class 的结构，我需要能够 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() 事件是异步的，这就是我解决竞争问题的原因。文档和堆栈溢出问题考虑到网络建议使用 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 步，但还不够。

Answer 1

经过一番研究，您对点击事件的使用似乎触发了一个异步事件循环，本质上说 "Hey set this thing to be clicked and then fire all the handlers"

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

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

Answer 2

我终于找到了解决办法。

这有两部分，第一部分来自@CodyKnapp。他对 click() 函数运行ning 异步的洞察帮助解决了问题的第一部分。

这是这部分的代码。

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


});

这允许代码同步运行。

第二部分是我对如何编写 Jasmine 测试的理解不足。在我最初的测试中，我在 it("is initialised", function() { 中运行ning Modal.init() 而实际上我想在 beforeAll() 中运行ning 这个。这解决了我的测试并不总是成功的问题。

这是我的最终代码：

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

    });

});

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

Prevent Jasmine Test expect() Resolving Before JS Finished Executing

javascript

unit-testing

jasmine

phantomjs

karma-jasmine