javascript - 让 requirejs 与 Jasmine 一起工作

标签 javascript unit-testing requirejs bdd jasmine

首先我想说我是 RequireJS 的新手,甚至是 Jasmine 的新手。

我在使用 SpecRunner 时遇到一些问题并且需要 JS。我一直在关注 Uzi Kilon 和 Ben Nadel(以及其他一些人)的教程,他们帮助了一些人,但我仍然遇到一些问题。

似乎,如果在测试中抛出错误(我可以特别想到一个,类型错误),规范运行器 html 将显示。这告诉我我在 javascript 中遇到了一些问题。但是,在我修复这些错误后,不再显示 HTML。 我根本无法显示测试运行程序。有人能发现我的代码有什么问题会导致这个问题吗?

这是我的目录结构:

Root 
|-> lib
    |-> jasmine
        |-> lib (contains all of the jasmine lib)
        |-> spec
        |-> src
    |-> jquery (jquery js file)
    |-> require (require js file) 
index.html (spec runner) specRunner.js

这是 SpecRunner(索引)HTML:

<!doctype html>
<html lang="en">
    <head>
        <title>Javascript Tests</title>

        <link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">

        <script src="lib/jasmine/lib/jasmine.js"></script>
        <script src="lib/jasmine/lib/jasmine-html.js"></script>
        <script src="lib/jquery/jquery.js"></script>
        <script data-main="specRunner" src="lib/require/require.js"></script>

        <script>
            require({ paths: { spec: "lib/jasmine/spec" } }, [
                    // Pull in all your modules containing unit tests here.
                    "spec/notepadSpec"
                ], function () {
                    jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
                    jasmine.getEnv().execute();
                });
        </script>

    </head>

<body>
</body>
</html>

这是specRunner.js(配置)

require.config({
    urlArgs: 'cb=' + Math.random(),
    paths: {
        jquery: 'lib/jquery',
        jasmine: 'lib/jasmine/lib/jasmine',
        'jasmine-html': 'lib/jasmine/lib/jasmine-html',
        spec: 'lib/jasmine/spec/'
    },
    shim: {
        jasmine: {
            exports: 'jasmine'
        },
        'jasmine-html': {
            deps: ['jasmine'],
            exports: 'jasmine'
        }
    }
});

这是一个规范:

require(["../lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("");


    });
});

记事本来源:

define(['lib/jasmine/src/note'], function (note) {

    var notes = [
        new note('pick up the kids', 'dont forget to pick  up the kids'),
        new note('get milk', 'we need two gallons of milk')
    ];


    return {
        noteTitles: function () {
            var val;

            for (var i = 0, ii = notes.length; i < ii; i++) {
                //alert(notes[i].title);
                val += notes[i].title + ' ';
            }

            return val;
        }
    };
});

和注释来源(JIC):

define(function (){
    var note = function(title, content) {
        this.title = title;
        this.content = content;
    };

    return note;
});

我已确保就应用程序而言,路径是正确的。一旦我开始工作,我就可以配置这些路径,这样就不会那么讨厌了。

最佳答案

我设法通过一些试验和错误来实现它。主要问题是,当您编写规范时,它不是您想要创建的要求,您想要使用 define:

原文:

require(["/lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("pick up the kids get milk");


    });
});

工作:

define(["lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
        });

    });
});

在做了一些研究之后,很明显,当使用 RequireJS 时,任何你想要 require() 使用的东西都必须包装在一个定义中(我想现在看起来很明显)。您可以看到,在 specRunner.js 文件中,执行测试时使用了 require(因此需要“定义”规范。

另一个问题是,在创建规范时,describe() 和 it() 是必需的(不仅仅是我在发布的示例中使用的 describe)。

原文:

describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("pick up the kids get milk");


    });

工作:

describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
        });

    });

我还改变了测试运行器所在的位置,但这是一个重构,并没有改变测试的结果。

同样,这里是文件和更改:

note.js:保持不变

notepad.js:保持不变

index.html:

<!doctype html>
<html lang="en">
    <head>
        <title>Javascript Tests</title>
        <link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">
        <script data-main="specRunner" src="lib/require/require.js"></script>
    </head>

    <body>
    </body>
</html>

specRunner.js:

require.config({
    urlArgs: 'cb=' + Math.random(),
    paths: {
        jquery: 'lib/jquery',
        'jasmine': 'lib/jasmine/lib/jasmine',
        'jasmine-html': 'lib/jasmine/lib/jasmine-html',
        spec: 'lib/jasmine/spec/'
    },
    shim: {
        jasmine: {
            exports: 'jasmine'
        },
        'jasmine-html': {
            deps: ['jasmine'],
            exports: 'jasmine'
        }
    }
});


require(['jquery', 'jasmine-html'], function ($, jasmine) {

    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var htmlReporter = new jasmine.HtmlReporter();

    jasmineEnv.addReporter(htmlReporter);

    jasmineEnv.specFilter = function (spec) {
        return htmlReporter.specFilter(spec);
    };

    var specs = [];

    specs.push('lib/jasmine/spec/notepadSpec');



    $(function () {
        require(specs, function (spec) {
            jasmineEnv.execute();
        });
    });

});

notepadSpec.js:

define(["lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk");
        });

    });
});

关于javascript - 让 requirejs 与 Jasmine 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16423156/

相关文章:

javascript - 如何将我的 RequireJS main.js 分成两个文件?

c# - MVC 应用程序中的 Require.js

javascript - RegEx 实时反转

c# - Visual Studio 2013 代码覆盖率 - 未检测二进制文件

javascript - 避免使用 requirejs 加载已经注入(inject)到 DOM 中的模块

c++ - 捕获单元测试库链接错误

javascript - 为什么这个带有简单异步回调的测试用例(Jest)会失败?

javascript - 从 Can.Model 获取直接 Json

javascript - 使用 Jquery 滑动切换表行

javascript - 无法使菜单在单击时向下滑动,然后使用 jquery 反转此动画