[취업준비일지] - 123

1.하나의 test()에 여러개의 expect를 넣는 것은 고려해야 할 일인데
일련의 절차가 꼭 필요하다면 합쳐서 테스트를 해도 괜찮지만
단위테스트나 작은 기능들을 확인할 때는 따로 하는 편이 좋을 수 있다.

에러가 발생할 경우 test 내부에 있던 다른 expect들과는 관계없이
해당 위치에서 Error를 발생시키기 때문에 작은 테스트 하나를 더 확인하기 위해
전체 테스트를 다시 돌려야 하는 일이 발생할 수 있다.

그렇기 때문에 일부의 오류도 치명적인 기능(하나의 덩어리 자체가 중요)이 아닌 경우에는
각각의 단위가 제대로 동작하는지 따로 테스트를 작성하는 편이 좋다.


2.test를 하기 위해서 기능을 동작시키기도 하는데
fireEvent(node: HTMLElement, event: Event) 또는
fireEvent.{methodName}() 등의 형태로 작동시키며
해당 변화를 감지하여 button등에 걸린 onClick이 발동되고
거기에 알맞은 변화가 가상돔에서 실행되며
처리된 결과가 기대한 값인지를 비교하는 방식이다.
 

3.Jest에서 부정을 표시하고 싶을 경우 "!"를 사용하는 것이 아니라
.not을 앞에 붙여준다.
expect(something).toBeChecked()의 반대는
expect(something).not.toBeChecked() 같은 형태로 사용한다.


4.css에서 가져온 스타일의 경우 jest에서 무시되기 때문에 테스트하기 힘들다.
결국 style={}의 형태로 넣어주는 방식을 사용해야 하는데
이런 방식으로 코딩하기는 어렵기 때문에 클래스 이름으로 테스트하거나
트랜스포머를 사용해 css 클래스를 스타일로 변경해 확인할 수 있다.

클래스 이름으로 테스트하는 경우 실제 변경되었는지 여부는 제대로 체크되지 않기 때문에
실제 사용자 경험과 거리가 있는 경우가 있다는 단점이 있기 때문에
트랜스포머를 사용해 변환된 코드를 테스트하는 것이 안정적이다.





(1).백준 1107번 리모컨은 특정 번호키가 고장났을 경우 이동 횟수를 묻는 문제였다.
번호키는 다양하게 고장날 수 있으며 시작 위치는 100번임을 가정하고 있었다.

이를 해결하기 위해 아래와 같은 수도코드를 먼저 작성했다.

1.현재 자릿수가 2자리 이상이라면(10<=x) 한자리 적은 숫자 중 최고 숫자와 비교
2.현재 자릿수보다 한자리 높은 숫자 중 최저 숫자와 비교
3.현재 자릿수에 존재하는 모든 숫자와 비교
4.100번(시작 위치)과 비교

 

구현을 통해 하단처럼 만들었지만 모든 반례를 통과하고도 되지 않아

게시판 검색을 통해 해결되지 않는 하단의 반례를 찾았다.

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


const goal = input[0]
let moveCount = Math.abs(Number(goal) - 100)
const buttonLeft = []
const breakedNum = (Number(input[1]) > 0 ? input[2].split(' ').map(Number) : [])
for(let i = 0 ; i <= 9 ; i++){
    if(!breakedNum.includes(i)){
        buttonLeft.push(i)
    }
}
const maxButton = buttonLeft[buttonLeft.length-1]
const minButton = buttonLeft[0]
let strNow = ''

// 차이의 절댓값 반환 함수
const minusAbs = (a,b) => {
    return(Math.abs(Number(a)-Number(b)))
}

//현재 값 보다 작은 최대값 500일 경우 499
const maxLittleNum = (str, numNow) => {
    if(str === '' && (numNow === minButton || numNow === 1)){
        str += String(maxButton).repeat(goal.length-1)
    }
    else if(buttonLeft.indexOf(numNow) > 0){
        str += buttonLeft[buttonLeft.indexOf(numNow)-1]
        if(goal.length-str.length > 0){
            str += String(maxButton).repeat(goal.length-str.length)
        }
    }
    else{
        str += buttonLeft[buttonLeft.length-1]
        if(goal.length-str.length > 0){
            str += String(maxButton).repeat(goal.length-str.length)
        }
        
    }
    return str
}

//현재 값 보다 큰 최소값 500일 경우 501
const minBiggerNum = (str, numNow) => {
    if(str === '' && numNow === maxButton){
        if(minButton === 0 && buttonLeft[1]){
            str += buttonLeft[1]
        }
        else{
            str += minButton
        }
        str += String(minButton).repeat(goal.length)
    }
    else if(buttonLeft.indexOf(numNow)+1 > buttonLeft.length-1){
        str += buttonLeft[buttonLeft.length-1]
        if(goal.length-str.length > 0){
            str += String(minButton).repeat(goal.length-str.length)
        }
    }
    else{
        str += buttonLeft[buttonLeft.indexOf(numNow)+1]
        if(goal.length-str.length > 0){
            str += String(minButton).repeat(goal.length-str.length)
        }
        
    }

    return str
}

for(let i = 0 ; i < goal.length ; i++){
    const goalNow = Number(goal[i])
    moveCount = Math.min(moveCount, minusAbs(maxLittleNum(strNow,goalNow), goal)+goal.length)
    moveCount = Math.min(moveCount, minusAbs(minBiggerNum(strNow,goalNow), goal)+goal.length)
    if(buttonLeft.includes(goalNow)){
        strNow += goal[i]
    }
    if(strNow.length === goal.length){
        moveCount = Math.min(moveCount, minusAbs(strNow, goal)+goal.length)
    }
}

console.log(moveCount)

 

반례를 찾았고 문제를 해결하고 또 해결했지만
아직까지도 오류가 남아있는 상황이다..
테스트를 배우고 나니 이정도 규모에서 에러 찾기도 복잡한데
실제 서비스 규모에서 에러를 찾고 해결하기가 얼마나 힘들지 생각해보면
TDD의 필요성에 대해 실감할 수 있었다.


결국 오늘은 시간상 백준 2522번 별 찍기-12를 제출할 수 밖에 없었다.

const input = 3

for(let i = 1 ; i <= input ; i++){
    console.log(`${' '.repeat(input-i)}${'*'.repeat(i)}`)
}
for(let i = input-1 ; i > 0 ; i--){
    console.log(`${' '.repeat(input-i)}${'*'.repeat(i)}`)
}