Javascript Jasmine：如何测试jQuery插件

我对Jasmine的单元测试非常陌生，我确实有一个问题。 我有一个简单的按钮，可以在mousedown和mouseup上添加“toggle”类：

$(function() {
    $('#OfficeUI a.button').on('mousedown mouseup', function(e) {
        $(this).addClass('ie-fix');
    });
});

我的karma配置文件包含以下内容：

module.exports = function(config){
    config.set({
        basePath : '../../',
        files : [
            // Dependencies
            'Resources/External/Bower/jquery/dist/jquery.js',
            'Resources/External/Bower/angular/angular.js',
            'Resources/External/Bower/angular-mocks/angular-mocks.js',
            'Resources/Scripts/OfficeUI.js',
            'Resources/Scripts/Elements/OfficeUI.Elements.js',

            // Fixtures
            { pattern: 'Unit Tests/Fixtures/**/*.Test.html', watched: true,     served: true, included: false },

            // Files to test.
            { pattern: 'Unit Tests/**/*.Test.js', watched: true, server: true,     included: true }
        ],
        autoWatch : true,
        watched: true,
        server: true,
        include: false,
        frameworks: ['jasmine-jquery', 'jasmine'],
        browsers: ['Chrome']
    });
};

describe('Unit: OfficeUI Elements', function() {
    // Provides a section to define code to execute before every test is     executed.
    beforeEach(function() {
        jasmine.getFixtures().fixturesPath = 'base/Unit Tests/Fixtures/';
    });

    it('A class \'ie-fix\' should be added to any \'a href\' which is marked     with a \'button\' class when you click the element.', function() {
        loadFixtures('OfficeUI.Elements.Test.html');
        $('#OfficeUI a.button').mousedown();
        expect($('#OfficeUI a.button')).toHaveClass('ie-fix');
    });
});

插件代码存储在文件：

OfficeUI.Elements.js

中，该文件在karma配置文件中引用

我确实有包含以下逻辑的夹具文件：

<div id="OfficeUI">
    <a href="#" class="button">
        <span></span>
    </a>
</div>

但是，当我执行测试时，会弹出以下错误：

Expected ({ 0: HTMLNode, length: 1, prevObject: ({ 0: HTMLNode, context: HTMLNode, length: 1 }), context: HTMLNode, selector: '#OfficeUI a.button' }) to have class 'ie-fix'.
    at Object.<anonymous> 

以及修改后的测试运行程序文件：

describe("Unit: OfficeUI Elements", function() {
    // Provides a section to define code to execute before every test is     executed.
    beforeEach(function() {
        jasmine.getFixtures().fixturesPath = 'base/Tests/Fixtures/';
        loadFixtures('OfficeUI.Elements.Button.Test.html');
    });

    it("A class 'ie-fix' should be added to any 'a href' which is marked with a     'button' class when you click the element.", function() {

        $('#OfficeUI a.button').first().click();

        expect($('#OfficeUI a.button').first()).toHaveClass('ie-fix');
    });
});

单元测试仍然失败

---

亲切问候，

也许这是一个愚蠢的评论，但您在哪里单击该元素？也许您应该在元素上触发

mousedown

或

mouseup

，然后查找类。我想。在fixture下，我通常执行

$（“#OfficeUI a.button”）.mousedown（）

，但即使如此，测试还是失败了。我的jQuery插件似乎没有加载到我的页面上，但我不知道该怎么做。你是否尝试过使用

$（elem）.trigger（'mousedown'）

？我已经用我迄今为止尝试过的更新了我的问题，但仍然失败。你知道怎么解决吗？

describe("Unit: OfficeUI Elements", function() {
    // Provides a section to define code to execute before every test is     executed.
    beforeEach(function() {
        jasmine.getFixtures().fixturesPath = 'base/Tests/Fixtures/';
        loadFixtures('OfficeUI.Elements.Button.Test.html');
    });

    it("A class 'ie-fix' should be added to any 'a href' which is marked with a     'button' class when you click the element.", function() {

        $('#OfficeUI a.button').first().click();

        expect($('#OfficeUI a.button').first()).toHaveClass('ie-fix');
    });
});