JS Calculator Tests Won't Pass

[VWashingtonCoder]

So my tests won’t pass despite when I manually perform them I get the correct answers. Any help would be appreciated.

import './App.css';
import React, { useState } from 'react';

const initialDisplay = {
  previousNum: "",
  currentNum: "",
  operation: ""
}

const App = () => {
  const [calculator, setCalculator] = useState(initialDisplay);
  const { currentNum, operation, previousNum } = calculator;

  function clear() {
    setCalculator(initialDisplay);
  }

  function deleteNum() {
    setCalculator({ ...calculator, currentNum: currentNum.slice(0, currentNum.length-1) });
  }

  function appendNumber(evt){
    const character = evt.target.value;

    if (character === "." && currentNum.includes(".")) return;
    else if (character === "0" && currentNum === "0") return;
    else if (character === "." && currentNum.length === 0) {
      setCalculator({ ...calculator, currentNum: "0" + character});
    } else setCalculator({ ...calculator, currentNum: currentNum + character});
  }

  function compute(operator) {
    let result;
    const previous = parseFloat(previousNum);
    const current = parseFloat(currentNum);

    if (isNaN(previous) || isNaN(current)) return;

    switch (operation) {
      case "+":
        result = previous + current;
        break;
      case "-":
        result = previous - current;
        break;
      case "*":
        result = previous * current;
        break;
      case "/":
        result = previous / current;
        break;
      default:
        return;
    }

    if(operator === "=") {
      setCalculator({
        ...calculator,
        currentNum: result,
        previousNum: "",
        operation: ""
      });
    } else {
      setCalculator({
        ...calculator,
        currentNum: "",
        previousNum: result,
        operation: operator
      });
    }
  }

  function chooseOperation(evt) {
    const operator = evt.target.value;

    if (operator === "-" && operation !== "") {
      setCalculator({ ...calculator, currentNum: currentNum.padStart(currentNum.length + 1, operator) });
    } else if (operation !== "" && (currentNum === "" || currentNum === "-")) {
      setCalculator({ ...calculator, currentNum: "", operation: operator });
      return;
    } else if (currentNum === "") return;
    
    if (previousNum !== "") {
      compute(operator);
    } else {
      setCalculator({
        ...calculator,
        previousNum: currentNum,
        currentNum: "",
        operation: operator
      });
    }
  }

  return(
    <div className="App">
      <h1 id="title">JavaScript Calculator</h1>
      
      <div className='previous-num'>{`${previousNum} ${operation !== "/" ? operation : "÷"}`}</div>
      <div id="display">{currentNum === "" ? "0" : currentNum}</div>
      
      <div id="calculator"> 
        {/* row top */}
        <button id="delete" onClick={deleteNum}>DEL</button>
        <button id="clear" onClick={clear}>AC</button>
        {/* row 1 */} 
        <button id="add" value="+" onClick={chooseOperation}>+</button>
        <button id="subtract" value="-" onClick={chooseOperation}>-</button>
        <button id="multiply" value="*" onClick={chooseOperation}>*</button>
        <button id="divide" value="/" onClick={chooseOperation}>÷</button>
        {/* row 2 */}
        <button id="nine" value="9" onClick={appendNumber}>9</button>
        <button id="eight" value="8" onClick={appendNumber}>8</button>
        <button id="seven" value="7" onClick={appendNumber}>7</button>
        <button id="equals" value="=" onClick={chooseOperation}>=</button>
        {/* row 3 */}
        <button id="six" value="6" onClick={appendNumber}>6</button>
        <button id="five" value="5" onClick={appendNumber}>5</button>
        <button id="four" value="4" onClick={appendNumber}>4</button>
        <button id="decimal" value="." onClick={appendNumber} >.</button>
        {/* row 4 */}
        <button id="three" value="3" onClick={appendNumber}>3</button>
        <button id="two" value="2" onClick={appendNumber}>2</button>
        <button id="one" value="1" onClick={appendNumber}>1</button>
        <button id="zero" value="0" onClick={appendNumber}>0</button>
      </div>
    </div>
  )
}

export default App;

[lasjorg]

It passes for me if I switch to the old render method.

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

You can also downgrade to React 17.

---

We have tried to fix the tests to work with React 18 but they still fail for some people.

[VWashingtonCoder]

That did it. Now I’m fully passing. Thank you.

[brunnock]

Now my code won’t pass. I’m using React 17 as well, but I’m using the useReducer hook instead.

Below is a barebones version of my code. It won’t pass test #7 (the clear function) even though it works in my live demo.

function init() {
  return {display:0, runningTotal:0, operation:null, float:false};
}

function reducer(state1, action) {
  let state = {...state1};

  switch (action.type) {

  case 'numClick':
    if (state.display===0 || state.display==='0') state.display='';
    state.display = state.display.toString() + action.num;
    break;

  case 'float':
    if (!state.float) {
      state.display = state.display + '.';
      state.float=true;
    }
    break;

  case 'compute':
    break;

  case 'clear':
    state =  init();
    break;
  }

  return {...state}
}


function Calculator () {
  const [state, dispatch] = React.useReducer(reducer, init());

  const Digit = (props) => <button id={props.id} onClick={()=> dispatch({type:'numClick', num:props.num})}>{props.num}</button>;

  const Op = ({id,op,symbol}) => <button id={id} className='op' onClick={()=> dispatch({type:'compute', op:op})}>{symbol || op}</button>

  const ACKey = () => <button id='clear' className='op' onClick={() => dispatch({type:'clear'})}>AC</button>

  const DecimalKey = () => <button id='decimal' className='op' onClick={() => dispatch({type:'float'})}>.</button>

  return (
    <div id="calculator">

      <div id='keypad'>
        <ACKey />
        <span id="display">{state.display}</span>

	<Digit id='seven' num={7}  />
	<Digit id='eight' num={8} />
	<Digit id='nine' num={9} />
	<Op id='add' op='+' />

	<Digit id='four' num={4} />
	<Digit id='five' num={5} />
	<Digit id='six' num={6} />
	<Op id='subtract' op='-' symbol='&ndash;' />

	<Digit id='one' num={1} />
	<Digit id='two' num={2} />
	<Digit id='three' num={3} />
	<Op id='multiply' op='*' symbol='x' />

	<DecimalKey />
	<Digit id='zero' num={0} />
	<Op id='divide' op='/' symbol='&#247;' />
	<Op id='equals' op='=' />
      </div>
    </div>
  )
}
ReactDOM.render(<Calculator />, main);