Jasmine:如何测试jQuery插件

时间:2015-03-09 14:23:04

标签: javascript jquery jasmine karma-runner jasmine-jquery

我对使用Jasmine进行单元测试非常新,我确实有一个问题。 我有一个简单的按钮,在mousedown和mouseup上添加了一个类:

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

我的业力配置文件包含以下内容:

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']
    });
};

插件代码存储在文件:OfficeUI.Elements.js中,该文件是从karma配置文件中引用的。

我的夹具文件包含以下逻辑:

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

所以,根据我的插件,当在其上执行mousedown事件时,此页面上的锚点应该有一个类ie-fix

我的测试文件本身如下:

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');
    });
});

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

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> 

所以,测试失败了,但我根本不知道为什么。 谁有想法?

修改:已更改为当前版本

我修改了所有内容,而这里是新的karma.conf.js

module.exports = function(config){
    config.set({
        basePath : '../../',
        files : [
            // Resources
            '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: 'Tests/Fixtures/*.Test.html', watched: true, served:     true, included: false },

            // Unit Tests
            'Tests/**/*.Test.js'
        ],
        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/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');
    });
});

单元测试仍然失败。

亲切的问候,

0 个答案:

没有答案