JavaScript Calculator: displayed input failing 'display' test

Adding to the list of “Can’t get JavaScript Calculator to pass test #8.”

repo
live

BEHAVIOR:

  • If I type in ‘123’ THEN run the tests, test #8 PASSES, but test #7 (tests clearing the calculator) FAILS
  • If I run tests from scratch, the clear test (#7) PASSES, but test #8 (‘123’) FAILS.

So the tests pass only if the values exist prior to test run.

CHECKS:

  1. dug through the forum. unfortunately, no relevant answers.
  2. element in place: span#display
  3. values update in app state
  4. values render in DOM
  5. checked in console, document.getElementById(‘display’) returns ‘123’.

MORE:

I looked at the tests repo and didn’t see anything there:

  1. clears calc before test
  2. clears calc after test
  3. requires #s render in #display as you type

I’m out of educated guesses. I’ll keep throwing sh*t at the wall tho.

Thanks for any help guys!

UPDATE

I messed with this for 4 days before posting my question only to figure it out an hour later…

CAUSE

The conditional in the test util function clickButtonsById() checks for key.click === 'function'.

I was using onMouseDown and onMouseUp synthetic events in my React components to create dynamic btn-push styles. This means that everything was working ok, but because my handlers were based on mousedown/mouseup DOM events, the test wasn’t able to register the input. Good times.

SOLUTION

Changing my component event callbacks from onMouseDown and onMouseUp to onClick fixed 5/6 failing tests.

check out the util test function here: element-utils.js

( line 14 )

export function clickButtonsById(buttonIds) {
  const keys = getElements(buttonIds);
  keys.forEach((key) => {
    if (key && typeof key.click === 'function') {
      key.click();
    }
  });
}

* Might be worth some time to read through the tests. Helped me get a better idea of what they actually expect our project code to do.

Peace!

  • eph