blocks|key|406141|text|通过vm+=+this;，vm等于实例本身|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|406142|因此，所有属性都直接挂在对象上。|406143|function+foo(){
++var+vm+=+this;

++vm.name+=+'Josh';
}

var+myFoo+=+new+foo();
myFoo.name;+//+'Josh';|code-block|syntax|javascript|406144|因此，您需要做的就是更改期望以删除vm属性。|406145|expect(testController).toBeDefined();++
expect(testController.model).toBeDefined();+++++
expect(testController.model.name).toEqual("controllerAs+vm+test");|406146|为了证明这个，下面是您的确切示例，以及相关的Jasmine测试。|BOLD|406147|​|406148|function+testController()+{

++var+vm+=+this;

++vm.model+=+{
++++name:+"controllerAs+vm+test"
++};
}


angular.module('myApp',+[])
++.controller('testController',+testController);

describe('Controller:+testController',+function()+{

++beforeEach(module('myApp'));

++var+testController;

++beforeEach(inject(function($controller)+{
++++scope+=+{};

++++testController+=+$controller('testController',+{});

++}));

++it('should+have+model+defined+and+testController.model.name+is+equal+to+controllerAs+vm+test',+function()+{
++++expect(testController).toBeDefined();
++++expect(testController.model).toBeDefined();
++++expect(testController.model.name).toEqual("controllerAs+vm+test");
++});

++it('should+not+have+a+property+called+vm',+function()+{
++++expect(testController.vm).toBeUndefined();
++});
});|406149|<link+href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.css"+rel="stylesheet"+/>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js"></script>|406150|406151|entityMap^0|2|A|D|2|0|0|0|H|2|0|0|0|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|S]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1G|8|@]|D|@]|E|$]]|$1|V|3|W|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|X|3|Y|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|Z|3|U|5|6|7|1J|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|11|$]]

<p>The <code>vm</code> is equal to the instance itself via <code>vm = this;</code></p>

<p>Therefore, all the properties are hanging directly off of the object.</p>

<pre><code>function foo(){
  var vm = this;

  vm.name = 'Josh';
}

var myFoo = new foo();
myFoo.name; // 'Josh';
</code></pre>

<p>So all you need to do is change your expectations to remove the <code>vm</code> property.</p>

<pre><code>expect(testController).toBeDefined();  
expect(testController.model).toBeDefined();     
expect(testController.model.name).toEqual("controllerAs vm test");
</code></pre>

<p><strong>In order to prove this</strong>, here is your exact example, and the associated Jasmine tests.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function testController() {

  var vm = this;

  vm.model = {
    name: "controllerAs vm test"
  };
}


angular.module('myApp', [])
  .controller('testController', testController);

describe('Controller: testController', function() {

  beforeEach(module('myApp'));

  var testController;

  beforeEach(inject(function($controller) {
    scope = {};

    testController = $controller('testController', {});

  }));

  it('should have model defined and testController.model.name is equal to controllerAs vm test', function() {
    expect(testController).toBeDefined();
    expect(testController.model).toBeDefined();
    expect(testController.model.name).toEqual("controllerAs vm test");
  });

  it('should not have a property called vm', function() {
    expect(testController.vm).toBeUndefined();
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.css" rel="stylesheet" /&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3233406|text|testController+is+vm，因为您在控制器中设置了var+vm+=+this。因此，为了使测试代码更类似于控制器代码，您可以尝试在测试中将控制器也设置为vm，而不是testController|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3233407|describe('Controller:+testController',+function+()+{
++++//+we+work+with+"vm"+instead+of+"testController"+to+have+consistent+verbiage
++++//+in+test+and+controller
++++var+vm;

++++beforeEach(module('app'));
++++beforeEach(inject(function+($controller)+{
++++++++vm+=+$controller('testController',+{},+{});
++++}));

++++it('should+have+vm.model+defined+and+testController.vm.model+is+equal+to+controllerAs+vm+test',+function+()+{

++++++++//+vm=this+in+controller
++++++++expect(vm)
++++++++++++.toBeDefined();

++++++++//+Testing+primitives
++++++++expect(vm.foo)
++++++++++++.toBeDefined();
++++++++expect(vm.foo)
++++++++++++.toEqual('bar');

++++++++//+Testing+objects
++++++++expect(vm.model)
++++++++++++.toBeDefined();
++++++++expect(vm.model.name)
++++++++++++.toEqual("Batman");

++++++++//+Testing+a+method
++++++++expect(vm.greet())
++++++++++++.toBeDefined();
++++++++expect(vm.greet())
++++++++++++.toEqual('Hello+There');
++++});
});|code-block|syntax|javascript|3233408|控制器的代码|3233409|(function+()+{
++++'use+strict';

++++angular
++++++++.module('app')
++++++++.controller('testController',+testController);

++++/*+@ngInject+*/
++++function+testController()+{
++++++++var+vm+=+this;

++++++++//+Primitives
++++++++vm.foo+=+'bar';

++++++++//+Objects
++++++++vm.model+=+{
++++++++++++name:+'Batman'
++++++++};

++++++++//+Methods
++++++++vm.greet+=+function+()+{
++++++++++++return+'Hello+There';
++++++++};
++++}
})();|3233410|希望这能有所帮助。祝好运。|3233411|entityMap^0|0|E|I|2|W|D|2B|2|2H|E|F|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|16|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|17|8|@]|E|@]|F|$]]|$1|N|3|O|5|I|7|18|8|@]|E|@]|F|$J|K]]|$1|P|3|Q|5|6|7|19|8|@]|E|@]|F|$]]|$1|R|3|-4|5|6|7|1A|8|@]|E|@]|F|$]]]|S|$]]

