The example provided for unit testing component bindings is misleading

[musclor]

I'm submitting a ...

• bug report
• feature request
• other (documentation)

Current behavior:
https://docs.angularjs.org/guide/component#unit-testing-component-controllers

describe('component: heroDetail', function() {
  var $componentController;

  beforeEach(module('heroApp'));
  beforeEach(inject(function(_$componentController_) {
    $componentController = _$componentController_;
  }));

  it('should expose a `hero` object', function() {
    // Here we are passing actual bindings to the component
    var bindings = {hero: {name: 'Wolverine'}};
    var ctrl = $componentController('heroDetail', null, bindings);

    expect(ctrl.hero).toBeDefined();
    expect(ctrl.hero.name).toBe('Wolverine');
  });
});

Expected / new behavior:
The unit test provided as an example is misleading. It makes me believe that we are validating that a binding 'hero' has been defined in the 'heroDetail' component controller. Actually this test only verify that whatever you provide to $componentController you will get it as an attribute of it and that is it. So basically we are testing $componentController rather than the 'heroDetail' component bindings...

If one would like to really test its component bindings he should use $compile.

Angular version: 1.6.5-build.5353+sha.136a42a snapshot

[frederikprijck]

I'm not sure I totally get what you're saying the test is for.

Afaict, this test is testing that a hero object is set on the controller based on the input binding. It's also checking the hero's name is set correctly based on the input object's name.

[musclor]

Hello @frederikprijck

I mean that if one day I accidentally remove the bindings definition from the heroDetail component the test will still pass.

I believe it should tell me I made a mistake but it is not the case.

[frederikprijck]

Using the test above, you're only testing the component's controller itself, not the bindings or anything else of the component. That's why $componentController has a 3th argument (bindings), which can be used to bind things to your controller (while testing) as how you would do with a component. Important to note is that these bindings are unrelated to the component's bindings. If you want to test the component with it's bindings and controller, I guess $compile is what you want idd.

I wouldn't say the unit test example is confusing, but adding another test example using $compile could be useful I guess.

[musclor]

Yep, I totally agree with you.

It is more that the test suits suggests that we are testing the component rather than the controller.
Even if we are testing the 'heroDetail' controller I do not see the point of this spec then...

However it validates what you perfectly described.

Thank you

[gkalpak]

Actually, I agree with @musclor. The test does not test anything other than $componentController (and that there is a heroDetail component. I believe we should either make test something useful of remove it.

@musclor, do you want to take a stub at it?

[frederikprijck]

Mmmm, I think I see what you mean now.
The fact that it's $componentController's responsibility to ensure that the passed bindings are set as as a controller instance, this test is indeed only testing that part, hence not testing anything specific to the specified component's controller. 🙈

I would think there might be alot of "not so useful" tests like this being written in projects 😬. It's a common first test when looking into unit testing component's. So it would be beneficial to update/remove it.

[musclor]

@frederikprijck haha, at least It was my case indeed :_(

Hi @gkalpak , it would be an honor but I prefer to decline for the moment.

To anybody who wants to take care of it or simply wonder how to use $compile there is good example I found here provided by @mjwwit in #14426

Kind regards

[gkalpak]

it would be an honor but I prefer to decline for the moment.

😞

This is up for grabs, @everyone 😛