Testing and different ways to create the Controller

[David Simmons]

Hi 

I'm confused about the best way to create a controller in my tests. In the Angular tutorial the controller is created as:

1. it('should create "phones" model with 3 phones', function() {
2. var scope = {},
3. ctrl = new PhoneListCtrl(scope);
4.  
5. expect(scope.phones.length).toBe(3);
6. })

but in the Yeoman skeleton project the test creates the Controller as:

 beforeEach(inject(function($controller) {

    scope = {};

    MainCtrl = $controller('MainCtrl', {

      $scope: scope

    });

  }));

i.e it uses the $controller to create rather than new. Is there a standard way and what is the difference between the two approaches?

thanks for any help you can provide.

Dave

[Pawel Kozlowski]

Hi!

On Sun, Feb 3, 2013 at 7:21 PM, David Simmons <shortl...@gmail.com> wrote:
> i.e it uses the $controller to create rather than new. Is there a standard
> way and what is the difference between the two approaches?

In AngularJS controllers are always created using the $controller
service. The reason for this is that controllers can be injected with
dependencies (thnx to the awesome DI system in AngularJS).

Using the new keyword wouldn't work since AngularJS wouldn't have a
hook point / chance to inject dependencies.
In short - controllers shouldn't be created with "new" in tests as
they are not created like this in a real app.

Cheers,
Pawel
--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[David Simmons]

Hi Pawel

thanks for your quick reply. Do you know why the Angular tutorial uses new? It would seem a strange decision if it is not the correct way to create a controller.

many thanks.

Dave

[Pawel Kozlowski]

On Sun, Feb 3, 2013 at 7:30 PM, David Simmons <shortl...@gmail.com> wrote:
> Do you know why the Angular tutorial uses new? It would seem a strange
> decision if it is not the correct way to create a controller.

Well, technically controllers are created with "new" plus some
additional magic and DI:
https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L590

So, if your only dependency is a $scope and you don't need any other
dependencies you could use "new" in tests.
The trouble is that then you need to always think: do my controller
need any additional dependency? Should I inject things by hand or let
AngularJS inject things etc.

The other problem with using the "new" keyword is that controllers
defined on a module can't be instantiated like this since you don't
have access to a globally defined constructor function. As soon as you
start defining controllers on a module (and I think you should:
http://stackoverflow.com/q/13362921/1418796) then using "new" is
simply not an option.

What I was trying to say that if you are looking for a "fast" rule
just use the $controller service as it will always work and will
inject services for you.
Of course if you know how controllers are instantiated and what to do
it "by hand" - it is OK.

Not sure why tutorial is using globally defined controllers and the
"new" keyword - I guess it is to keep things as simple as possible and
not to overload people with too much details from the start.

Cheers,

[David Simmons]

Pawel

thank you so much for your help.

cheers

Dave

[Adam Burmister]

Good response, thanks Pawel.

I've implemented a my first bit of angularjs code - controller,s a login system using directives, broadcast events, etc, and now I'm working to back it with tests.

I'm finding the testing docs to be not that helpful. I encounter stuff like mentioned here... the angular docs not matching the yeoman examples.

So I thought I'd ask an open question to the group: What's the best resource for learning about testing with AngularJS?

Cheers

Adam

[Michael Bielski]

I'm in the same boat as Adam. At this point I'd be happy with ANY resource to learn about testing with AngularJS. Having things that tie to WebStorm would be a serious plus.

[Pawel Kozlowski]

Hi!

This article is not bad at all:
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html
Has some minor mistakes but very good overall.

And the AngularJS code if the gold mine of good testing patterns!

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, 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?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.

[Michael Bielski]

Hi Pawel,

I tried that article, but he uses mocha instead of jasmine and it is confusing trying to go from one the other. The test patterns are great, but the rest just isn't doing it for me. Do you have any other suggestions?

[Pawel Kozlowski]

Hi!

I'm afraid that atm I can't recommend any other article :-(

As I've mentioned AngularJS tests are excellent. Also, many tests in
the http://angular-ui.github.com/bootstrap/ are of very good quality.
Is there particular aspect of testing that gives you a headache?

Cheers,
Pawel

[Michael Bielski]

Actually, let me be a bit more specific:

I'm just starting into the whole testing world, so I'm climbing that hill plus the one for learning how to test Angular. My thoughts were to start in a more general area (my application as a whole) and then drill down to the more specific unit tests. My app should have some routes defined, and as part of the learning curve I want to test to for:

A) That it has routes defined in the first place, and...

B) That the required routes are there

The first thing I am having a problem with is injecting $routeProvider into the test and then checking to see if the app has it as a dependency as well. I can't seem to find any examples of it, and that isn't helping.

So... yeah... that's where I'm at...

[Pawel Kozlowski]

Hi!

I see. In this case I would suggest doing 2 things:
- start with unit testing of individual pieces of an app (directives,
controllers, services etc.)
- using e2e test for the whole app (Selenium or scenario runner) to do
integration testing of bigger chunks

On Wed, Feb 20, 2013 at 6:34 PM, Michael Bielski
<michael...@yahoo.com> wrote:
> ) That the required routes are there
>
> The first thing I am having a problem with is injecting $routeProvider into
> the test and then checking to see if the app has it as a dependency as well.
> I can't seem to find any examples of it, and that isn't helping.

This kind of sounds like integration testing. We shouldn't be testing
AngularJS dependency injection system - it is covered by AngularJS
tests.

If I may suggest one book it would be
http://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530
It is a short read but kind of eye opener - it shows how small steps
should be taken and how small pieces of code should go under
individual tests. Of course it is all more complex in practice and
writing tests is a skill that needs time learning and practicing...

Cheers,
Pawel

[Michael Bielski]

Ok, I'll give the unit tests a whirl and hope for better results. Thanks Pawel. Sure wish they had that book for Kindle!