RN(ReactNative) TDD TODO 앱 만들기 #6

2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5

RN(ReactNative) TDD TODO 앱 만들기 #5

 

Code Refactoring

일단 데이터를 지칭하는 것 부터 맞추려고 합니다. 개발새발 여기저기서 코드 참고하면서 개발하니 변수가 조금씩 달라서 보기 안좋네요.

todo app 을 만드는 것이니

Task : 할일, 단수 Task 데이터는 Item , 복수 Task 는 Data 로 변경

변경해야 하는 것이 HomeScreen-test 에는 없고

HomeScreen.jsx 에서는

     newTask => newItem, handleAddTask => handleAddItem

변수명 통일하고 저장하고 테스트

 

지금까지 느끼는 것은

TDD 의 장점은 눈으로 확인이 가능하다 인 것 같네요

개발시에 내 코드에 대한 불신을 줄여줌

 

TaskList.jsx 에서는 TaskItem 에 전달하는 데이터가 단수이니 data => item 으로 변경

테스트 실행 = > 테스트 통과율 33.3%

에러 로그들 보면 TaskItem 이 랜더링 안되어서 나오는 것 이니

이제 TaskItem.jsx 수정

TaskItem 은 단수 데이터만 받으니 data => item 으로 변경

다시 테스트 => 이제 통과율 66.7%

 

TaskItem-test.js 가 실패이니 거기도 더미 데이터 명을 data => item 으로 변경

그리고, 테스트 하면 100%

이제 변수 변경은 완료~~~~

 

Debug 하기

checkbox 클릭하면 이미지가 변경된 것을 확인할 수 있는지 Debug 합니다

TaskItem-test.js 에서

  it('should call toggle method when checkbox is clicked', () => {
    const element = wrapper.getByTestId('checkbox');
    // screen.debug('optional message');
    screen.debug.shallow('checkbox element');
    fireEvent(element, 'pressOut');
    expect(props.onToggleCheckbox).toHaveBeenCalledTimes(1);
  });

screen.debug 나 screen.debug.shallow 를 추가하면 출력에 wrapper 하면 element 를 포함해서 전체 component 가 출력됩니다

그중에 testID = checkbox 만 발췌하면 아래와 같다

        <TouchableOpacity
          onPressOut={[Function handleToggleCheckbox]}
          testID="checkbox"
        >
          <FeatherIcon
            color="green"
            name="square"
            size="small"
          />
        </TouchableOpacity>

현재는 색상 이외에는 구분할 수 있는게 없다

이미지 소스도 찾을 수가 없으니 뭔가 완료 여부에 따라서 변경되는 것을 추가해야 할 것 같다

TaskItem 체크박스 아이콘 변경

TaskItem-test.js 에서 테스트 케이스를 추가

//TaskItem-test.js
...생략...
  it('should checkbox Style color is blue when done is true', () => {
    props.item.done = true;
    wrapper = render(<TaskItem {...props} />);
    const element = wrapper.getByTestId('checkbox');
    expect(element).toHaveStyle({color: 'blue'});
  });

일단 궁여지책으로 TouchableOpacity 에 적용되는 style 하나 만들고 완료되면 color : blue 적용되게 추가했다

현재 스타일이 변경되어 봐야 checkbox 는 이미지 이기 때문에 스타일 color 가 적용되지 않는다

그래서 Icon 내부의 이미지와 색상을 별도로 수정해줘야 한다

TaskItem.jsx 도 테스트 성공되게 수정한다

//TaskItem.jsx

...생략...

const TaskItem = ({item, onToggleCheckbox}) => {
  const {subject, done: isDone} = item;

  const handleToggleCheckbox = () => {
    onToggleCheckbox(item);
  };

  return (
    <View style={styles.taskItem}>
      <TouchableOpacity
        style={isDone ? styles.iconChecked : styles.iconUnchecked}
        onPressOut={handleToggleCheckbox}
        testID="checkbox">
        <FeatherIcon
          name="square"
          size="small"
          color={isDone ? 'blue' : 'green'}
        />
      </TouchableOpacity>
      <Text style={styles.subject}>{subject}</Text>
      <FeatherIcon name="edit-2" size="medium" color="blue" testId="edit" />
      <FeatherIcon name="delete" size="medium" color="red" testId="delete" />
    </View>
  );
};

...생략...
스타일도 2개 추가

  iconUnchecked: {
    color: 'green',
  },
  iconChecked: {
    color: 'blue',
  },
  
  
 ...생략...

제대로 변경되었는지는 테스트 100% 로 확인하고

실제 애뮬레이터에서 클릭하면 색상이 변경되는 것도 확인 

완료된 Task 의 체크박스는 파란색으로 변해있다......

 

Refactoring

완료된 task 는 텍스트도 흐릿하게 하고 취소선도 그어주고

아이콘도 medium 으로 좀 키우고 마진도 주고

style 도 그룹핑 해서 가독성 있게 표현해주고

 

리팩토링 결과는 아래와 같습니다.

 

지금까지 느낀 거

테스트 코드 만드는게 어렵다. react Native 구조를 모르면 뭐가 테스트 성공을 나타내는 요소인지 모른다

단순히 TEXT 만 찍는 거야 테스트 케이스가 쉽겠지만 TEXT 로만 표현하는 게 아니니 문제다

(구글링 해도 잘 안나온다)

jest 의 matcher 와 jest-native 의 matcher 를 잘 알아야 한다