Js Calculator works manually but tests failes

JavaScript
1

I have completed my javascript calculator and when I try manually it works, but running tests fail(12, 13, 14 and 9 from second try onwards).

If I take 12 and do it manually:
The expression “5 * 5.5” should produce an output of “27.5” : expected ‘5.5’ to equal ‘27.5’
image
and same for 13,
The sequence “5 * - + 5” = should produce an output of “10” : expected ‘5’ to equal ‘10’
(new users can only embed one media in a post :frowning: )
I don’t know if it doesn’t wait after pressing ‘=’ or just doesn’t press it at all, but I can’t see any noticeable lag to investigate.

There are no errors in my console, I’ve also tried change useEffect to useLayout effect but to no avail.

2

I would log out things like key click and the values in the fields and run the test suite. Make sure that all of your keys and fields have the right ids and that things like the AC work as expected.

3

I did the logging and turns out that after AC button is clicked the 5 key is pressed so early that state doesn’t even update hence * isn’t registered and 5.5 is the answer as-is
image
as you can see ‘clear’ is logged inside HandleClick and now formula is: is logged in useEffect to log the new state every time. 5 is pressed so fast that it clears the screen with it. Is there a way to slow the tests down? because I even tried doing AC then 5 on a touch screen very quick, but couldn’t get it to break ;(

4

I’m not able to see the specific problem. I do notice a few things.

    function HandleClick(button: string): void {
        //clear screen
        if (button === "AC") {
            setFormula('');
            setDisplay('0');

            return;
        }

        //numbers can be negative
        if (button === "-" && display.length <= 1) {

            //already negative
            if (display === "-") return;
            // ...

You are setting formula and display and immediately doing logic off them. But they do not update instantly. You should save new values for local use. Or you should clean up the logic here - this is a very messy function. Part of why I’m giving up is I just don’t want to delve into it. You have if/else three layers deep. The sonar on my IDE is marking that function for Cognitive complexity of 24 - the limit is set at 18.

And functions should be camelCase. Only classes, components and enums should be PascalCase.

I also don’t understand this:

    useEffect(() => {
        HandleClick(lastKey);
    }, [lastKey]);

That state variable seems to only exists to trigger the function call? That seems odd to me.

I think if you simplify your logic, things will become clearer. Rethink things. Pull some things out into supporting functions.

5

Perhaps I should refactor my code to depend on useEffect as much as possible, definitely having to use the new value of formula is the issue

6

That is one approach. I also think it can be done without useEffect. I think simplification, especially of the logical structure, is the key.

7

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