Skip to content

Commit

Permalink
[doc] 백틱을 쌍따옴표로 변경
Browse files Browse the repository at this point in the history
인라인 코드에만 백틱을 사용하고 다른 곳에선 쌍따옴표로 변경
  • Loading branch information
dngwoodo committed Sep 5, 2021
1 parent a6ad272 commit 4303d6e
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions docs/testing/tutorial-todo-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -156,9 +156,9 @@ package.json에 `test:unit` 스크립트에 `--watchAll` 옵션을 추가해주
2. UI 구현 - 테스트 코드 작성

UI 구현 코드에서 작성해야 되는 테스트 코드는 다음과 같습니다.
- `할 일 작성`이라는 텍스트가 화면에 출력됩니다.
- "할 일 작성"이라는 텍스트가 화면에 출력됩니다.
- 할 일을 작성할 수 있는 인풋 태그가 화면에 출력됩니다.
- `추가하기`라는 버튼이 화면에 출력됩니다.
- "추가하기"라는 버튼이 화면에 출력됩니다.

한 가지 알아두셔야 할 것은 테스트 코드는 작성하는 사람에 따라 얼마든지 달라질 수 있습니다. 테스트 코드를 얼마나 세세하게 작성하냐에 따라서 코드의 안전성이 달라집니다. 즉, 테스트 코드를 작성한다고 해서 모든 에러를 방지할 수 있는 게 아닙니다. 그러므로 학습하실 때는 조금이라도 더 세세하게 테스트를 작성해보시는 걸 권장해 드립니다.

Expand Down Expand Up @@ -212,7 +212,7 @@ it("connects label and input", () => {

이런 식으로 학습하시면서 아쉬운 부분들이 생긴다면 테스트를 추가해보세요.

그리고 위의 테스트 코드에서 `describe`, `it`의 첫 번째 인수를 합쳐보면 `App renders label, input`, `App renders button`으로 문장이 만들어지는 것을 보실 수 있습니다. `render``App`이 단수이기 때문에 뒤에 s를 붙여서 `renders`로 작성하는 겁니다. 이런 식으로 문법에 맞게 작성해주세요. 그리고 테스트 코드를 작성하실 때는 항상 `말이 되게` 작성하시는 것을 권장해 드립니다. 이렇게 작성하시게 되면 테스트를 실행했을 때도 아래와 같이 수월하게 읽으실 수 있습니다.
그리고 위의 테스트 코드에서 `describe`, `it`의 첫 번째 인수를 합쳐보면 "App renders label, input", "App renders button"으로 문장이 만들어지는 것을 보실 수 있습니다. "render""App"이 단수이기 때문에 뒤에 s를 붙여서 "renders"로 작성하는 겁니다. 이런 식으로 문법에 맞게 작성해주세요. 그리고 테스트 코드를 작성하실 때는 항상 **말이 되게** 작성하시는 것을 권장해 드립니다. 이렇게 작성하시게 되면 테스트를 실행했을 때도 아래와 같이 수월하게 읽으실 수 있습니다.
```bash
PASS src/App.test.js
App
Expand Down Expand Up @@ -280,10 +280,10 @@ v-model을 사용하지 않은 이유는 현재 시점에서는 IME 입력(한
});
```

vue-test-utils 라이브러리에선 `input`이벤트를 `trigger` `event.target.value`를 직접적으로 변경할 수 없습니다. 그래서 `input``value`값을 변경한 뒤 `input`이벤트를 `trigger`해야 합니다. `input`이벤트를 `trigger`하면 `handleInput`함수가 실행되고 `data``text`값이 변경됐는지 테스트합니다. 그리고 이벤트 트리거는 비동기로 동작하기 때문에 `async, await`문법을 사용하여 실행 순서를 보장해주어야 합니다.
vue-test-utils 라이브러리에선 input이벤트를 trigger시 `event.target.value`를 직접적으로 변경할 수 없습니다. 그래서 input의 value값을 변경한 뒤 input이벤트를 trigger해야 합니다. input이벤트를 trigger하면 `handleInput`함수가 실행되고 `data``text`값이 변경됐는지 테스트합니다. 그리고 이벤트 트리거는 비동기로 동작하기 때문에 `async, await`문법을 사용하여 실행 순서를 보장해주어야 합니다.
<br />

5. 기능 구현 - `추가하기` 버튼을 누르면 할 일 추가
5. 기능 구현 - "추가하기" 버튼을 누르면 할 일 추가
```html{15,18-22,31,32,39-50}
<!-- src/App.vue -->
<template>
Expand Down Expand Up @@ -340,7 +340,7 @@ export default {
```
<br />

1. 기능 구현 - 테스트 코드 작성
6. 기능 구현 - 테스트 코드 작성
```js
// src/App.test.js
it("adds todo when listens '추가하기' click event", async () => {
Expand All @@ -353,4 +353,4 @@ it("adds todo when listens '추가하기' click event", async () => {
});
```

인풋 태그에 할 일을 타이핑하고 `추가하기` 버튼이 클릭 됐을 때 타이핑한 할 일이 화면에 출력 되는지 테스트합니다.
인풋 태그에 할 일을 타이핑하고 "추가하기" 버튼이 클릭 됐을 때 타이핑한 할 일이 화면에 출력 되는지 테스트합니다.

0 comments on commit 4303d6e

Please sign in to comment.