【Day21】补上data-test属性及判断Component和按钮及数字是否正确显示(╯✧∇✧)╯

基本上我们会用到 计数器这整个Component (div) 、显示数字 (span)、按钮(button)这三个DOM，

所以先在我们的Component上加上data-test属性吧!

• Div Dom

 <Container className="App" data-test="component-app">
 
 </Container>

• Span Dom

   <h1 data-test="counter-display">
      <FontAwesomeIcon icon={faHeart} style={{color:"red"}}/>&nbsp;&nbsp;
      <span data-test="count">{count}</span>
  </h1>
  

• Button Dom

  <Button variant="primary"
                      data-test="increment-button"
                      size="lg"
                      onClick={() => setCount(count + 1)}
                  >
                      Give me a heart !
  </Button>
  

加完属性後，先来第一个单元测试 => Component是否正确显示

test('renders without errors', () => {
  const wrapper= setup();

  const appComponent=findByTestAttribute(wrapper,"component-app");
  expect(appComponent.length).toBe(1);

});

还记得setup这个function哪来的吗? 前面我们有将重复会用到的code写成共用function，

setup这个function就是拿来渲染我们的Component，渲染完後，
我们要用data-test属性一样透过先前写的共用function =>findByTestAttribute 来找Component，
我们期望找到的是「1个」Component。

到这边先执行npm test 看一下有没有错误吧~ ( YA~~ PASS了!

接下来用一样的方式来看看按钮跟数字是否正确显示吧!

• Button

  test("render button",()=>{
    const wrapper= setup();
  
    const incrementButtont=findByTestAttribute(wrapper,"increment-button");
    expect(incrementButtont.length).toBe(1);
  });
  

• Span

  test("counter display",()=>{
  
    const wrapper= setup();
    const counterDisplay=findByTestAttribute(wrapper,"count");
    expect(counterDisplay.length).toBe(1);
  });
  

写完以後，按存档其实测试就会自己Reload罗! ( YA~~又Pass了!

还有测试计数器数值的初始值和按按钮的单元测试还没写，下一篇来把它补齐吧!

快了!我们快要完成第一个Component的测试了

加油啊!!! 测试完成了的话，小菜鸟会再做一些关於React的补充和自己踩过的一些小地雷(๑•̀ㅂ•́)و✧