Unit Test not giving expected error on grunt dev-test check

Question

I am trying to begin to run unit tests while learning MEAN using grunt dev-test to check the following, which should return an error. However, in the terminal grunt dev-test detects the file as being changed and reports no errors.

'use strict';

describe('appMyDirective', function() {
    var elm, elmScope, $scope, $compile, $timeout;

beforeEach(module('myApp'));

/**
@param params
    @param {String} html
*/
var createElm =function(params) {
    var html ="<div app-my-directive>"+
    "</div>";
    if(params.html) {
        html =params.html;
    }
    // elm =angular.element(html);
    elm =$compile(html)($scope);
    // $scope.$digest();
    $scope.$apply();        //NOTE: required otherwise the alert directive won't be compiled!!!! ... wtf?
    elmScope =elm.isolateScope();
    var elements ={
        // 'somePart':elm.find('div').children().find('div')
    };
    return elements;
};

beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
    $compile = _$compile_;
    $timeout = _$timeout_;
    $scope = _$rootScope_.$new();
}));

// afterEach(function() {
// });


it('should have a scopeOne property', function() {
    $scope.scopeOne ='test scope one';
    var html ="<div app-my-directive scope-one='scopeOne'></div>";
    createElm({html:html});
    expect(elmScope).toBe('test scope one1');
    });
});

Since $scope.scopeOne ='test scope one'; and I expect 'test scope one1' this should not pass as it is 'untruthy'. Or am I doing something wrong here?

Directive Code:

/**
@toc

@param {Object} scope (attrs that must be defined on the scope (i.e. in the controller) - they can't just be defined in the partial html). REMEMBER: use snake-case when setting these on the partial!
@param {String} scopeOne a scope property
@param {Function} funcOne custom function 

TODO

@param {Object} attrs REMEMBER: use snake-case when setting these on the partial! i.e. my-attr='1' NOT myAttr='1'
TODO
@param {String} customText Some special text
@dependencies
TODO

@usage
partial / html:
<div app-my-directive></div>
TODO

controller / js:
TODO

//end: usage
*/

'use strict';

angular.module('app').directive('appMyDirective', [ function () {

    return {
        restrict: 'A',
        scope: {
            scopeOne: '=',
            funcOne: '&?'
        },

        // replace: true,
        template: function(element, attrs) {
            var defaultsAttrs ={
            };
            for(var xx in defaultsAttrs) {
                if(attrs[xx] ===undefined) {
                    attrs[xx] =defaultsAttrs[xx];
                }
            }

            if(!attrs.customText) {
                attrs.customText = '';
            }

            var html ="<div class='app-my-directive-cont'>"+
                "custom text: "+attrs.customText+
            "<br/>scope one: {{scopeOne}}"+
            "<br/>scope two: {{scopeTwo}}"+
            "<div class='btn' ng-click='emitEvt()'>EmitEvt</div>"+
            "<div class='btn' ng-click='funcOne()'>funcOne</div>"+
            "</div>";

            return html;
        },

        link: function(scope, element, attrs) {
        },

        controller: function($scope, $element, $attrs) {
            $scope.scopeTwo = 'scope two';

            $scope.emitEvt =function() {
                $scope.$emit('appMyDirectiveEvt1', {});
                var log = 'suck it the js works.';
                console.log(log);
            };
        }
    };
}]);

Entire project: https://github.com/tuffs/mean

Answer 1

Please provide code for directive as now we have "Expected undefined to be 'test scope one1'." - feel free to execute tests with "run code snippet"

angular.module('myApp', [])

describe('appMyDirective', function() {
  var elm, $scope, $compile;

  beforeEach(module('myApp'));

  var createElm = function(params) {
    var html = "<div app-my-directive>" +
      "</div>";
    if (params.html) {
      html = params.html;
    }
    elm = $compile(html)(params.scope);
    params.scope.$apply(); //NOTE: required otherwise the alert directive won't be compiled!!!! ... wtf?
    return elm.isolateScope();
  };

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
  }));

  it('should have a scopeOne property', function() {
    $scope.scopeOne = 'test scope one';

    var elmScope = createElm({
      html: "<div app-my-directive scope-one='scopeOne'></div>",
      scope: $scope
    });

    expect(elmScope).toBe('test scope one1');
  });
});

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>