4

At the moment I try to work with my dev-teammates on some modular system for our javascript solutions. Because we're able to start afresh, we'd like to do it right this time - with tests!

We found Jasmine and Karma for our Unit Tests and Selenium/Nightwatch for our End-to-End tests.

While I was writing unit tests for those components of the system which never touched any DOM through jQuery I was good to go. But one day I came along some components which manipulates the DOM. So far so good. I managed to test them as well thanks to Jasmine-jQuery. Until this point I was sure to still be within the boundaries of Unit-Testing.

Yesterday though, I was sitting in front of a component which will make a navigation bar sticky (or fixed) as soon as the user is about to scroll the webpage down.

I wanted to test this functionality with Jasmine-jQuery again. What I did was - I mocked the users scrolling with "window.scrollTo(0, 2000)" and then checked if the attributes of those navigation bar have been changed.

The Issue:

My teamleader put me on hold because I have stepped over to the domain for End-To-End tests because I needed to mock browser functionality.

My Questions: Is this really the case? In my optinion an End-To-End test should test the orchestration of several functionalities of a system (like ours) within a productive environment. Therefore User-Stories would be the layer I would test with End-To-End tests. Check if the path a user has to go to login and write an article (for example) works the way as intended. But checking if a javascript component will successfully add/remove attributes to the DOM after some event (like the scroll event) happened - should be a unit test still.

I'm an apprentice developer - I respect the experience of my teamleader - but I still want to make completely sure that things will be done the right way.

So I ask you if you might tell me when Unit-Testing ends and when End-To-End tests begin when writing JavaScript and manipulating the DOM.

Some teammate explained to me that it might be a good way to realize if its a E2E Test specific function if you check how critical a malfunction would affect user experience. But only if you really struggle between unit-testing and E2E. Then you should ask yourself "Would a fail result in a really bad user experience or will only some error be thrown in the console and a little picture wouldn't be loaded properly".

halfer
  • 19,824
  • 17
  • 99
  • 186
xetra11
  • 7,671
  • 14
  • 84
  • 159

2 Answers2

1

Here you can find a damn good explanation on the difference between tests: What's the difference between unit, functional, acceptance, and integration tests?. I think Selenium with WebDriver is the best solution for testing E2E. If you're using AngularJS, a very good solution is using Protractor (https://angular.github.io/protractor/#/).

Hope this can help you

Community
  • 1
  • 1
andreasonny83
  • 1,213
  • 11
  • 19
  • Heya! Thanks for the answer. Well I know the hard differences between those kinds of testing but actually implementing them into the code domains was more complicated. To differ if the functionality of code would be better tested in unit or E2E test was the issue for me. – xetra11 Feb 25 '16 at 09:27
  • Well, in pratical language: with unit test you just test what functions and methods return and with E2E you test the user experience and user interface to make sure that all the elements are correctly rendered as expected across different bowsers. – andreasonny83 Feb 25 '16 at 09:29
  • And what about testing if a function changes DOM state? In system prgramming languages you would test if state has been change within a system. Would you say that javascript is decoupled from the DOM and therefore its a E2E / Integretation Test? Because you integrate your JavaScript System into the DOM system of a browser? – xetra11 Feb 26 '16 at 05:23
  • I understand sometimes it's really tricky to find the perfect way for testing a specific behaviour and also difficult to understand where unit test ends and E2E starts. We can just say that unit test doesn't need to render your website in a browser and you can still assign your DOM tree object to a variable and, in a case where a function is responsible for creating a new DOM element, you can verify that the wanted node has been created without using a browser. – andreasonny83 Feb 26 '16 at 07:46
  • I remember I had a similar problem with a PHP project. As a way around it, I wrote some acceptance tests where I literally stored the page source in a variable in XML format. – andreasonny83 Feb 26 '16 at 07:47
  • I opened a new question which goes further into the JavaScript / DOM seperation of systems question I had here: http://stackoverflow.com/questions/35646589/javascript-manipulates-dom-integration-test-to-end-to-end-test – xetra11 Feb 26 '16 at 08:13
0

Check out this article http://www.itaware.eu/2012/10/19/angularjs-unit-tests-and-end-to-end-tests/ . It deals with Angular specifically but clarifies on the difference between the two. Your team leader is definitely right, its not the fact that your manipulating the DOM that makes it an E2E type tests, its the fact that your simulating user interface.

Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109