2

"Front-end Unit Testing": To test the client side validations from front-end UI tests but in isolation(hence calling unit tests). By isolation mean, testing static HTML pages to avoid unnecessary page navigations. For example, to test validations on page D, one may need to navigate pages A, B, and C but the test is all about Page D validations so if there is a way where one can directly access and test the Page D and simplify and speed up the UI tests.

Problem Statement: How to perform "front-end unit testing" of Single Page applications(angular/angularJS) using JavaScript to avoid performing negative scenarios/error message verifications/client side validations using UI tests.

Required help: It would be great if somebody who is using it practically in a project, can explain with a small prototype example.

Disclaimer: I am well aware and practicing unit testing & UI testing separately but the question is about whether 2 can be combined for improving feedback loop by simplifying UI tests and significantly reducing execution time and increasing tests reliability.

Improve this question
4
  • What concrete problems do you have or want to solve? Any restrictions? What help do you need? As stated, your question is strong candidate to being closed as to broad and opinion-based. And you are not total newbie, you have enough XP to know better.
    – Peter M. - stands for Monica
    Commented Mar 13, 2018 at 20:10
  • Peter, as mentioned in the question I want to avoid few negative scenarios/error message verifications in the UI tests. For the front end unit testing I am newbie and want to know the standard practice people are following in the industry to perform these kind of testing.
    – Vishal Aggarwal
    Commented Mar 13, 2018 at 20:15
  • I believe, this is a useful question for most of the automation testers who are testing SPAs using front end.Also, I am not ashamed of accepting areas where I am a total newbie.Above all, I am a learner.
    – Vishal Aggarwal
    Commented Mar 13, 2018 at 20:26
  • Please do not answer questions in comments. Thanks!
    – corsiKa ♦
    Commented Mar 15, 2018 at 15:34

2 Answers 2

Reset to default
2

My approach to this is twofold:

Jasmine

Jasmine is unit testing of the javascript code. The first time I saw jasmine described as "unit testing" it took me a while to get it. I thought unit testing always meant backend server code. One I got over that - and also saw dozens of jasmine tests running in a few seconds in the browser I realized what it meant and how it fitted in - nicely. I think of protractor as being similar.

Grey Box Testing

This is a very common problem. You have data or conditions that need to be set up in order for the test to work. However setting up the test data and conditions by using the UI is slow, cumbersome and sometimes simply not possible for the state you want, etc.

An example from my current workplace is a 11 page form data collection process for student loans. One of our challenges is "how do we test a sad UI case on page 10 when you have to go through 9 other form data collection page to get to it".

One answer to the these issues is to accept that the true 'black box' testing that most folks are doing through browsers is very limited and when the time and setup issues start to become critical a modified approach is needed.

Using grey box testing means that you have information and access to set database conditions and program state such as user session at the start of your test.

With grey box UI testing you can then go to the specific screen that you want to test, with the data set up that you are trying to test (for example 20 fields are filled out but 1 isn't) and test just that.

One other consideration - you are well aware of unit and UI tests but what do you have for integrated tests - test that requires the services be available but do not use the UI ?

Combining these two - controlling state and using jasmine/protractor may be one answer

Improve this answer
4
  • Thanks, Michael for providing this useful information, however, how do you set the browser session(to reach page 10) from the database?
    – Vishal Aggarwal
    Commented Jul 28, 2018 at 13:17
  • Also, yes API tests are in place.
    – Vishal Aggarwal
    Commented Jul 28, 2018 at 13:19
  • @vishal - it ain't easy! You will need to work with the application developers to look at how session state is maintained and controlled for your web/application server(s). Then you use that info to set state. For some tech stacks like ruby for example you can use the rack session access gem github.com/railsware/rack_session_access
    – Michael Durrant
    Commented Jul 28, 2018 at 13:40
  • 1
    Most companies don't attempt this as at first glance it is pretty tricky and involves cross-team communication. But boy when u get it working it is a 10X or 100X factor so it is well worth the effort !
    – Michael Durrant
    Commented Jul 28, 2018 at 13:41
0

AngularJS documentation extensively talks about testing, including unit and component tests.

You can pick any JS test runner - Karma is the recommended by the community, because they Karma and Angular teams are more close.

Improve this answer
3
  • I practice UI testing and unit testing both from years but the question is about when two are combined as "front end unit testing".
    – Vishal Aggarwal
    Commented Mar 15, 2018 at 11:14
  • What do you mean about "when two are combined"? If you want to test the methods and components of your AngularJS app, the aforementioned links provide instructions for it - i.e., how to mock external services and other dependencies of your target method/component, so you can explore only the target, as a unit. Could you elaborate more on your question? It, especially now, seems too broad.
    – João Farias
    Commented Mar 16, 2018 at 11:29
  • Question updated with details.
    – Vishal Aggarwal
    Commented Mar 17, 2018 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.