這篇要來個小小練習，增加一個減號的按鈕，並針對其結果作一個單元測試。

先別往下看，給自己五到十分鐘... 再往下看解答 !

首先，和累加的按鈕一樣，我們先在畫面上的部份建立一個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的補充囉 ~ 謝謝各位看官看到這邊 !