0

私はジャスミンが初めてで、これまでにいくつかの基本的なテストを設定できました。私が今やろうとしているのは、div、タグなどの要素でマウスクリックイベントをシミュレートするテストを作成することです

私のテストでは、リンクをクリックすると div コンテナーが展開されるかどうかを判断できるはずです。これはクラス名で判断します。

私のソース コードには、クリック イベントをリッスンするイベント リスナーがあります。

MYSITE.$("sites.retail.UI.Product").Filter = (function () {

    var STATE = MYSITE.system.BitState;
    var NODE = MYSITE.system.DOM.node;

    function _constructor() {
        var _searchContainer = document.getElementById("filterWidget");
        this.toggle = document.getElementById("filterHeader");
        var _self = this;
        MYSITE.system.event.attach(_searchContainer, "click",
            function (e) {
                if (NODE.hasClassName(e.target, "filterHeader")) {
                    if (!STATE.Manager.isFlagSelected('Global', null, STATE.Flags.Global.ProductListShowRefinements)) {
                        _self.collapse();
                    } else {
                        MYSITE.system.DOM.node.removeClassName(document.getElementById('filterCollapse'), "hide")
                        _self.expand();
                    }
                    e.prevent();
                }
                else if (NODE.hasClassName(e.target, "showMoreCont")) {
                    NODE.addClassName(NODE.getElementsByClassAndTagName(_searchContainer, "searchShowMoreCount", "div")[0], "hide");
                    NODE.removeClassName(NODE.getElementsByClassAndTagName(_searchContainer, "hiddenSearchContent", "div")[0], "hide");
                    e.prevent();
                }
                else if (NODE.hasClassName(e.target, "showLessCont")) {
                    NODE.removeClassName(NODE.getElementsByClassAndTagName(_searchContainer, "searchShowMoreCount", "div")[0], "hide");
                    NODE.addClassName(NODE.getElementsByClassAndTagName(_searchContainer, "hiddenSearchContent", "div")[0], "hide");
                    e.prevent();
                }
            }
        );



        _constructor.base.constructor.call(this, document.getElementById("filterWidget"), STATE.Manager.isFlagSelected('Global', null, STATE.Flags.Global.ProductListShowRefinements));
        return this;
    }
    _constructor.extend(MYSITE.UI.Collapse);

    _constructor.prototype.collapse = function (settings) {
        this.toggle.className = "filterHeader closed"; //Set explicitly rather than addNew
        STATE.Manager.setFlag('Global', null, parseInt(STATE.Flags.Global.ProductListShowRefinements));
        _constructor.base.collapse.call(this, { steps: '1' });
    }

そしてHTMLマークアップは

<div id="filterWidget">
<a class="filterHeader closed" id="filterHeader" href="#">
<span class="filterHeader">Refine your search</span>
</a>
<div class="collapsible" id="filterCollapse">
<div class="content">
</div></div></div>

私が試みている単体テストは次のとおりです。

describe("Filter", function() {

    it("should use collapse function", function() {
        loadFixtures('fixture.html');
        var filter = new MYSITE.sites.retail.UI.Product.Filter();

        jQuery.noConflict();
        var btn = jQuery("#filterHeader");
        var click = jQuery.Event('click');
        btn.trigger(click);

        expect(filter.toggle.className).toEqual("filterHeader open");
    });

});

しかし、クリック イベントはソース コードによって決してピックアップされないようです。

私は何を間違っていますか？

前もって感謝します

4

2 に答える 2

2

jquery のメソッドは、ブラウザで実際のイベントを作成することも、 !triggerのようなコア js メソッドに登録されたイベント ハンドラを呼び出すこともありません。addEventListener

テストにネイティブ ブラウザ イベントが含まれる場合に jquery チームが使用するプロジェクトが github にあり、プラグインは次のとおりです: https://github.com/eduardolundgren/jquery-simulate

アイデアは、実際のイベントがフローを開始するときに最終的に jquery ハンドラーを呼び出すというものであり、ボーナスは、jquery なしで登録された他の種類のハンドラーでも応答することです。

于 2013-12-31T10:17:44.257 に答える
0

問題は、クエリによってトリガーされるイベントに、デフォルトでターゲット オブジェクトがないことです。これを試して：

var click = jQuery.Event("click", { target: $('<div class="">test</div>') });
于 2011-12-06T23:27:51.333 に答える