2022.08.12 - [IT/React] - 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개인데 삭제 버튼 누르면 삭제됩니다
'IT > React' 카테고리의 다른 글
RN(ReactNative) SafeAreaProvider Jest 적용법 (0) | 2022.08.22 |
---|---|
RN(ReactNative) TDD TODO 앱 디버깅하기 (0) | 2022.08.16 |
RN(ReactNative) 디버거 설정하기 (0) | 2022.08.16 |
RN(ReactNative) TDD TODO 앱 만들기 #8 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #6 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #5 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #4 (0) | 2022.08.11 |
RN(ReactNative) TDD TODO 앱 만들기 #3 (0) | 2022.08.10 |