2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4
TaskList 에 있는 체크박스 클릭시에 해당 Task 가 완료 되도록 기능 추가 합시다
TaskItem 에 체크박스 클릭 기능 추가
TaskItem-test.js 에 체크박스 아이콘을 클릭하면 이벤트가 호출되는지 테스트 케이스를 추가합니다
//TaskItem-test.js
...생략...
describe('TaskItem interaction', () => {
beforeEach(() => {
props = {
key: '1',
data: {id: '1', subject: 'Learn React Native', done: false},
onToggleCheckbox: jest.fn(),
};
wrapper = render(<TaskItem {...props} />);
});
afterEach(cleanup);
it('should call toggle method when checkbox is clicked', () => {
const element = wrapper.getByTestId('checkbox');
fireEvent(element, 'pressOut');
expect(props.onToggleCheckbox).toHaveBeenCalledTimes(1);
});
});
바뀐 점은
data 에 done 이라는 task 의 완료 여부를 판단하는 항목이 추가되었고
onToggleCheckbox 라는 이벤트를 jest mocking 함수로 추가
checkbox 라는 testId 를 이용해서 element 를 가져오고 OnPressOut 이벤트를 발생시키고
props 의 onToggleCheckbox 함수가 1번 실행되는 지 확인합니다
TaskItem 기능 추가
//TaskItem.jsx 수정
...생략...
const TaskItem = ({data, onToggleCheckbox}) => {
const {subject} = data;
const handleToggleCheckbox = () => {
onToggleCheckbox(data);
};
return (
<View style={styles.taskItem}>
<TouchableOpacity onPressOut={handleToggleCheckbox} testID="checkbox">
<FeatherIcon name="square" size="small" color="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>
);
};
...생략...
점점 코드가 길어지고 있어서 앞뒤는 생략 했습니다.
Vector Icon 을 클릭하기 위해서 TouchableOpacity 로 감싸주고 거기에 onPressOut 이벤트를 매핑했습니다 (onPress 도 상관없어요)
ReactNative 공식 문서 보면 onPressIn -> onPressOut -> onPress 순서로 호출이 됩니다
Button 은 안드로이드와 iOS 에서 다르게 보이기 때문에 TouchableOpacity 를 사용한다고 합니다.
여기서는 이미지 아이콘을 클릭할 수 있게 해서 버튼으로 사용하려고 쓰고 있습니다
처음에 Icon 에 testID 를 붙였는데 테스트 코드에서 element 를 가져오면 버튼만 와서 TouchableOpacity 로 testID 를 옮겼습니다
코드 짰으면 무조건 테스트
랜더링도 잘되고
테스트도 잘되고
소스를 아무리 마구마구 수정해도
테스트 케이스가 많이 쌓일 수록 제대로 수정되고 있는지 확인할 수 있어서 좋네요
TaskList 테스트 케이스에 사용하는 임시 데이터에도 done 항목 추가해주고
onToggleCheckbox 이벤트를 어떻게 TaskList-test.js 에 적용해야 할지 감이 안와서 skip 하고
바로 TaskList.jsx 에 onToggleCheckbox 이벤트를 추가
import React from 'react';
import {ScrollView} from 'react-native';
import TaskItem from './TaskItem';
const TaskList = props => {
const {data, onToggleCheckbox} = props;
return (
<ScrollView>
{data.map(item => (
<TaskItem
key={item.id}
data={item}
onToggleCheckbox={onToggleCheckbox}
/>
))}
</ScrollView>
);
};
export default TaskList;
내가 어디까지 수정했는지 모르겠다 싶으면
테스트 실행으로 통과되는 지 확인...
이제 HomeScreen-test.jsx 에 체크박스 클릭시 체크박스 이미지가 변경되는 지 테스트 케이스 추가
???? 이미지 변경을 어떻게 잡아내야 하는 거지에 대한 고민 중이네요
텍스트 위주의 테스트 케이스밖에 없어서 혼자 고민 중입니다
//HomeScreen-test.js
...생략...
it('should toggle status when checkbox is clicked', async () => {
const elements = wrapper.getAllByTestId('checkbox');
expect(elements.length).toBe(2);
fireEvent(elements[0], 'onPressOut');
//여기에 이미지 아이콘을 판별하는 expect를 추가해야 합니다
//TODO : expect (변경된 이미지 아이콘)
});
HomeScreen.jsx 에 handleToggleItem 이벤트 추가
const handleToggleItem = item => {
setData(prevData => {
const newData = [...prevData];
const index = prevData.indexOf(item);
newData[index] = {...item, done: !item.done};
console.log(JSON.stringify(newData));
return newData;
});
};
return (
<>
<Title title="Todo TDD" />
<TaskInput
value={newTask}
onChangeText={handleInputTextChange}
onSubmitEditing={handleAddTask}
/>
<TaskList data={data} onToggleCheckbox={handleToggleItem} />
</>
);
일단 아이콘을 처리 못해서 checkbox 아이콘 클릭시에 done 데이터가 제대로 바뀌는 지 확인하기 위해서
console.log 를 찍었네요 ㅠㅠ TDD 의 길은 너무 어렵네요.
TODO : 체크박스 아이콘 이미지를 done : true, false 에 따라서 바꿔보자
이건 또 무슨 경고인가 warn : Animated
console.warn
Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. Make sure to run `bundle exec pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
해결방법
jest mocking 에서 Animated 안된다 하니 jest 에서 해당 warning 을 무시하게 세팅한다
//jest.setup.js 추가
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
package.json 의 jest 설정에 setupFile 추가
자꾸만 길어져 가는 package.json 과 설정파일들
"jest": {
"preset": "react-native",
"setupFiles": [
"<rootDir>/jest.setup.js"
],
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
],
"transformIgnorePatterns": [
"node_modules/(?!(@react-native|react-native|react-native-vector-icons)/).*/"
],
"transform": {
"^.+\\.jsx$": "babel-jest"
}
}
'IT > React' 카테고리의 다른 글
RN(ReactNative) 디버거 설정하기 (0) | 2022.08.16 |
---|---|
RN(ReactNative) TDD TODO 앱 만들기 #8 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #7 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #6 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #4 (0) | 2022.08.11 |
RN(ReactNative) TDD TODO 앱 만들기 #3 (0) | 2022.08.10 |
RN(ReactNative) TDD TODO 앱 만들기 #2 (0) | 2022.08.10 |
RN(ReactNative) 앱 이름 변경하기 change app name (0) | 2022.08.09 |