Javascript Calculator help with tests

JavaScript
#1

Hi, I’ve finished the Javascript Calculator project using React

Does anyone know how to debug the FCC test suit.
The calculation results are correct but the test suit is not recognising it and failing a few tests.

I tried:

  • re-organising the HTML so that the result is the only thing within #display
  • Passing the result as String and Number
  • logging out the #display to console, but due to either codepen iframe or react virtual DOM didn’t manage it
2 Likes
#2

Hi as it currently stands your #display div has multiple outputs in it, they only want to see the result within #display when a calculation is finished. Your HTML re-organization should have worked, is it possible for you to try that again?

1 Like
#3

Hi, yeah, removing everything else from #display besides the result was one of the first things I tried.

Atm I’m looking if I can output the expected and the value the tests are reading to see what’s up

#4

Solved.
I moved https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js contents into a HTML window, <script> tag and added the content of #display element to the tests’ error message.

The issue for anyone interested:

Issue was with useEffect / state updates and component re-renders.
The test would read the value as 0 and the actual value would be rendered on the next component update due to the implementation.

2 Likes
#5

Wow, I think I have the same problem. Tests cannot read my “display” or reading the wrong value. My “display” is an input element so thought it could not read the value property. Tried reorganizing with a p element and no change. Also tried with number and string but no change. I suspect I have exactly the same issue you had. However, I’m sorry I don’t quite understand your final message (above). Could you walk me though it a bit more? PM me if you like.
I have completed all other projects, left this one to come back to and found that you have had the same issue.
Any assistance would be greatly appreciated.
https://kevchaplin.github.io/javascript-calculator/

#6

At a quick glance, it looks like handleClick / handleChange is updating the state which re-renders everything, at which point i think the tests read the output.

Then you calculate your answer inside a useEffect at which point i think the test doesn’t care anymore.

  useEffect(() => {
        setOutput(output => (HandleDisplay(output, input)))
        }, [input]

Each state update re-renders the component and it’s children, tho i’ve not encountered having components inside the useEffect itself.

As it’s not on codepen, it’s a bit hard for me to mess with the code and try any changes.

#7

Thank you for your rapid reply. I will have a look at this and see if I come up with anything.
Thanks again.

#8

You are a legend. You were right about the useEffect. I had another look and found I could achieve the same effect with some reworking of my logic ( I removed the input as a state and used a variable instead).
I have (of course) now found another small problem, but one that should be easily remedied, the main thing is the tests now read my result!

Thank you so much.

#9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.