让TypeScript,Karma,RequireJS和Chai一起工作的问题

Question

让TypeScript,Karma,RequireJS和Chai一起工作的问题

Eya*_*nik 2 javascript requirejs typescript karma-runner

我正在尝试使用TypeScript重写我的一个项目,因为我对TypeScript和RequireJS很新,我不确定我缺少什么.

我遵循了本指南Karma - RequireJS并仔细检查了所有内容,但我还没有设法让它至少不是RequireJS.

PS我得到的错误是在帖子的最后.

我正在为这个项目使用的目录结构如下:

.
|-- WebEssentials-Settings.json
|-- build
|-- jake.sh
|-- jakefile.js
|-- node_modules
|   |-- chai
|   |   |-- CONTRIBUTING.md
|   |   |-- History.md
|   |   |-- README.md
|   |   |-- ReleaseNotes.md
|   |   |-- bower.json
|   |   |-- chai.js
|   |   |-- index.js
|   |   |-- karma.conf.js
|   |   |-- karma.sauce.js
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- package.json
|   |   `-- sauce.browsers.js
|   |-- jake
|   |   |-- Jakefile
|   |   |-- Makefile
|   |   |-- README.md
|   |   |-- bin
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- package.json
|   |   `-- test
|   |-- karma
|   |   |-- CHANGELOG.md
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- bin
|   |   |-- config.tpl.coffee
|   |   |-- config.tpl.js
|   |   |-- config.tpl.ls
|   |   |-- karma-completion.sh
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- package.json
|   |   |-- requirejs.config.tpl.coffee
|   |   |-- requirejs.config.tpl.js
|   |   `-- static
|   |-- karma-chai
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- adapter.js
|   |   |-- index.js
|   |   `-- package.json
|   |-- karma-mocha
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- lib
|   |   `-- package.json
|   |-- karma-requirejs
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- lib
|   |   `-- package.json
|   |-- mocha
|   |   |-- Readme.md
|   |   |-- bin
|   |   |-- images
|   |   |-- index.js
|   |   |-- lib
|   |   |-- mocha.css
|   |   |-- mocha.js
|   |   |-- node_modules
|   |   `-- package.json
|   |-- requirejs
|   |   |-- README.md
|   |   |-- bin
|   |   |-- package.json
|   |   `-- require.js
|   `-- shelljs
|       |-- LICENSE
|       |-- README.md
|       |-- bin
|       |-- global.js
|       |-- make.js
|       |-- package.json
|       |-- scripts
|       |-- shell.js
|       `-- src
|-- scratchpad.txt
|-- src
|   |-- app.main.js
|   |-- app.main.js.map
|   |-- app.main.ts
|   |-- core
|   |   |-- exceptions.js
|   |   |-- exceptions.js.map
|   |   |-- exceptions.ts
|   |   |-- string.js
|   |   |-- string.js.map
|   |   |-- string.ts
|   |   |-- types.js
|   |   |-- types.js.map
|   |   `-- types.ts
|   |-- css
|   |-- index.html
|   |-- libs
|   |   |-- jquery-2.1.0.js
|   |   |-- require.js
|   |   `-- typings
|   |-- tests
|   |   |-- core
|   |   |-- test.main.js
|   |   |-- test.main.js.map
|   |   `-- test.main.ts
|   |-- tsToolkit.csproj
|   |-- tsToolkit.csproj.user
|   |-- web.Debug.config
|   |-- web.Release.config
|   |-- web.config
|   `-- widgets
|-- tools
|   |-- karma
|   |   `-- karma.conf.js
|   |-- lint
|   |   `-- lint_runner.js
|   `-- mocha
|       `-- mocha.ext.js
|-- tsToolkit.sln
|-- tsToolkit.sln.DotSettings.user
`-- tsToolkit.v12.suo

43 directories, 83 files

Run Code Online (Sandbox Code Playgroud)

这是我用于Karma的配置文件. - karma.conf.js

// Karma configuration
// Generated on Wed Sep 25 2013 00:47:38 GMT+0300 (Jerusalem Daylight Time)

module.exports = function(config) {
  config.set({

    // base path, that will be used to resolve files and exclude
    basePath: '../../',


    // frameworks to use
    frameworks: ['requirejs', 'mocha', 'chai'],


    // list of files / patterns to load in the browser
    files: [
        "tools/mocha/mocha.ext.js",
        "src/libs/*.js",
        "src/tests/*/*.js",
        "src/tests/test.main.js"
    ],


    // list of files to exclude
    exclude: [
        'src/main.js'
    ],


    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['progress'],


    // web server port
    port: 8380,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [],


    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

Run Code Online (Sandbox Code Playgroud)

这是我对RequireJS的配置 - tests.main.js

interface Window {
// ReSharper disable InconsistentNaming
    __karma__: any;
// ReSharper restore InconsistentNaming
}

var tests = [];
for (var file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (/\.tests\.js$/.test(file))
        {
            tests.push(file);
        }
    }
}

declare var requirejs: any;
requirejs.config({
    baseUrl: '/base/src',

    deps: tests,

    callback: window.__karma__.start
});

Run Code Online (Sandbox Code Playgroud)

这是测试文件 - types.tests.ts

import Types = require("./../../core/types");

describe("isUndefined", () =>
{
    it("should return true when the object is undefined", () =>
    {
    });
});

Run Code Online (Sandbox Code Playgroud)

这是我试图测试的东西.

class Types {
    public static isNull(value: any) : boolean
    {
        return false;
    }

    public static isUndefined(value: any) : boolean
    {
        return false;
    }

    public static isString(value: any) : boolean
    {
        return false;
    }

    public static isElement(value: any) : boolean
    {
        return false;
    }

    public static isNumber(value: any) : boolean
    {
        return false;
    }
}

export = Types;

Run Code Online (Sandbox Code Playgroud)

最后,这是我得到的错误.

INFO [IE 9.0.0 (Windows 7)]: Connected on socket H-LT4D3cwsrYq1V01VdY with id manual-4093
IE 9.0.0 (Windows 7) ERROR
  Mismatched anonymous define() module: function(require, exports) {
      describe("isUndefined", function () {
          it("should return true when the object is undefined", function () {
          });
      });
  }
  http://requirejs.org/docs/errors.html#mismatch
  at D:/Projects/Code/Development/Visual Studio/tsToolkit/node_modules/requirejs/require.js:141

Run Code Online (Sandbox Code Playgroud)

笔记:

我试图编辑测试的生成的.js文件,并使用命名模块,以确保一切正常,它确实!但我想,通过每个测试并为生成的.js文件添加名称并不是很有意义,不是吗？

define("core/types", ["require", "exports"], function(require, exports) {
    describe("isUndefined", function () {
        it("should return true when the object is undefined", function () {
        });
    });
});
//# sourceMappingURL=types.tests.js.map

Run Code Online (Sandbox Code Playgroud)

我敢肯定,经过对TypeScript的多次迭代,他们并没有错过它,我希望如此.:p

我想我可以编写一些代码来自动命名这些模块,因为我正在使用构建文件,但我真的不想添加额外的工作,可能会再次保存,我希望.

Answer 1

Eya*_*nik 6

我花了几天时间弄明白,我的Karma配置文件和requirejs'tests.main.js'文件中的路径都是不正确的.

我也改变了项目结构,所以这里是我改变以使其工作的一切.

该解决方案现在可在GitHub上获得.

项目的目录结构.

.
|-- node_modules
|   |-- jake
|   |   |-- bin
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- test
|   |   |-- Jakefile
|   |   |-- Makefile
|   |   |-- README.md
|   |   `-- package.json
|   |-- jasmine-node
|   |   |-- bin
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- scripts
|   |   |-- spec
|   |   |-- src
|   |   |-- Gruntfile.coffee
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- bower.json
|   |   |-- index.js
|   |   `-- package.json
|   |-- karma
|   |   |-- bin
|   |   |-- lib
|   |   |-- node_modules
|   |   |-- static
|   |   |-- CHANGELOG.md
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- config.tpl.coffee
|   |   |-- config.tpl.js
|   |   |-- config.tpl.ls
|   |   |-- karma-completion.sh
|   |   |-- package.json
|   |   |-- requirejs.config.tpl.coffee
|   |   `-- requirejs.config.tpl.js
|   |-- karma-jasmine
|   |   |-- lib
|   |   |-- LICENSE
|   |   |-- README.md
|   |   `-- package.json
|   |-- karma-requirejs
|   |   |-- lib
|   |   |-- LICENSE
|   |   |-- README.md
|   |   `-- package.json
|   |-- karma-requirejs-preprocessor
|   |   `-- index.js
|   |-- requirejs
|   |   |-- bin
|   |   |-- README.md
|   |   |-- package.json
|   |   `-- require.js
|   `-- shelljs
|       |-- bin
|       |-- scripts
|       |-- src
|       |-- LICENSE
|       |-- README.md
|       |-- global.js
|       |-- make.js
|       |-- package.json
|       `-- shell.js
|-- src
|   |-- css
|   |-- framework
|   |   |-- core
|   |   `-- widgets
|   |-- libs
|   |   |-- typings
|   |   |-- jquery-2.1.0.js
|   |   `-- require.js
|   |-- tests
|   |   |-- core
|   |   `-- test.main.js
|   |-- app.main.js
|   |-- app.main.js.map
|   |-- app.main.ts
|   |-- index.html
|   |-- tsToolkit.csproj
|   |-- tsToolkit.csproj.user
|   |-- web.Debug.config
|   |-- web.Release.config
|   `-- web.config
|-- tools
|   `-- karma
|       `-- karma.conf.js
|-- WebEssentials-Settings.json
|-- jake.sh
|-- jakefile.js
|-- karma.sh
|-- scratchpad.txt
|-- tsToolkit.sln
|-- tsToolkit.sln.DotSettings.user
`-- tsToolkit.v12.suo

40 directories, 57 files

Run Code Online (Sandbox Code Playgroud)

Karma配置文件.

// Karma configuration
// Generated on Fri May 16 2014 08:27:07 GMT+0300 (Jerusalem Daylight Time)

module.exports = function(config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '../../',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine', 'requirejs'],


        // list of files / patterns to load in the browser
        files: [
            {pattern: 'src/libs/*.js', included: false},
            {pattern: 'src/framework/**/*.js', included: false},
            {pattern: 'src/tests/**/*.tests.js', included: false},
            'src/tests/test.main.js'
        ],


        // list of files to exclude
        exclude: [
            'src/app.main.js'
        ],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {

        },


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],


        // web server port
        port: 8380,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
    });
};

Run Code Online (Sandbox Code Playgroud)

这是requirejs文件 - types.tests.js

var tests = [];
for (var file in window.__karma__.files) {
    if (/\.tests\.js$/.test(file)) {
        tests.push(file);
    }
}

requirejs.config({
    baseUrl: '/base/src',

    deps: tests,

    callback: window.__karma__.start
});

Run Code Online (Sandbox Code Playgroud)

我想测试的类的一个例子是用TypeScript编写的 - types.ts

class Types {
    public static isNull(value: any) : boolean
    {
        return false;
    }

    public static isUndefined(value: any) : boolean
    {
        return false;
    }

    public static isString(value: any) : boolean
    {
        return false;
    }

    public static isElement(value: any) : boolean
    {
        return false;
    }

    public static isNumber(value: any) : boolean
    {
        return false;
    }
}

export = Types;

Run Code Online (Sandbox Code Playgroud)

最后,我为函数'isUndefined'编写的测试 - types.tests.ts

import Types = require("framework/core/types");

describe("isUndefined", () => {

    it("should return true when the object is undefined", () => {
        // Arrange
        var obj;

        // Act
        var value = Types.isUndefined(obj);

        // Assert
        expect(value).toBe(true);
    });

});

Run Code Online (Sandbox Code Playgroud)

我希望它足够清楚,它将帮助那些正在努力解决同样问题的人.

PS即使我为Karma写了一个requirejs-preprocessor来命名我的模块,在这些更改后我不需要它而且它只是起作用.

归档时间：	12 年前
查看次数：	6192 次
最近记录：	9 年，5 月前