Struggling to implement in real life scenario.

Question

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.

Answer 1 · 2017-02-01T01:47:13Z

February 1, 2017 1:47am

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.

Answer 2 · 2017-01-31T17:22:08Z

January 31, 2017 5:22pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Sergi Oca

Sergi Oca

Struggling to implement in real life scenario.

Michael Liendo

Michael Liendo

2 Answers

Michael Liendo

Michael Liendo

Sergi Oca

Sergi Oca

Sergi Oca

Sergi Oca