【Day23】计数器减号按纽及测试小练习，先别偷看解答R ~ (⁎˃ᆺ˂)

这篇要来个小小练习，增加一个减号的按钮，并针对其结果作一个单元测试。

先别往下看，给自己五到十分钟... 再往下看解答 !

首先，和累加的按钮一样，我们先在画面上的部份建立一个Button的DOM，并给予data-test属性名称

<Col xs lg={4}>
              <Button variant="primary"
                      data-test="decrement-button"
                      size="lg"
                  >
                      Take away a heart !
                  </Button>
  </Col>

再来，我们必须检查计数器的值不能小於0，如果小於0则给予errorMessage

所以我们必须再建立一个errorMessage的state

const [errorMessage, setErrorMessage] = React.useState("");

并且在button的onClick事件上补上判断

 <Col xs lg={4}>
              <Button variant="primary"
                      data-test="decrement-button"
                      size="lg"
                      onClick={function(){
                          if(count==0){
                            setErrorMessage("XXXX")
                        }else{
                            setCount(count-1)
                        }
                      }}
                  >
                      Take away a heart !
                  </Button>
</Col>

如果点下去是小於0，给予错误讯息，如果不是则将计数器-1

接下来我们要来建立剪号的单元测试，看看是不是和我们预期的一样

首先 一样先给一个名称浅显易懂的单元测试

test("clicking on button decrements counter display",()=>{

});

再来一样先渲染出我们的Component且取得剪号按钮的DOM

test("clicking on button decrements counter display",()=>{

const wrapper = setup();
const button=findByTestAttribute(wrapper,'decrement-button');


});

接着一样透过simulate API 去模拟按钮被按下的样子

test("clicking on button decrements counter display",()=>{

const wrapper = setup();
const button=findByTestAttribute(wrapper,'decrement-button');
button.simulate('click');

});

最後取得目前计数器的值，看看计数器在按下後有没有变负数，如果没有 => 代表测试成功了

(因为没有进到计数器-1这个判断里)

test("clicking on button decrements counter display",()=>{

const wrapper = setup();
const button=findByTestAttribute(wrapper,'decrement-button');
button.simulate('click');

const count=findByTestAttribute(wrapper,"count").text();
expect(count).toBe("0");

});

存档後，npm test会自动重新侦测，Success了吗!!? 如果成功了，那就大功告成啦~

以上是小小计数器的几个单元测试，当然~如果有想到其他需要检查的地方，

也可以自己写成单元测试!

下一篇，我们要把先前所学的测试整理整理一下 ! 因为一坨拉库也忘记到底学了什麽对吧 : )

没问题的，整理一下会清楚很多 !

等整理完之後就会进行React的补充罗 ~ 谢谢各位看官看到这边 !