Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Unit Testing Next Steps Mocks and Stubs

Sergi Oca
Sergi Oca
7,981 Points

Struggling to implement in real life scenario.

I took this course because I had an assignment, to implement unit testing on an existing app, with it's DOM tree and all. I really don't understand how that wasn't explained here at all. I finished not knowing how can I test for example a real function that uses a DOM element with event listeners on it. I feel like the test case was just too specific and didn't provide the necessary tools to take this to a real life project.

Michael Liendo
Michael Liendo
15,326 Points

Hey Sergi, if you provide some sample code--maybe not your exact homework assignment, I'd be happy to assist. In the real world, it honestly doesn't get much more difficult than what was presented in the course. Then again, I can see how it would be difficult to abstract some of it away given the focus. Just post a sample and we can dive in together.

2 Answers

Michael Liendo
Michael Liendo
15,326 Points

Sorry to hear about the job. There'll be more down the line. In the case of testing DOM events, I'll take you through the process I would go through if I was in the same position you were in:

1) Try to solve the problem without looking at docs or past code. --You did that 2) Look into past code if I had done something similar and may need a refresher --You did that 3) Look into relevant docs --You may not have known where to look 4) Look into relevant videos --The videos never went into specifics on how to figure this out (though it's in the Teacher's Notes section) 5) Google --Stack overflow ie. "test click event", "BDD click event", "Unit Test DOM events", etc.

The thing to remember with Unit Testing/BDD, is that you're testing the behavior of your code. So it's more important to test a click happened.

http://stackoverflow.com/questions/24038709/testing-javascript-click-event-with-sinon provides some insight into how you can figure this out using jQuery.

The mocking part comes into play with SinonJS (or ExpectJS) where it fakes the event.

Hope that helps. A thing to note, is that writing good tests takes a lot of time and practice. Definitely not something you can go from zero-to-hero in a 3 hour course.

Sergi Oca
Sergi Oca
7,981 Points

Thanks a lot Michael, all that helps a lot. It wasn't the job for me anyway but I thought to do the interview and to take their test which I always think it's a great learning opportunity. But yes, definitely not something you can learn in a weekend.

Sergi Oca
Sergi Oca
7,981 Points

Well, like I said, my problem was how to apply these unit testing principles with a web app that was already existing. I really failed to understand how could I put something like say, a click event to the test. The first few lines of my existing code are:

document.getElementById("submit").addEventListener("click", getAUser);

That already gave an error as document is not defined. Everything that is written for unit testing in this course is just code that doesn't interact with the DOM in any way. I thought ok, maybe I cannot test a click, so I'm going to look inside the function:

  function getAUser(e) {
     e.preventDefault;
     document.querySelector(".user-wrap").style.display = "block";
     let searchValue = document.getElementById("search").value;
     let searchParameter = `https://api.github.com/users/${searchValue}`
     let repoSearchParameter = `https://api.github.com/users/${searchValue}/repos`
     const repoList = document.getElementById("repo-list");
      ...

I just didn't see any way to write any test for any of that, because i cannot access the DOM. the assignment was for a job position and I just had a weekend to learn about unit testing, needless to say, I failed pretty bad.