Final test passes manually, but fails when done automatically

[roachy]

The last test for my calculator is failing even though, when performed automatically, it works perfectly? Why would this be?

There test that’s failing is this one:

14. Pressing an operator immediately following “=” should start a new calculation that operates on the result of the previous evaluation.

And this is the error message in its entirety:

14. Pressing an operator immediately following "=" should start a new calculation that operates on the result of the previous evaluation
Script error. (:0)
Error: Script error. (:0)
    at r.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:94595
    at Array.forEach (<anonymous>)
    at te (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:94541)
    at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:171917)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259477
    at ny.Dg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259772)
    at r.Qg.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274680)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:275616
    at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274033)

Link here so you can have a look: https://codepen.io/roachy/pen/WNdQmRx

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

freeCodeCamp.org

Any help greatly appreciated, I’ve been stuck on this for a few days now. I keep googling the same things worded slightly differently to try find a post discussing this but no love. Send help!

[ilenia]

I opened the browser console and found this

You may want to figure out where it comes from as it may be what is causing the test to not work

[kevinSmith]

For reference, here is the test that is failing:

      it(`Pressing an operator immediately following "=" should
      start a new calculation that operates on the result of the previous
      evaluation`, function () {
        clickButtonsById([_5, _min, _2, _eq, _div, _2, _eq]);
        assert.strictEqual(
          getInputValue(document.getElementById('display')),
          '1.5',
          'The sequence "5 - 2 = / 2 =" should produce an output of "1.5" '
        );
        clearDisplay();
        clickButtonsById([_5, _plus, _5, _eq, _plus, _3, _eq]);
        assert.strictEqual(
          getInputValue(document.getElementById('display')),
          '13',
          'The sequence "5 + 3 = + 3 =" should produce an output of "13" '
        );
      });

The trace in the error makes it seem to me that it is not just failing for “not working well” but is failing on some JS level, perhaps what ilenia is saying.

[roachy]

Hi, how did you get that error? I’ve opened the browser console and can only see this. Scrolled through to find that same error but nothing came up.

[roachy]

What would that mean? Like, an issue with the browser?

[ilenia]

@kevinSmith

"5 - 2 = / 2 ="

like this sequence gives that error

[kevinSmith]

Yeah, I see the same console error as ilena.

If you were asking about what I mean by my “failing on some JS level” I mean that there is an error being thrown somewhere in your code or the test code.

[roachy]

@kevinSmith

5 - 2 = / 2 =

Ah yes, thank you I can see that now. It seems to be throwing its hands up when I select an operation directly after selecting equals… I don’t really know what “invalid left-hand side in assignment” means though. Clicking on those links, they’re specifying the eval on line 61, and the onClick for the the operative key… Weird

[kevinSmith]

@roachy

invalid left-hand side in assignment

In JS, that means you are trying to assign something to something that cannot receive an assignment. For example, in JS 4 = 2 would be an invalid assignment - you can’t assign 2 into 4. I assume something like that is going on.

[roachy]

Solved!

Thanks for pointing me in the right direction both of you. Putting the explanation down here for indexing purposes. Previously my code for handling operative keys was as below:

   function functionKey(key) {
     if (sumX == 0 && func == []) {
       setFunc(key);
    } else if (sumX == 0 && func !== [] && key == '-') {
       setSumY(0 - sumY);
    } else if (sumX == 0 && func !== [] && key == '+') {
       setSumY(Math.abs(sumY));
       setFunc(key);
    } else if (sumX !== 0 && sumY == 0) {
       setFunc(key);
       setSumY(sumX);
       setSumX(0);
       setDot(0);
    } else if (sumX !== 0 && sumY !== 0) {
       setFunc(key);
       setSumX(eval(Number(sumY) + func + Number(sumX)));
       setSumY(eval(Number(sumY) + func + Number(sumX)));
       setDot(0);

The error in the browser console only occurred when an operative is selected after the equals is pressed. I also noticed that I didn’t have an explicit case in my if/else statement for a key input of equals. So, I changed the end of the functionKey function to the following:

    } else if (sumX !== 0 && sumY !== 0 && key !== '=') {
       setFunc(key);
       setSumX(eval(Number(sumY) + func + Number(sumX)));
       setSumY(eval(Number(sumY) + func + Number(sumX)));
       setDot(0);
     } else if (sumX !== 0 && sumY !== 0 && key == '=') {
       setFunc(key);
       setSumX(eval(Number(sumY) + func + Number(sumX)));
       setSumY(0);
       setDot(0);
     }

Now when both my variables for holding sums (sumX and sumY) both have an assigned value and equals is pressed, now it assigns the new value to sumX and clears sumY. So, in summary, the problem was that equals needed to be handled slightly differently than other operations, and I wasn’t allowing that in the functionKey function.

Woosh, glad that’s over. Time to get into the CSS side of things and make it look pretty.

Thanks again.