Why, When and How to do unit testing in Angular

Given this app structure,

Four routes,

Login, StoresList, StoreAdd, StoreDetail, each one with its own view and controller.

Also has two services,

• LoginService, with two methods, login and logout
• StoresService, with five methods:getStores, getStore, addStore, editStore, deleteStore

Four controllers

• Login controller, that has login and logout method using the LoginService
• storesListController, with getStores to get the entire stores list from the server, through the StoresService.getStores() method, and make available for the view. And deleteStore to delete a single store from the server through the StoresService.deleteStore()
• storesAddController, Gets the data from a form in the StoreAdd view and sends it to the server with the addStore method through the StoresService.addStore().
• And storesDetailController, That can edit the info of the store width the editStore method, through the StoresService.editStore() And can delete the current store from the server through the StoresService.deleteStore();

I understand, or at least makes sense to me, the e2e testing of this app, a quick way to test how an user interacts with the app, behaviours and actions on several browsers, avoiding to do it directly on every browser, saving a lot of time.

But when it comes unit testing… I don’t how to approach it, why and when should it make unit tests? Should I write the controller first and then test it? (in this case if I write the storesAddController, why should I make an unit test instead of testing it with the browser and the element inspector which could be faster).

On the other hand, if I write the test first, and then the controller, what code do I have to test if I have no controller..? How it would make my app more robust?

I’ve been reading tutorials, posts…. with a lot of theory for the last weeks, but I’m still trying to figure out which way I should take. Taking in mind this kind of real scenario, can someone guide me on how to approach this?