Post List

2016년 10월 27일 목요일

Walmart Electrode #06 Test Components

Components에 대한 개발 테스트

WalmartLabs 에서는 대용량, 고성능 코드를 구현하는데 있어 중요한 포인트로 테스트를 강조하고 있다.

이 테스트 방법은 Component와 Application 레벨에서 단위별 테스트를 포함하고 있다.

그리고 구현한 Component들을 위해, Mocha 를 사용하고, 자바스크립트 테스트 프레임워크 는 비동기 테스트에 대하여 완벽하게 수행한다. Enzyme을 같이 사용하고,airbnb 의 React를 위한 테스트 유틸리티이다.



이제 테스트를 위하여 아래와 같이 입력을 하고 확인해 보자.

>
[binrang@binrang br-elec-component]$ gulp check
[10:12:12] Using gulpfile ~/br-electrode-component/br-elec-component/gulpfile.js
[10:12:12] Starting 'check'...
[10:12:12] Starting 'check-dep'...
Check dependencies passed
[10:12:12] Finished 'check-dep' after 234 ms
[10:12:12] Starting 'lint'...
[10:12:12] Starting 'lint-react-demo'...
[10:12:14] Finished 'lint-react-demo' after 1.88 s
[10:12:14] Starting 'lint-react-src'...
[10:12:16] Finished 'lint-react-src' after 1.2 s
[10:12:16] Starting 'lint-react-test'...
[10:12:17] Finished 'lint-react-test' after 1.02 s
[10:12:17] Starting 'lint-scripts'...
[10:12:17] Finished 'lint-scripts' after 541 ms
[10:12:17] Finished 'lint' after 4.64 s
[10:12:17] Starting 'test-cov'...
[10:12:17] Starting 'test-frontend-cov'...
27 10 2016 10:12:29.627:INFO [karma]: Karma v0.13.22 server started at http://localhost:8080/
27 10 2016 10:12:29.644:INFO [launcher]: Starting browser PhantomJS
27 10 2016 10:12:30.447:INFO [PhantomJS 1.9.8 (Linux 0.0.0)]: Connected on socket ultnJyj7IBpsv-3zAAAA with id 83599358
  components/br-elec-component
    Mounting
      ✓ should render into the document
PhantomJS 1.9.8 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.055 secs / 0.007 secs)
TOTAL: 1 SUCCESS
-------------------------------|----------|----------|----------|----------|----------------|
File                           |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-------------------------------|----------|----------|----------|----------|----------------|
 src/                          |      100 |      100 |      100 |      100 |                |
  index.js                     |      100 |      100 |      100 |      100 |                |
 src/components/               |     69.7 |       50 |    43.48 |    57.89 |                |
  br-elec-component.jsx        |       86 |       70 |    57.14 |    76.92 |... 23,30,54,56 |
  guest-list.jsx               |     62.5 |      100 |       20 |    55.56 |      7,8,14,22 |
  render-friend.jsx            |    48.48 |       20 |       25 |    36.36 |... 29,30,31,40 |
 src/helpers/                  |    46.15 |    28.57 |       25 |    31.25 |                |
  graph-styles.js              |    46.15 |    28.57 |       25 |    31.25 |... 34,38,42,54 |
 src/lang/                     |      100 |      100 |      100 |      100 |                |
  default-messages.js          |      100 |      100 |      100 |      100 |                |
 src/lang/tenants/asda/        |      100 |      100 |      100 |      100 |                |
  default-messages.js          |      100 |      100 |      100 |      100 |                |
 src/lang/tenants/electrodeio/ |      100 |      100 |      100 |      100 |                |
  default-messages.js          |      100 |      100 |      100 |      100 |                |
 src/lang/tenants/samsclub/    |      100 |      100 |      100 |      100 |                |
  default-messages.js          |      100 |      100 |      100 |      100 |                |
 src/lang/tenants/walmart/     |      100 |      100 |      100 |      100 |                |
  default-messages.js          |      100 |      100 |      100 |      100 |                |
-------------------------------|----------|----------|----------|----------|----------------|
All files                      |    72.67 |    51.52 |       50 |    63.16 |                |
-------------------------------|----------|----------|----------|----------|----------------|
[10:12:31] Finished 'test-frontend-cov' after 14 s
[10:12:31] Finished 'test-cov' after 14 s
[10:12:31] Finished 'check' after 19 s
[binrang@binrang br-elec-component]$

눈에 들어온 것은 일단 Karma 라는 테스트 툴과 PhantomJS 를 사용하고 있는 것이 보인다.
이들을 이용하여 테스트 주도 방식의 개발을 진행하는 듯...

참조 URL : test_components.html