accessing $scope from unit test file when using the vm "ControllerAs" syntax from AngularJS HotTowel

10,295

Solution 1

Ah, obvious now...I can access the vm variable through making a reference to the controller that's created in the test:

 it("should assign Dashboard as title", function () {
       var vm = controller("dashboard", { $scope: scope });
       expect(vm.title).toBe("Dashboard");
    });

Solution 2

you can also do this:

it("should assign Dashboard as title", function () {
    var controller = controller("dashboard as vm", { $scope: scope });

    expect(scope.vm.title).toBe("Dashboard");
});
Share:
10,295
proggrock
Author by

proggrock

software developer specializing in full stack development. C#, asp.net core, entity framework, and JavaScript. https://proggrockcode.wordpress.com/ SOreadytohelp

Updated on June 07, 2022

Comments

  • proggrock
    proggrock about 2 years

    See here for example: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

    As the title suggests, I'm following along on this tutorial [http://tech.pro/tutorial/1473/getting-started-with-angularjs-unit-testing] to setup unit testing and all is fine EXCEPT for the fact I can't seem to access the vm variable as my $scope.

    dashboard.js

    var controllerId = 'dashboard';
    angular.module('app')
        .controller(controllerId, ['common', 'datacontext', dashboard]);
    
    
    function dashboard(common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);
    
        var vm = this;      
        vm.title = 'Dashboard';
    

    dashboard.Spec.js

    describe("app module", function() {
        beforeEach(module("app"));
    
        describe("dashboard", function() {
            var scope,
                controller;
    
            beforeEach(inject(function($rootScope, $controller) {
                scope = $rootScope.$new();
                controller = $controller;
            }));
    
            it("should assign Dashboard as title", function() {
                controller("dashboard", {
                    $scope: scope
                });
                expect(scope.title).toBe("Dashboard");
            });
        });
    });
    

    What I've tried: it works (the test passes) when I name '$scope' directly in the controllers dependencies and set the "title" property to it. However, I'd like to keep the pattern as is.

    I've also tried passing in $scope directly in dependencies and naming the controller parameter as "vm"...

    Karmas failing test message is: Expected undefined to be 'Dashboard'

    appreciate any help!