Pomodoro Test Suite Bug

[freecodecamp]

Pomodoro Test Suite Bug

[no-stack-dub-sack]

@Enikol Hmmm... this is interesting, especially considering it was working previously. Can you point out to me where you made that change in you code so I have a better chance of diagnosing this correctly? This test suite in particular has been a bit difficult from the get go to get right... thanks!

btw, I love that you used the accurateInterval dependency that I made! Not my code, but super useful to combat the drift that will otherwise occur in a real life scenario. When we run the tests it does not matter though, because obviously we're super speeding up time 😄

[no-stack-dub-sack]

@Enikol Ok, so quick update, it is not where you changed that symbol that was the cause (which would have struck me as very odd). This perhaps was happening for a while but went unnoticed because you had been playing with the timer as you made it? Because when you run the timer first, then run the test suite, it runs.

And so the answer has something to do with your reset button, and the problem is getting the tests to throw a good error that will address the problem.

The first problem is when you call this.state.timer.cancel():

• Try reloading your timer, and clicking the reset button with your browsers dev console open (not CodePen's), before running the timer. You'll notice that it throws an error: Uncaught TypeError: _this.state.timer.cancel is not a function. This is because until the timer has actually been run, this.state.timer is still an empty string, and of course cannot be canceled. So since beforeEach test the test suite is calling reset(), the first thing that's happening is an error gets thrown and the rest of the tests do not execute.
• So the solution is being sure the timer is initialized before calling cancel(), i.e. replace line 60 with this.state.timer && this.state.timer.cancel()

However this only solves part of your problem, the other issue is that you're not fully re-initializing the state of the timer when calling this function. So you also need to replace current with it's initial state to be sure the timer is always changing back and forth correctly. So the whole method should look like this:

reset = () => {
    this.state.timer && this.state.timer.cancel();
    this.setState({
      running: false,
      total: 1500,
      breakLength: 5,
      sessionLength: 25,
      current: 'Session'
    });
  };

Everything else is obviously working great because this change passes all tests! Nice job!

I'm going to look into a way to address this issue since it is a common mistake and easily overlooked. The bottom line: if tests are failing, there should be a helpful error message telling you why, but in the case of React & the Pomodoro, we don't even have an option of throwing a custom error it the function being called in the before each hook fails. So paying attention to your browsers console is also a good step to take! The console is your friend!! 😄

Anyway, thanks for bringing this issue to our attention

[no-stack-dub-sack]

@Enikol edited comment above (tagging you again in case you saw it before I edited it)

[Enikol]

@no-stack-dub-sack Thank you so much! I really need to learn check the console more often)
(Also, thank you for accurateInterval dependency, I saw it on example project and couldn't resist, because I've already tried to make a timer in plain JS with setInterval and it was really painful)

[no-stack-dub-sack]

@Enikol No prob! Also going to push some changes soon that will throw better errors. I'll let you know when so you can see. Locally, if I run your project against the tests as it was before you fixed it, much more helpful errors are thrown!

[no-stack-dub-sack]

@Enikol Ok! Depending on when you read this, try out switching your pen back and see the new, more helpful errors! If you see this soon, you will need to replace the gitCDN link in your pens JS settings with this link instead since the changes take a while to propagate down to the production CDN: https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js

Let me know if you think these new errors would have helped! Thanks again for helping out 😄

[Enikol]

@no-stack-dub-sack Checked it out, new errors are really helpful! Thank you!