I’m having problems troubleshooting my Pomodoro Clock project for the Front End Libraries Projects. I’m currently failing a whole bunch of tests, despite the fact that my pen does have the required functionality as far as I can tell.
2. When I click the element with the id of “break-decrement”, the value within id=“break-length” decrements by a value of 1, and I can see the updated value.
Error message is "expected ‘1’ to equal ‘4’ "
3. When I click the element with the id of “break-increment”, the value within id=“break-length” increments by a value of 1, and I can see the updated value.
Error message is “expected ‘5’ to equal ‘9’”
But for the above two tests, the button does work as it should. It uses the same functionality as the session-decrement and session-increment buttons and those work just fine according to the tests. I’m not sure what the issue is as both components use the same function.
I had a look at your code. Good job so far. I have the following comments!
Firstly, I was able to get your app to render by correcting two main issues.
The biggest problem is that you have defined the handlePlayPause() method inside the App component twice. Removing one of these should help you get the app to render.
The app component is currently missing its closing curly bracket. Fixing the handlePlayPause() issue may also fix this for you.
Next, the main components of the app - Header, SetTimer, Timer, and Controls - all rendered just fine once I addressed the above.
The handleReset() and handleSetTimers() methods do appear to be working as intended, so in my opinion it’s really the handlePlayPause() method you’ll want to work on.
When I did this, I couldn’t get the timer working the way you coded it. You reference this.pomodoro three times in that method, but it isn’t defined anywhere. I tried defining a global variable and using that to store the setInterval() statement, which did work. It’s how I got around this problem when I did this project, but on reflection, I’m not sure this is an ideal solution as global variables are bad practice.
In any case, you should look at where the setInterval() is defined as a potential source of trouble for your code.
Okay, I don’t have time to look too deeply into the issues, but it seems to be that sometimes when I click the increment and decrement buttons, sometimes they don’t respond. I suspect its the way you’ve chosen to attach the alterLength method to the Buttons onClick attribute.
I attached those methods to the buttons as props in order to keep State confined to the App component. Is there a better way? Or at least a different way?
The tests are poorly explained so people use them as the only way to judge someones project. Focus on making it look good and tests come second.
Yes the tests do a purpose and making a general structure all through out your html, but focus on learning the basics on how to make a good UI then worry about tests.
@edwardfclark, to my knowledge that is still best practice to pass the method to the stateless component.
That said, its possible but not recommended using arrow functions to attach functions.
The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
One way around this is passing arguments to your methods using bind