Comments (7)
@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 😄
from testable-projects-fcc.
@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 callingreset()
, 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 withthis.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
from testable-projects-fcc.
@Enikol edited comment above (tagging you again in case you saw it before I edited it)
from testable-projects-fcc.
@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)
from testable-projects-fcc.
@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!
from testable-projects-fcc.
@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 😄
from testable-projects-fcc.
@no-stack-dub-sack Checked it out, new errors are really helpful! Thank you!
from testable-projects-fcc.
Related Issues (20)
- test issue when i'm working with survey project , test shows test failed list of tribute page HOT 1
- Test failing but test requirement has been met HOT 1
- getting an error on product landing page #landing test. it says the navbar should always be at the top of the page. the navbar is at the top of my page but i am still receiving the error. HOT 1
- FCC Personal Portfolio - Can't get Layout #3 test to pass regarding navbar and viewport HOT 2
- project verification script not detecting required id tags in my code HOT 1
- User Story #11: Within the form, there is a submit input with a corresponding id="submit" HOT 1
- Test scripts are not correct HOT 1
- Personal Portfolio Project Bugs
- i think this is bog, 3 hour i am trying HOT 1
- Pomodoro Clock #15 Test of "25 + 5" Test Suite May Be Yielding Incorrect Results HOT 3
- Survey Form Test Issues
- FCC: Tribute Page
- Potrfolio tests: typo in #Content test number 4
- the test is not running HOT 1
- Markdown Preview tests not compatible with Vue HOT 1
- TypeError: Cannot read property '1' of null for Pomodoro clock. Why?????!!!!!!! HOT 1
- Issue with image running Tribute Page tests HOT 2
- Dependency Dashboard
- Build a JavaScript Calculator tests typo HOT 3
- incomplete fix for 25+5 with React@18 in #1485
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from testable-projects-fcc.