如何测试用户界面小部件？

Question

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 !

Answer 1

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 .

Answer 2

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.

Answer 3

Vojta Jina（AngularJS团队的成员）对此有一些出色的注释和示例代码： https : //github.com/vojtajina/ng-directive-testing