How do I test user interface widgets?

In angular, and in javascript in general, how to unit test action like, clicking a button should show dialog box, clicking the same button when the box is shown hides the box. My question is how to test elements dom attributes ? In GWT a pattern design called MVP ( Model View Controller ). Where The controller is tests but, not the view !

You can use some front end testing suites such as cucumber or selenium to write front end test suites to check browser behavior. You can then set up the test suites to also run on multiple browsers to have a solid platform for dom testing.

This has already been answered here to some degree: How to test behavior in the link function of a directive

Angular's test suite of choice is Jasmine. Basically what you need to do, in angular is $compile your directive, then use browserTrigger() to interact with the DOM elements it produces however you need to, then test the outcomes in your $scope.

Angular is 100% BUILT WITH TESTABILITY IN MIND. Products like Selenium shouldn't be necessary.

If you need more examples. I highly recommend just hopping into Angular's Git repository, and looking at their directive tests.

Vojta Jina (a member of the AngularJS team) has some great notes and example code on this: https://github.com/vojtajina/ng-directive-testing