【Day22】判断计数器数字初始值是否为0且按下增加的按钮时结果是否正确「(°ヘ°)

上一篇针对了计数器Component做了三个单元测试，
Component、计数器按钮、计数器的数字是否正常显示，

还少了两个单元测试 => 计数器数字的初始值及按下按钮是否为我们要的结果

废话不多说!! 来吧! 先来看看计数器数字的初始值是不是我们要的 (通常是0啦~)

首先，一样建立一个单元测试，并给予测试的名称。

test("counter start at 0",()=>{

});

一样先透过我们先前撰写的共用function来渲染出我们的Component

test("counter start at 0",()=>{

  const wrapper=setup();

});

接着一样从我们渲染出的Component上找到放置数字的DOM，
且透过text这个function来取得该DOM的文字

test("counter start at 0",()=>{

  const wrapper=setup();

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


});

最後我们要看这个文字是不是0

test("counter start at 0",()=>{

  const wrapper=setup();

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

  expect(count).toBe("0");

});

先执行看看npm test 结果是不是Success!

如果结果为Success的话，那就往下一个单元测试前进 ! =>按下按钮的结果是否为我们预期的

首先，我们一样要使用共用function来渲染出Component且取得按钮DOM

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

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

比较特别的是，当我们要模拟事件动作的时候，我们是透过simulate这个API去进行，

利用所找到的按钮DOM透过simulate去进行Click动作

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

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

按完按钮後，来检查计数器的数字是否为1
(如果在Component里的function是累加别的数字的话，那就判断按下按钮是否为该数字)

找到数字显示的DOM的text後，去判断是否为1

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

    const wrapper = setup();
	const button=findByTestAttribute(wrapper,'increment-button');
	button.simulate('click');
	
	const count=findByTestAttribute(wrapper,"count").text();
	expect(count).toBe("1");
	
});

存档後，测试会自动重新跑一次，没有问题的话结果会是Success!

也就是说...到这边我们总共有五个单元测试(如下图)