WebStorm

Question

我对 WebStorm 的使用还很陌生，但它没有按预期工作。我过去有一个项目，但现在我尝试重新创建它并尝试对我的代码进行单元测试。我对单元测试 JavaScript 代码很陌生。

所以，我有一个文件 karma.conf.js，其中包含以下内容：

module.exports = function(config){
    config.set({
        basePath : './',
        files : [
            '../../Resources/External/Bower/angular/angular.js',
            '../../Resources/External/Bower/angular-mocks/angular-mocks.js',
            '../../Resources/Scripts/OfficeUI.js',
            '../../Unit Tests/**/*.Test.js'
        ],
        autoWatch : true,
        frameworks: ['jasmine-jquery', 'jasmine'],
        browsers : ['Chrome']
    });
};

因此，我使用 Jasmine 框架对 Karma 进行运行测试。我已经包含 jasmine-jquery 以便将固定装置加载到我的 HTML 代码中。

所以，我确实有一个 JavaScript 功能，当您按下或释放按钮时，它会切换 class：

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

现在，我编写了如下所示的单元测试：

describe("Unit: OfficeUI Elements", function() {
    // Load up the HTML page 'OfficeUI.Elements.Test.html' before every test     is executed.
    beforeEach(function() {
        loadFixtures('OfficeUI.Elements.Test.html');
    });

    it("should do some stuff in this example", function() {
        expect(true).toEqual(true);
    });
});

下图显示了我项目的文件夹结构。

现在，当我进行运行测试时，我确实收到以下错误：

Error: Fixture could not be loaded: spec/javascripts/fixtures/OfficeUI.Elements.Test.html (status: error, message: undefined)

我尝试通过更改单元测试中的 beforeEach 方法来解决此问题，如下所示：

beforeEach(function() {
    jasmine.getFixtures().fixturesPath = '/OfficeUI.Beta/Unit Tests/Pages';
    loadFixtures('OfficeUI.Elements.Test.html');
});

我在 fixturesPath 中尝试了各种方法，但我一直收到同样的错误。

有人知道如何解决这个问题吗？非常感谢任何帮助。

编辑：更新业力配置：

module.exports = function(config){
    config.set({
        basePath : '../../',
        files : [
            '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',
            'Unit Tests/**/*.Test.js',

            { pattern: 'Resources/Unit Tests/*.html', watched: true, served:         true, included: false },
        ],
        autoWatch : true,
        watched: true,
        server: true,
        include: false,
        frameworks: ['jasmine-jquery', 'jasmine'],
        browsers: ['Chrome']
    });
};

Answer 1

在我的 karma 配置文件中，我必须告诉 karma 它为 jasmine 提供 fixture 文件。

尝试在您的业力配置文件的文件部分插入以下内容：

 // fixtures
 { pattern: '../../Resources/Unit Tests/Pages/*.*', watched: true, served: true, included: false },

Answer 2

在您的 OfficeUI.Elements.Test.js 文件中更改以下行：

jasmine.getFixtures().fixturesPath = '/Tests/';

至：

jasmine.getFixtures().fixturesPath = 'base/Tests/';

对我来说很好

WebStorm - 茉莉花 jQuery

WebStorm - Jasmine jQuery

jquery

unit-testing

karma-runner

karma-jasmine