BDD Testing angularJS directives

I am in a project where we are asked to “componentize” certain controls in angular directives (buttons, checkboxes, tooltip, …) Very much of what angular-ui is doing…

We would also like to adopt BDD testing like it should. (= start with a BDD set of tests/specs before starting development, see below)

While the project is going further, there is discussion about WHAT part of the directive should be tested WHERE (e2e tests with protractor OR (unit) specs with use of compiled html).

A current “problematic/blurry” directive would be a “tooltip”. Where do you test what…

The goal of this post should be to get a set of criteria of WHERE to write WHAT kind of tests/specs/whatever/….

A second goal would be to get a correct workflow of developing/testing:

For this I found an idea in this presentation from Julie Ralph http://ift.tt/1BEDBsX

• 1. Logic : Do the controller’s methods do what expected?

• 2. Correct Compilation : Correct DOM structure is generated

• 3. User Event Handling : Is the default tab displaying? Does clicking a tab change the tab?

In my opinion, BDD tests resort under the third (“user event handling”) Development should start with this “set”. 1 and 2 should “grow” during development.

E2e tests (via protractor) should not by used for one directive, but to test interaction of directives (eg: a button and an input on a form)

Your input is very much appreciated and thank you in advance.