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

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

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

 

 

coverage 한번 확인하고 시작합니다

 

HomeScreen-test 에 지난번에 만든 checkbox 확인용 테스트 케이스 추가

초기 데이터가 2개니 첫번째 체크박스 클릭하면 첫번째만 blue 고 두번째는 green 인지 파악하는 테스트 케이스 입니다

  it('should first task style is blue and second task style is green when first task is done', () => {
    const elements = wrapper.getAllByTestId('checkbox');
    expect(elements.length).toBe(2);
    fireEvent(elements[0], 'onPressOut');
    expect(elements[0]).toHaveStyle({color: 'blue'});
    expect(elements[1]).toHaveStyle({color: 'green'});
  });

 

Task 삭제 기능 추가

delete 를 클릭하면 delete method 호출되는가?

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

//TaskItem-test.js
...생략...

    props = {
      key: '1',
      item: {id: '1', subject: 'Learn React Native', done: false},
      onToggleCheckbox: jest.fn(),
      onDeleteItem: jest.fn(),
    };

...생략...

  it('should call delete method when delete is clicked', () => {
    const element = wrapper.getByTestId('delete');
    fireEvent.press(element);
    expect(props.onDeleteItem).toHaveBeenCalledTimes(1);
  });
  
  ...생략...

onDeleteItem 함수를 mocking 해서 props 에 추가하고

testID = 'delete' 로 element 찾아서 onPress 이벤트 발생시키고 onDeleteItem 함수가 실행되었는지 체크

에러 메시지를 보면 1번도 호출되지 않았다 입니다....기능 구현이 아예 안되어있으니깐요.

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      64 |     const element = wrapper.getByTestId('delete');
      65 |     fireEvent.press(element);
    > 66 |     expect(props.onDeleteItem).toHaveBeenCalledTimes(1);
         |                                ^
      67 |   });

 

TaskItem.jsx 수정

• props 에 onDeleteItem 추가
• handleDeleteItem 함수 추가
• delete Icon 을 TouchableOpacity 로 감싸주고 testID='delete' 부여
• deleteButton 스타일 추가해서 TouchableOpacity 로 스타일적용

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

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

  return (
    <View style={styles.taskItemContainer}>
      <TouchableOpacity
        style={isDone ? styles.checkBox.checked : styles.checkBox.unchecked}
        activeOpacity={0.8}
        onPressOut={handleToggleCheckbox}
        testID="checkbox">
        <FeatherIcon
          name={isDone ? 'check-square' : 'square'}
          size="medium"
          color={isDone ? 'blue' : 'green'}
        />
      </TouchableOpacity>
      <Text style={isDone ? styles.subject.checked : styles.subject.unchecked}>
        {subject}
      </Text>
      {!isDone && (
        <FeatherIcon name="edit-2" size="medium" color="blue" testId="edit" />
      )}
      <TouchableOpacity
        style={styles.deleteButton}
        activeOpacity={0.8}
        onPress={handleDeleteItem}
        testID="delete">
        <FeatherIcon name="delete" size="medium" color="red" />
      </TouchableOpacity>
    </View>
  );
};

잘 변경이 되었는지는 테스트 돌려보면 됩니다

 

HomeScreen-test.js 에 테스트 케이스 추가

  describe('Delete Task', () => {
    it('should delete first task', () => {
      const elements = wrapper.getAllByTestId('delete');
      expect(elements.length).toBe(2);
      fireEvent.press(elements[0]);
      const elementsAfterDelete = wrapper.getAllByTestId('delete');
      expect(elementsAfterDelete.length).toBe(1);
    });
  });

HomeScreen-test.js 에 테스트케이스가 많아지고 있어서 명시적으로 그룹핑 좀 해주고

HomeScreen.jsx 에 테스트 케이스를 성공하도록 수정

중간에 걸쳐있는 TaskList 도 수정 (TaskList-test 에 props 종류에 대한 테스트 케이스가 없는데 추가해야 할지 말아야 할지 고민하다가 그냥 넘어감)

//HomeScreen.jsx
...생략...
  const handleDeleteItem = item => {
    setData(prevData => {
      const newData = prevData.filter(i => i !== item);
      return newData;
    });
  };

  return (
    <>
      <Title title="Todo TDD" />
      <TaskInput
        value={newItem}
        onChangeText={handleInputTextChange}
        onSubmitEditing={handleAddItem}
      />
      <TaskList
        data={data}
        onToggleCheckbox={handleToggleItem}
        onDeleteItem={handleDeleteItem}
      />
    </>
  );
}

삭제하는 함수 만들어주고 TaskList 로 해당 함수 전달해주면 끝~

 

초기 데이터가 2개인데 삭제 버튼 누르면 삭제됩니다