<p><code>testController</code> <strong>is</strong> the <code>vm</code> because you set <code>var vm = this</code> in the controller.  So, to make your test code more similar to your controller code, you can try to set your controller to <code>vm</code> in the test too <em>instead of</em> <code>testController</code></p>

<pre><code>describe('Controller: testController', function () {
    // we work with "vm" instead of "testController" to have consistent verbiage
    // in test and controller
    var vm;

    beforeEach(module('app'));
    beforeEach(inject(function ($controller) {
        vm = $controller('testController', {}, {});
    }));

    it('should have vm.model defined and testController.vm.model is equal to controllerAs vm test', function () {

        // vm=this in controller
        expect(vm)
            .toBeDefined();

        // Testing primitives
        expect(vm.foo)
            .toBeDefined();
        expect(vm.foo)
            .toEqual('bar');

        // Testing objects
        expect(vm.model)
            .toBeDefined();
        expect(vm.model.name)
            .toEqual("Batman");

        // Testing a method
        expect(vm.greet())
            .toBeDefined();
        expect(vm.greet())
            .toEqual('Hello There');
    });
});
</code></pre>

<p>Code for the controller</p>

<pre><code>(function () {
    'use strict';

    angular
        .module('app')
        .controller('testController', testController);

    /* @ngInject */
    function testController() {
        var vm = this;

        // Primitives
        vm.foo = 'bar';

        // Objects
        vm.model = {
            name: 'Batman'
        };

        // Methods
        vm.greet = function () {
            return 'Hello There';
        };
    }
})();
</code></pre>

<p>Hope this helps.  Good Luck.</p>


blocks|key|3233424|text|我将创建一个新模块，并将其作为依赖项注入到应用程序的模块中，以使其简单且可测试。使用John+Papa的Style+Guide测试控制器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3233425|(function+()+{
++'use+strict';

++angular
++++.module('test')
++++.controller('testController',+testController);

++function+testController()+{
++++var+vm+=+this;
++++vm.model+=+{+name:+"controllerAs+vm+test"+};
++}
})();|code-block|syntax|javascript|3233426|规范现在看起来像这样：|3233427|'use+strict';

describe('testController',+function()+{
++var+testController;
++beforeEach(module('test'));

++beforeEach(function+()+{
++++inject(function($injector)+{
++++++testController+=+$injector.get('$controller')('testController',+{});
++++});
++});

++it('should+have+model+defined+and+testController.name+is+equal+to+controllerAs+vm+test',+function()+{
++++expect(testController).toBeDefined();
++++expect(testController.name).toEqual("controllerAs+vm+test");
++});
});|3233428|希望这能帮助任何寻找类似解决方案的人。|3233429|entityMap^0|L|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>I would create a new module and inject it as a dependency into the <strong>app</strong> module to make it simple and testable. Testing the controller with John Papa's Style Guide:</p>

<pre><code>(function () {
  'use strict';

  angular
    .module('test')
    .controller('testController', testController);

  function testController() {
    var vm = this;
    vm.model = { name: "controllerAs vm test" };
  }
})();
</code></pre>

<p>The spec now would look like this:</p>

<pre><code>'use strict';

describe('testController', function() {
  var testController;
  beforeEach(module('test'));

  beforeEach(function () {
    inject(function($injector) {
      testController = $injector.get('$controller')('testController', {});
    });
  });

  it('should have model defined and testController.name is equal to controllerAs vm test', function() {
    expect(testController).toBeDefined();
    expect(testController.name).toEqual("controllerAs vm test");
  });
});
</code></pre>

<p>Hope this helps anyone looking for similar solutions.</p>


<p>I use John papa angular style guide my controller looks like:</p>

<p>following the style <a href="https://github.com/johnpapa/angularjs-styleguide#controllers" rel="noreferrer">John papa style controller style guide</a>:</p>

<pre><code>function testController() {

    var vm = this;

    vm.model = { name: "controllerAs vm test" };
}
</code></pre>

<p>My testing code looks like:</p>

<pre><code>describe('Controller: testController', function () {

    beforeEach(module('myApp'));

    var testController;

    beforeEach(inject(function ($controller) {
        scope = {};

        testController = $controller('testController', {
        });

    }));

    it('should have vm.model defined and testController.vm.model is equal to controllerAs vm test', function () { 
        expect(testController.vm).toBeDefined();  
        expect(testController.vm.model).toBeDefined();     
        expect(testController.vm.model.name).toEqual("controllerAs vm test");
    });
});
</code></pre>

<p>Result:</p>

<p>Test failed: 
Result Message: Expected undefined to be defined.
        at stack </p>

<p>So my question is how can we test vm.model and other variables from this? I have not found proper guide line in the guide lines: <a href="https://github.com/johnpapa/angularjs-styleguide#controllers" rel="noreferrer">controllers</a></p>


How to test John papa vm.model unit testing with jasmine?

我使用John papa angular风格的向导，我的控制器看起来像这样：遵循风格function testController() {    var vm = this;    vm.model = { name: "controllerAs vm test" };}我的测试代码如下所示：describe('Con...

问如何用jasmine测试John papa的vm.model单元测试？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jasmine测试John papa的vm.model单元测试？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jasmine测试John papa的vm.model单元测试？
EN