Problem with Angular Unit Test

[Andrew C. Greenberg]

The following plnkr illustrates the problem:

  http://plnkr.co/edit/ZpdjrlZMADdeGxKYpR9Z?p=preview

The test

<pre>

  ...

  beforeEach(inject(function($rootScope, $compile) {

    scope = $rootScope.$new();

    element = $compile('<directive></directive>')(scope);

    $rootScope.$digest();

  }));

  ...

  it('should have the text be blue', function() {

    expect(element.hasClass('blue')).toBeTruthy();

  });  

  

});

<pre>

passes fine in the ordinary case, but fails when the "ngAnimate" dependency

is added to the main module.  The problem seems to have something to do with

the recent changes to ng-class and animation.  What's going on?

[Christian Dannie Storgaard]

My guess is that the test is run before ngAnimate gets to finish working away on the DOM.

A quick fix, is to wrap the execJasmine functional call in a $timeout to let ngAnimate finish first.

Updated plnkr: http://plnkr.co/edit/Emdxen?p=preview

[Andrew C. Greenberg]

Interesting. But how can I do that, for example, in Karma, and must i give up the $timeout for the entire suite rather than test by test?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/yEQAl9bm6hM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Andrew C. Greenberg]

I am curious why the following code still fails:

  it('should make hidden element visible', inject(function($compile, $rootScope, $animate, $timeout){

    runs(function(){

      element = angular.element('<test></test>');

      element = $compile(element)(scope);

      scope.$digest();

      setTimeout(function(){

        domClear = true;

      }, 100);

    });

    waitsFor(function(){

      return domClear;

    }, 'return from 100ms timeout', 1000);

    runs(function(){

      expect(element.text()).toBe('this is the test directive');

      expect(element.hasClass('foo')).toBeTruthy();

    });

  }));

[Christian Dannie Storgaard]

I was struggling with variations of basically the same attempt of a solution with no luck. For now, I'd probably just wait for 1.2.0 to get out of beta before continuing.

[Andrew C. Greenberg]

What I did was to make a "fakeNgAnimation" file, with a definition of ngAnimation module, depending on ng, and doing nothing.  I then included that in my karma configuration file, using the real ngAnimation module for production.

[Danny]

Mr. Greenberg,

Excellent videos for applying TDD/BDD to AngularJS. I have not heard anyone mention Uncle Bob, DRY etc. in any Angular videos. Most of the online training courses start with designing the UI layer. Can you recommend any resources including mentoring or online training using the TDD approach first ?

Thanks in advance.

[Andrew C. Greenberg]

I agree -- too many of the current materials are just about how to write tests, and most of them are for writing tests for existing code -- a fundamental error, in my view.

There are extraordinary resources available in general.  I'll put together a set of links in a bit.  (too many alas, are for-profit).  Uncle Bob's cleancoders web site has a series of Java-based teting videos that are just plain outstanding.  (The last four or five are all about testing.)

I am now putting together a more current (and better structured) set of videos doing test-first angularjs development of applications ranging from simple katas to full-scale applications.

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/yEQAl9bm6hM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.