[취업준비일지] - 124

1.Test를 하기 위한 test()내부에서 render()를 통해 가상 돔을 구축했기 때문에
fireEvent 등을 통해 작동시킬 수 있는 것은 알았지만
추가적인 동작들을 내부에서 계속 돌릴 수 있다는 사실도 추가적으로 알 수 있었다.

작동 확인을 위해 체크박스 등을 확인할 경우
fireEvent.click(checkbox) 등을 통해 기능 테스트를 한 다음
다시 체크박스 클릭을 통해 체크 해제를 하고 기능 해체가 되었는지 또는
다음 작동으로 넘어갔는지 등을 확인할 수 있었다.


2.라벨을 통해 특정 값을 찾고 싶은 경우
아래와 같이 특정 값에 id가 달려있다면 그 id를 지정한 다음
label 사이에 값을 넣어주면 라벨을 통해 값을 찾을 때 인식할 수 있다.

<input id="z1x2c3"/>
<label htmlFor="z1x2c3">This is label name</label> 

test("this is label check", () => {
  const checkbox = screen.getByRole("checkbox", { name: "This is label name"})
})

 

 

또는 아래와 같이 getByLabelText를 통해서도 가능하다.

<label>
  This is label name
  <input />
</label>
<label>
  This is label name
  <textarea></textarea>
</label>

test("this is label check", () => {
const inputTest = screen.getByLabelText('This is label name', {selector: 'input'})
})

 

 

중요한 점은 getByLabel등에 집착하기보다는 여러가지 방법으로 접근할 수 있다는 것을 기억하고
필요에 따라 유연하게 사용해야 한다는 것이다.



(1).백준 5102번 Sarah's Toys는 Sarah의 장난감들 중
침대 위에 짝지어진 인형의 짝 숫자와 3개 그룹의 숫자를 출력하는 문제로
각각의 테스트케이스마다 2개 이상인지를 먼저 체크한 다음
2개 이상인 경우 2로 나눠지는지를 확인해 나눠지면 n/2, 0
나눠지지 않으면 3개 이상이기 때문에 (n-3)/2, 1로 처리했다.

const input = `7 3
6 3
5 4
0 0`.split('\n')

const result = []

for(let i = 0 ; i < input.length -1 ; i++){
    const [have, minus] = input[i].split(' ').map(Number)
    const leftNum = have-minus
    if(leftNum < 2){
        result.push("0 0")
    }
    else if(leftNum%2){
        result.push(`${(leftNum-3)/2} 1`)
    }
    else{
        result.push(`${leftNum/2} 0`)
    }
}

console.log(result.join('\n'))