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

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

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

Task 수정기능 추가하기

수정기능이 가장 복잡하지만 일단 생각나는 테스트 케이스 추가

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

  describe('Edit Task', () => {
    it('should textInput is visible when edit is clicked', () => {
      const element = wrapper.getByTestId('edit');
      fireEvent.press(element);
      const textInput = wrapper.getByPlaceholderText('Edit Task');
      expect(textInput).toBeTruthy();
    });

  
    it('should textInput is invisible when edit is ended', () => {
      const element = wrapper.getByTestId('edit');
      fireEvent.press(element);
      const textInput = wrapper.getByPlaceholderText('Edit a Task');
      fireEvent.changeText(textInput, 'submit your app to the App Store');
      fireEvent(textInput, 'onSubmitEditing');
      expect(wrapper.queryByPlaceholderText('Edit a Task')).toBeNull();
    });
    it('should call delete method when edit is ended', () => {
      const expectText = 'submit your app to the App Store';
      const element = wrapper.getByTestId('edit');
      fireEvent.press(element);
      const textInput = wrapper.getByPlaceholderText('Edit a Task');
      fireEvent.changeText(textInput, expectText);
      fireEvent(textInput, 'onSubmitEditing');
      expect(props.onUpdateItem).toHaveBeenCalledTimes(1);
    });
   });

간단하게 edit 를 눌렀을 때 Edit Task 라는 placeholder 가 있는 TextInput 를 찾을 수 있는 지 추가

수정완료 하면 TextInput 이 없어졌는지 추가

수정완료 하면 updateItem 메소드가 호출되는 지 추가

TaskItem.jsx 수정 항목

• edit Icon 을 TouchableOpacity 로 감싸주고 testID = 'edit' 부여
• editButton 스타일 생성하여 TouchableOpacity 에 적용
• isEditMode useState 생성
• handleEditItem 메소드에서 setIsEditMode(true) 설정
• TouchableOpacity onPress 에 handleEditItem 이벤트 연결
• isEditMode 일 때 Text 대신 InputText 출력되게 변경
• onUpdateItem props 추가
• handleFinishEdit 함수에서 onUpdateItem 호출

//TaskItem.jsx

...생략...
const TaskItem = ({item, onToggleCheckbox, onDeleteItem, onUpdateItem}) => {
  const [isEditMode, setIsEditMode] = React.useState(false);
  const [newSubject, setNewSubject] = React.useState(item.subject);
  const {subject, done: isDone} = item;

  const handleToggleCheckbox = () => {
    onToggleCheckbox(item);
  };
  const handleDeleteItem = () => {
    onDeleteItem(item);
  };
  const handleEditItem = () => {
    setIsEditMode(true);
  };
  const handleFinishEdit = () => {
    setIsEditMode(false);
    onUpdateItem(item, newSubject);
  };

  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>
      {isEditMode ? (
        <TextInput
          value={newSubject}
          onChangeText={text => setNewSubject(text)}
          onSubmitEditing={handleFinishEdit}
          style={styles.taskInput}
          placeholder="Edit a Task"
        />
      ) : (
        <Text
          style={isDone ? styles.subject.checked : styles.subject.unchecked}>
          {subject}
        </Text>
      )}

      {!isDone && (
        <TouchableOpacity
          style={styles.editButton}
          activeOpacity={0.8}
          onPress={handleEditItem}
          testID="edit">
          <FeatherIcon name="edit-2" size="medium" color="blue" />
        </TouchableOpacity>
      )}
      <TouchableOpacity
        style={styles.deleteButton}
        activeOpacity={0.8}
        onPress={handleDeleteItem}
        testID="delete">
        <FeatherIcon name="delete" size="medium" color="red" />
      </TouchableOpacity>
    </View>
  );
};


...생략...

 

TaskItem-test 가 통과되는 것이 확인되면

TaskList.jsx 도 onUpdateItem props 추가 수정

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

  describe('Edit Task', () => {
    it('should edit first task', () => {
      const expectText = 'submit your app to the App Store';
      const elements = wrapper.getAllByTestId('edit');
      expect(elements.length).toBe(2);
      fireEvent.press(elements[0]);
      const textInput = wrapper.getByPlaceholderText('Edit a Task');
      fireEvent.changeText(textInput, expectText);
      fireEvent(textInput, 'onSubmitEditing');
      expect(wrapper.getByText(expectText)).toBeTruthy();
    });
  });

 

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

//HomeScreen.jsx

...생략...

  const handleUpdateItem = (item, newSubject) => {
    setData(prevData => {
      const newData = [...prevData];
      const index = prevData.indexOf(item);
      newData[index] = {...item, subject: newSubject};
      return newData;
    });
  };

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

 

참고 사이트

https://velog.io/@yyy/React-Native-To-do-list-%EB%A7%8C%EB%93%A4%EA%B8%B0

[React Native] To-do list 만들기(1)

 

 

작업소스공유

https://github.com/skyksit/react-native-todo-app-tdd/tree/v0.8