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".
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