StudyTDD

[TDD] 05 - AddToDo Component

TDD

저번 시간에 <App /> 컴포넌트의 테스트를 통과했다면, 이제부터 세부적인 컴포넌트 테스트를 진행한다. 컴포넌트 진행은 다음과 같은 2-track 으로 진행한다.

Rendering test

앱이 의도한대로 잘 그려지고 있는가?

저번에 테스트한 것과 크게 다를게 없다. 테스트 코드를 작성 후 Make it fail > Make it green 을 시행한다.

테스트 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// __tests__/AddToDo-test.js
...
import AddToDo from '../src/components/AddToDo';
...
// Rendering Test
describe('Rendering test', () => {
  let wrapper;
  beforeEach(() => {
    // init component each test of rendering component
    wrapper = shallow(<AddToDo />);
  });

  // TextInput
  it('is TextInput visable?', () => {
    expect(wrapper.find('TextInput')).toHaveLength(1);
  });

  // Button
  it('is Button visable?', () => {
    expect(wrapper.find('Button')).toHaveLength(1);
  });
});

Make it green

1
2
3
4
5
6
7
8
9
10
// src/components/AddToDo/index.js
...
const AddToDo = (props) => {
    return (
        <View>
            <TextInput />
            <Button title="Input" />
        </View>
    )
}

Interaction test

컴포넌트 내에서의 interaction 이 의도한대로 진행되는가?

테스트 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// __tests__/AddToDo-test.js
...
import AddToDo from '../src/components/AddToDo';
...
// Interaction test
describe('Interaction test', () => {
  let wrapper;
  let props;
  const text = "some Todo item";

  beforeEach(() => {
    props = {
      onAdded: jest.fn()
    }

    // init component each test of rendering component
    wrapper = shallow(<AddToDo {...props}></AddToDo>);

    // Fill some text for testing
    wrapper.find('TextInput').simulate("changeText", text);

    // then, press button action
    wrapper.find('Button').prop('onPress')();
  });

  it("should call 'onAdded' callback with input text", () => {
    expect(props.onAdded).toHaveBeenCalledTimes(1); // call only 1 time
    expect(props.onAdded).toHaveBeenCalledWith(text); // call with 'text'
  })
});

Make it green

1
2
3
4
5
6
7
8
9
10
11
// src/components/AddToDo/index.js
...
const AddToDo = (props) => {
    const [toDoItem, setToDoItem] = useState('');
    return (
        <View>
            <TextInput onChangeText={text => setToDoItem(text)}/>
            <Button title="Input" onPress={() => props.onAdded(toDoItem)}/>
        </View>
    )
}

오케이 좋아. TDD에 대해서 감이 1도 안 오던 나로부터 조금은 벗어나 리듬을 타는 중이다. 계속 가보자.

글 중간 중간 영어로 작성한 포스팅이나, 주석처리는 어떻게든 영어를 사용해서 익숙해지기 위한 나의 귀여운 노력 쯤으로 봐주시길…

공유하기