首页 文章

使用Require和Resharper进行前端javascript测试

提问于
浏览 次
1

所以我一直试图弄清楚前端测试是如何工作的（单元测试），但我在某些方面陷入困境 .

所以我的茉莉花测试设置如下：

describe('Blabla', function () {

    it('returns true', function () {
        var people = require(["people"], function(ppl) {
            return ppl;
        });
        expect(people.getTitle()).toBe('People piolmjage');
    });
});

但运行这个让我：

TypeError：undefined不是一个功能

显然，人们是不确定的 . 所以也许我的回调来得太晚了 . 但如果我删除回调，我会得到以下错误：

it('returns true', function () {
    var people = require("people");
    expect(people.getTitle()).toBe('People piolmjage');
});

错误：尚未为上下文加载模块名称“people”：_ . 使用require（[]）

我认为我的设置有问题......任何人都知道如何让这个FE测试工作？

我确实设法让它从控制台工作并使用 define 结合phantomjs和durandal测试文件，但我需要这个在控制台之外工作，因此我不能使用这个 define 因为测试运行器不会找到我的测试 .

这就是为什么我需要使用CommonJS获得所需的视图模型 .

people model

define([],
function () {
    var getTitle = function() {
        return "hello";
    }

    var peopleViewModel = {
        title: 'People page',
        getTitle: getTitle
    };
    return peopleViewModel;
});

UPDATE

我得到了代码，但 not 与resharper . 关注this page from the durandal webpage .

但这会让我获得控制台输出，这是非结构化实际读取的方式 .

但是，我可以使用 define 关键字，然后它可以正常工作 . 所以我假设它是 require 关键字，我搞砸了什么？

UPDATE 2

所以我用fiddler检查发生了什么 . 我终于让它工作了（有点......） .

我的testfile现在看起来像这样：

///<reference path="../../Scripts/require.js"/>
///<reference path="../../test/lib/jasmine-2.1.3/jasmine.js"/>

///<reference path="../../App/viewmodels/people.js"/>

describe('Blabla', function () {
    it('require test', function (done) {
        require(['people'], function (people) {
            expect(people.title).toBe('People page');
            done();
        });
    });
});

然后我改变了 people 文件：

define("people", ["bla"], function (bla) {
    return {
        title: 'People page',
        bla: bla
    };
});

正如你在这里看到的，我 name 我的viewmodel是 people . 这适用于testrunner，但他实际上并没有通过 requireJS 获取任何文件，而只是参考路径 . 这也不符合我的需求，因为durandal模型是 unnamed .

Fiddler截图：

Fiddler screenshot

所以基本上他不使用 requireJS 来获取视图模型，因此我不能只使用 require.config 初始化器来到我的 viewmodels 文件夹并使用requireJS下载每个视图模型 . 有什么想法吗？

javascript unit-testing requirejs frontend durandal

2 回答

  • 2

    我终于开始工作，把我当成一天半 .

    无论如何，我更加精确地测试跑步者 . Chutzpah 是我最后转向的那个 . 这也让我接受了一些研究，但我得到了它包含我想要的一切 .

    Check this post for sure

    这是我做的：

    我的 people.js 看起来像这样：

    define(['viewmodels/bla'], function (bla) {
    return {
        title: 'People page',
        bla: bla //testing dependencies on other viewmodels
    };
});

    然后我也做了 bla.js

    define(function() {
    return {
       bla: "bla"
    };
});

    现在进行测试：

    describe('Blabla', function () {
it('require test', function (done) {
    require(['viewmodels/people'], function (people) {
        expect(people.title).toBe('People page');
        done();
    });
});

it('dependency on require test', function (done) {
    require(['viewmodels/people'], function (people) {
        console.log(people.bla);
        expect(people.bla.bla).toBe('bla');
        done();
    });
});
});

    然后最终，在顶部提供的链接上阅读答案我必须创建一个 Chutzpah config file to create a test harnass ：

    {
   "Framework": "jasmine",
   "TestHarnessReferenceMode": "AMD",
   "TestHarnessLocationMode": "SettingsFileAdjacent",
   "References" : [
       {"Path" : "../Scripts/require.js" }, 
       {"Path" : "requireConfig.js" }
   ],
   "Tests" : [
     {"Path": "specs"}
   ]
}

    现在，使用 Visual studio test runner 运行测试实际上可以获得我需要的一切，正如您所看到的，我现在可以通过以下方式访问我所有的 viewmodels ： require(['viewmodels/whateverviewmodel'], function(whateverviewmodel){....})

    我希望这个答案可以让人们使用Jasmine和RequireJS来测试你的（Durandal）SPA .

    我知道我的观点模型在这个答案中，也不是问题本身，说得多，但这应该让你知道如何去做所有这些 .

    Small Edit

    你现在也可以在测试中跳过 require([]... 的回调混乱和 build your tests like you do your viewmodels with define

    define(['viewmodels/people'], function (people) {
    describe('Blabla', function () {
        it('require test', function () {
            expect(people.title).toBe('People page');
        });

        it('dependency on require test', function () {
            console.log(people.bla);
            expect(people.bla.bla).toBe('bla');
        });
    });
});

    这样可以减少缩进，并且本身更具可读性 .

    回复于
  • 0

    RequireJS提供的 require 调用本质上是异步的，因此您需要执行以下操作：

    it('returns true', function (done) {
    require(["people"], function(people) {
        expect(people.getTitle()).toBe('People piolmjage');

        done(); // Signal that the test is done.
    });
});

    您在问题中显示的第一次尝试无效 . 那是经典"trying to return values synchronously form asynchronous code"的错误 . 使用 require("people") 的第二次尝试也不起作用，因为此 require 调用是伪同步的，并且仅在已经加载所请求的模块时才起作用 . 有关此伪同步 require 如何工作的说明，请参见this answer .

    回复于

相关问题