A testing bug in FCC's React Simple Counter Challenge

I found a subtle bug while doing the “React: Write a Simple Counter” challenge.

If you look at the code below you’ll see that I binded this in this.reset to the this .decrement method. It should be:

this.reset = this.reset.bind(this);

The consequence of this error is that clicking the reset button which calls this.reset does not reset the counter and decrements it instead.

However, when I run the tests, all the tests are passed and the error is not detected!

I think we need to add an additional test for that specific scenario.

Link to the page with the problem:

React Simple Counter

My buggy code

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // change code below this line
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.reset = this.decrement.bind(this);  //Wrong binding
    // change code above this line
  }
  // change code below this line
  increment(){
    const count = this.state.count + 1;
    this.setState({count});
  }
  decrement(){
    const count = this.state.count - 1;
    this.setState({count});
  }
  reset(){
    const count = 0;
    this.setState({count});
  }
  // change code above this line
  render() {
    return (
      <div>
        <button className='inc' onClick={this.increment}>Increment!</button>
        <button className='dec' onClick={this.decrement}>Decrement!</button>
        <button className='reset' onClick={this.reset}>Reset</button>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
};

browser and operating system

• Browser Name: Chrome
• Browser Version: 67
• Operating System: Mac OS X 10_13_3

[thecodingaviator]

This looks pretty good to me. I see you’ve made a PR, that’s great, we’ll QA that soon

[LineCCC]

@thecodingaviator In terms of the buggy code provided in this issue, I think only the last test case is wrong.

In the last test case, the increment button is clicked twice so the secondValue = 2;
the decrement button is clicked once so the thirdValue = 1. That is why one more 
click on decrement button will give us 0, which is the same as when we click reset.

• Left part is the original version. Right part is the new version I made.

Basically, I added one more click on the increment button. Then I changed the values 
for "secondValue" and "thirdValue", i.e. secondValue = 3 and thirdValue = 2. In this 
case, if we do one more click on decrement button, we will get 1 instead of 0. So the 
wrong solution code "this.reset = this.decrement.bind(this);" will fail this test.

• I checked if my changes work on local host.

• After I made the change, we can see that the last test fails when I provide the wrong solution codes.

• And the last test passes when I provide the correct solution codes.