Trouble with the Javascript Calculator tests

Hi, I’ve been working on the calculator and some of the tests seem to work strangely. For test 8, I’m pretty sure I should be passing (test 8: As I input numbers, I should be able to see my input in the element with the id of “display”). I can cheese the test and get it to pass if I run the test with 123 in the display. Similarly, test 7 won’t pass unless I run the test with 0 in the display even though the clear button works as well. Here’s my calculator:

Thanks!

On a different note, it is worth it to streamline your code by removing the hard coding [props.operator(’*’), props.inputNum(‘7’), props.inputNum(‘8’), etc] by using e.target and textContent.

Makes sense. So I would just have the function take an e argument and then e.target.value would be the value of the inner HTML of the button (e.g. ‘*’ or ‘8’)?

That would be simpler!

And you can simplify even further by using event delegation and proper conditionals.

Well, first, I’m assuming that you’re not finished with the project as there is still a lot of erronious behavior such as you can’t string values together, and other things.

But regarding test 8 behavior it is weird, and to me it seems that the tests aren’t able to click the buttons correctly because what you have on the display when the tests start shouldn’t effect the test I wouldn’t think.

I notice it does clear it to 0 when the tests run… and see that your clear button you call the function directly (onclick={props.clear}) but on each of your number buttons you create a function that calls the function (onclick={() => props.inputNum('0')}. Is there a reason for this? I’m wondering if due to the way the test runs if it can’t call the embedded function. Have you tried changing it to be like your clear button?

Hi, nope it’s not done yet, I’m just trying to go through and get the tests working one at a time. Also, You may have clicked on when I was messing around trying to get the 5…5 => 5.5 test to work, you should be able to string values if you reload.

The reason for that syntax was to be able to pass the arguments ‘1’, ‘+’ etc. I think its a react specific syntax I got from the react documentation, it doesn’t work normally otherwise. But tioung pointed out I could avoid passing arguments altogether.

I’m not sure what that means. Is there an article you could point me to? But honestly, I’m mostly just trying to get this work first.

Yeah, on-click should pass e automatically.

I did notice numpad had a wrapping div with an unfinished id:
<div id>

Don’t think that would cause any problems down the line, but possibly something to fix and see if it caused any issues.

Also, I just refreshed, and I still can’t pass a string of operators… 5+5+5 = 10

Oh I see what you’re saying, I thought you meant you couldn’t type ‘555’. You’re right, it can only do 5+5=10 right now, and I haven’t set it up to solve when the next operator it inputted yet.

Scanned through, and can’t find a definitive reason why the tests don’t seem to be able to manipulate your calculator… I added a console.log statement to input, and it appears the test is able to push the buttons… so maybe its reading an incorrect value for display. I did go to my calculator and used a callback for the onclick, and it still passed the tests. Hopefully someone else may have some insight.

Just one thing I did see:

   this.setState(state=>({
     operator: str,
     memory: this.state.display 
    }));

Using a callback function in setState is so that you use an immutable state value… so your memory should probably equal state.display, not this.state.display… it won’t change the current functional issues though.

Noted, and thanks for looking!

OK, I’m not a REACT pro, but in adding console.log(this.state.display) to your number press function, I was right in that the tests weren’t able to update the state. I couldn’t find anything with your code, but did find your ReactDOM stuff was different than was shown in the class:

const calc = <Calculator />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(calc);

I’ve never seen createRoot. I changed it to what was shown in class:

ReactDOM.render(<Calculator />, document.getElementById('root'));

Now its passing the tests. Seems that creating a root caused the test to be working off a different instance or something.

1 Like

You’re a legend, thank you!

No Problem:) At a glance it seems the createRoot is part of a new API, so wasn’t necessarily wrong I guess… maybe the class testing script isn’t compatbile with the new API yet or something.

1 Like

I’ve been struggling to get my projects like drum machine and Calculator to pass, even though they seemed to work exactly as needed in the tests. Now that I changed the React initiation to what kinome79 suggested: ReactDOM.render(<App />, document.getElementById('your-container')) it miracously passed the tests I struggled with.

Welcome to the forum.

Yeah, It seems React was recently updated to version 18 which has a different way of doing the rendering it seems. The test on FCC don’t seem to like that new way.

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