MathJS for FCC Javascript Calculator

Tell us what’s happening:
Describe your issue in detail here.
I am using mathjs: https://api.mathjs.org/
to calculate my input.

for the test: 3 + 5 * 6 - 2 / 4
the result is 32.5

but it is not accepted by the test.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Challenge: Build a JavaScript Calculator

Link to the challenge:

It’s not clear to me what is happening in the test (I wish it showed what answer it is getting). But I can confirm that I can manually get the right answer.

I did notice that at first the keys were occasionally unresponsive - I don’t know why, but in the beginning it took several clicks to get a button to fire. But that cleared up, for some reason.

But I also notice that you call that endpoint several times. First of all, the test may not be accounting for an asynchronous response - it may be checking it before the response returns. I don’t think most people use an asynchronous service for this. For a proper unit test like that you’d either need to mock the service (because they didn’t do here because the can’t predict that you’d use one) or have to build in a delay (and hope for the best). They didn’t do that because it didn’t occur to them that there would be a need.

The other issue here is that even if I do a simple equation like “1 + 1 =”, when I hit the =, it calls that endpoint several times. I renders several times. I put a console log in the render method of Panel. Notice that it renders the answer7 times. That’s without hitting any keys.

{
  "expr": ["1 + 1"],
  "precision": 4
  }
Panel.render 1 + 1
{
  "expr": ["1 + 1"],
  "precision": 4
  }
{
  "expr": ["1 + 1"],
  "precision": 4
  }
Panel.render 1 + 1
{
  "expr": ["1 + 1"],
  "precision": 4
  }
Panel.render 1 + 1
Panel.render 2
Panel.render 2
Panel.render 2
Panel.render 2
Panel.render 2
Panel.render 2
Panel.render 2

When I look in the network tab, I see:
Screen Shot 2021-10-16 at 6.52.42 PM

Note that all those calls to your POST endpoint took place after hitting the = and nothing else. Since you are calling the function to fetch that from the render method, it is getting rerun every time a render is happening. That is a bad habit to get into. Fetches are expensive and can harm user experience - they should be minimized.

I don’t know if one or both of these issues is causing your problem (or maybe neither), but that’s where I would start looking.

And in all fairness, I don’t know if this is doable with an asynchronous calculation like that. Sure, a calculator can work, but I don’t know if these tests can pass with that. (Unless you already know it can because someone else did it.)

2 Likes

Hi Sir, I resulted to using javascript eval. since its really expensive to use AJAX or fetch.

Thank you for looking at the problem.

I just need to pass 1 more problem which is #13 test.

Thank you.

It’s not clear to me what is happening in the test (I wish it showed what answer it is getting).

Out of curiosity @kevinSmith,

Could you elaborate on why we can’t see the answer the test suite is getting?
Is it because the tests are stored on FCC’s servers, and therefore not editable on our end?

And if so, If the tests were being run locally would we would not have that issue? (since we could just edit the test files ourselves)

Or is there something else I’m missing?

Thanks!

Click Run Test. Then you can click the button ‘Test’ or ‘Passed’ to see the result of each test.

Could you elaborate on why we can’t see the answer the test suite is getting?

What I meant above is the answer your program is giving the test suite, not the results of the test suite itself.

So, as an example, for the test: 3 + 5 * 6 - 2 / 4 . As you said it’s failing, which I can also see.

But what answer is the test suite getting instead of 32.5?
That way we can easily figure out what is causing the test to fail.

The test is running the calculation and checking the result against what it expects. The ouput from he test says what it expected and not what it got.

1 Like

Is it because the tests are stored on FCC’s servers, and therefore not editable on our end?

Right, But now that you mention it, there may be a way to edit in the browse console. I’ll have to try that.

And if so, If the tests were being run locally would we would not have th

Yeah. In the “real world”, you’d usually be able to run your tests locally. You could mess around with em to find the problem.

I’ve never tried to run the test suite locally. Maybe I’ll give it a shot.

1 Like

You can, it’s a js file that is imported in the project, just make your own copy of it