Javascript Calculator #13

I can’t wrap my head around how to pass #13 in the Javascript calculator project. Can anyone please explain the logic / code needed to pass this.

My code is below… Any help or guidance to understand this would be great.

Hello @CodeSwitch,

… Can anyone please explain the logic / code needed to pass this.

That is really time consuming, because, to do that we would have to know the “shape” of your solution. And your code doesn’t have much information to get an idea.

An Example (addOperator):

...
} else {
  this.setState({
    currentValue:
    this.state.currentValue.slice(0,this.state.currentValue.length - 1) + e.target.value
  });
  }
} else {
  this.setState({
    currentValue: this.state.currentValue + e.target.value
  });
}
...    

What (exactly) are you testing here?


General comments

As far as I can see you are using an event-action[1] approach:

1.- Users supplies an event

2.- Event-handlers will execute functions in response to an event

3.- Elements of the user interface may respond to an event in different ways, depending on the context

4.- if-else statements are used to determine the context and which functions are executed

5.- Event-handlers must use information shared between user interface objects

6.- To share information the following options are used:

  • Explicit global variables

  • A value contained in an user interface object

  • Other attribute of an object

So, assuming that addOperator is where the bug is:

  • You may have and edge case

  • You may not be determing the context correctly ( 4.- if-else statements are used to determine the context and which functions are executed)


To find the bug, you will have to perform some experiments[2]:

If you want, you can use the input of the test #13 and this experiment:

state in this experiment will be this.state and if is possible to determine the class method

input is the button pressed

next it should be the next state … but in this experiment will be (probably) just addOperator

side effects the change produced (in this.state and the DOM). Is a good idea to add the line number(s) that generate the side effect.

You can use this thread ( React Calculator : feedback ) and video ( houc.bh90 review calculator - YouTube ) as reference.

Bellow is a template that you can fill.


Experiment #1:

input: 5 * - + 5

  • 5
state input next side effects
(line )
  • *
state input next side effects
(line )
  • -
state input next side effects
(line)
  • 5
state input next side effects
(line)
  • +
state input next side effects
(line)
  • 5
state input next side effects
(line )

When you are done with the experiment, paste the table with the data here to see what the problem is (or to see if more experiments are needed).

Cheers and happy coding :slight_smile:

Notes:

[1] Event-driven programming - Wikipedia

In computer programming, event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or message passing from other programs or threads. Event-driven programming is the dominant paradigm used in graphical user interfaces and other applications (e.g., JavaScript web applications) that are centered on performing certain actions in response to user input.

[2] We will try to follow the recommendations of a talk about debugging:

Talk: Debugging with the Scientific Method, S. Halloway

  • Github:
  • Talk:

People see debugging as an occult art, when often it is the easiest part of software development. Debugging is a perfect closed world in which to apply the scientific method.

The scientific method integrates:

  • problem statements
  • testable hypotheses
  • observation
  • refinement

Read Andreas Zeller’s excellent Why Programs Fail, particularly chapters 5-7 and 11-14.

Zeller is also the instructor for the Udacity course on debugging.

David Agans’ Debugging book is a good introduction to many of the same ideas.

Blithe Rocher gave a nice Scientific Method of Troubleshooting talk at Distill 2014.

TL;DR

             +------------+  something is wrong
             |  FAILURE   | <-----------------------+
             +------------+                         |
               |                                    |
               | why                                |
               v                                    |
             +------------+                         |
+----------> | HYPOTHESIS | <+                      |
|            +------------+  |                      |
|              |             |                      |
|              | suggests    |                      |
|              v             |                      |
|            +------------+  | needs refinement     |
| falsified? | EXPERIMENT |  |                      |
|            +------------+  |                      |
|              |             |                      |
|              | produces    |                      |
|              v             |                      |
|            +----------------------------------------+
+----------- |              OBSERVATION               |
             +----------------------------------------+
               |
               | ?
               v
             +------------+
             |   THEORY   |
             +------------+

Definitions

FAILURE:

  • lack of success
  • omission of expected action

HYPOTHESIS:

  • a proposed explanation made on the basis of limited evidence as a starting point for further investigation

EXPERIMENT:

  • test, trial of tentative procedure

OBSERVATION:

  • active acquisition of information from a primary source

falsified?:

  • deductive process using modus tollens:

needs refinement:

  • The process of removing impurities or unwanted elements from a substance

THEORY:

  • A hypothesis offering valid predictions that can be observed

CAUSE:

  • an event preceding an effect without which the effect would not have occurred

ACTUAL CAUSE:

  • difference between the actual world and the closest possible world in which the effect does not occur

FIX:

  • an experiment that establishes an actual cause

WHAT TO DO

  • clear problem statement

  • efficient hypotheses

  • good experiments

  • useful observations

  • writing it all down

Problem Statements

  • steps you took
  • what you expected
  • what actually happened

Good Experiments

  • reproducible
  • driven by hypotheses
  • small
  • change only one thing
  • try to keep the experiment environment clean (no gulp, pluggins, ect)

Making Observations

  • understand all the outputs
  • suspect correlations
  • use good tools

Write It Down

  • problem statement
  • hypotheses
  • what experiment should show
  • why experiment even make sense
  • observations

Software Specific

  • work at a high level of abstraction
  • the failure is not the defect
  • RTEFM, a bug start as an “unknown unknown” so that means read the entire manual
  • don’t trust, reproduce
  • automate