/
index.html
628 lines (497 loc) · 65.8 KB
/
index.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Test the Web Forward 2014 Docs - Korean by cwdoh</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/main.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<header>
<h1>Test the Web Forward 2014 Docs - Korean</h1>
<p></p>
</header>
<div id="banner">
<span id="logo"></span>
<a href="https://github.com/cwdoh/ttwf-docs" class="button fork"><strong>View On GitHub</strong></a>
<div class="downloads">
<span>Downloads:</span>
<ul>
<li><a href="https://cwdoh.github.io/ttwf-docs/pdf/testharness.js-tutorial-ko.pdf" class="button">PDF</a></li>
</ul>
</div>
</div><!-- end banner -->
<div class="wrapper">
<nav>
<ul></ul>
</nav>
<section>
<h1>
<a name="testharnessjs-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC" class="anchor" href="#testharnessjs-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC"><span class="octicon octicon-link"></span></a>testharness.js 튜토리얼</h1>
<ul>
<li>Updated at 11 Apr. 2014, 16:32 by <a href="mailto:changwook.doh@gmail.com">Chang W. Doh</a>
</li>
</ul><h2>
<a name="%EB%93%A4%EC%96%B4%EA%B0%80%EB%A9%B0" class="anchor" href="#%EB%93%A4%EC%96%B4%EA%B0%80%EB%A9%B0"><span class="octicon octicon-link"></span></a>들어가며</h2>
<p>이 문서는 여러분이 <a href="/docs/github-101.html#clone-the-submodules">GitHub Repository</a>에서 클론(Clone)할 수 있는 W3C의 테스트 프레임워크 <code>testharness.js</code>에 대한 튜토리얼을 제공합니다. 이 튜토리얼에서 여러분이 다른 테스트 프레임워크에 대해 반드시 친숙하다고 가정하고 있지는 않습니다만 자바스크립트 API를 사용하여 테스트를 작성하므로 이에 어느 정도 능숙하시기를 기대합니다.</p>
<p>만약 <a href="http://docs.jquery.com/QUnit">QUnit</a>, <a href="http://visionmedia.github.com/mocha/">Mocha</a>나 <a href="http://pivotal.github.com/jasmine/">Jasmine</a>와 같은 다른 테스트 프레임워크에 친숙하다면 이 튜토리얼에서 상대적으로 쉽게 방법을 찾을 수 있을 것입니다. 사실<code>testharness.js</code>도 이들과 크게 다르지 않습니다만 브라우저의 API 구현에 대한 테스트를 모두 구현하는 방식보다는 <em>자바스크립트로 표현</em>하는데 훨씬 더 적합하게 개발된 많은 기능을 가지고 있습니다.</p>
<h2>
<a name="%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0" class="anchor" href="#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0"><span class="octicon octicon-link"></span></a>시작하기</h2>
<p>다음 코드와 함께 시작해보도록 하죠! 여러분이 <code>testharness.js</code>를 로딩하기 위해 가장 먼저 해야하는 것은 일반적인 방식대로 <code>script</code> 엘리먼트로 이를 포함하는 것입니다. 여러분은 <a href="/docs/github-101.html#clone-the-submodules">자체적으로 복사본을 다운로드</a>하여 원하는 곳에 로컬로 설치를 하거나 만약 W3C 서비스를 위한 테스트를 작성하고 있다면 다음과 같이 W3C 복사본을 사용할 수 있습니다.</p>
<div class="highlight highlight-html"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"/resources/testharness.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/resources/testharnessreport.js"</span><span class="nt">></script></span>
</pre></div>
<p>이쯤에서 자연스럽게 왜 2개의 파일이 존재하는지를 궁금할 것입니다. 이유는 단순합니다. 첫번째 것은 <code>testharness.js</code>의 실제 구현 파일이고 두번째 것은 비어있는 파일입니다. 왜 비어있는 파일을 포함할까요? 특정한 업체가 여러분의 테스트 스윗을 사용할 때 <code>testharnessreport.js</code> 파일에 해당 내용을 덮어씌울 수 있도록 하는 것이 바로 그 목적입니다. 이를 통해 테스트 스윗 실행과 그들이 내부적인 테스트 리포팅 도구와 통합할 수 있습니다.</p>
<p>만약 결과를 자체적인 형식으로 렌더링하고 싶다면 여러분의 테스트에서 결과의 표시 위치에 ID <code>log</code>를 가지는 HTML 엘리먼트를 포함해야 합니다. 이에 대한 예제는 이 문서의 마지막에 있습니다.</p>
<h2>
<a name="%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%B0%A9%EB%B2%95" class="anchor" href="#%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%B0%A9%EB%B2%95"><span class="octicon octicon-link"></span></a>기본적인 테스트 방법</h2>
<p>대다수의 기본적인 사용 방법은 실행하고자 하는 테스트를 위한 함수, 이름 및 추가적인 선택 사항으로 몇가지 옵션을 표현하는 상수 객체를 인자로 받는<code>test()</code> 함수를 사용합니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"True really is true"</span><span class="p">);</span>
</pre></div>
<p>주어진 함수는 <em>반드시</em> 하나 이상의 assertion을 포함하여야 합니다. 반대로 assertion들은 테스트 함수의 문맥에서 한번만 나타납니다. 완전하게 단일한 시험으로 고려된 경우라면 단일 테스트에서 여러개의 assertion을 포함할 수 있습니다. 즉, 실패에 대한 한개의 assertion은 테스트에 대한 실패를 뜻하고 반대로 모든 테스트에 대한 통과가 테스트의 성공의 필요조건이라고 얘기할 수 있습니다. 문서에는 원하는 만큼 많은 테스트들을 포함할 수 있습니다.</p>
<p>아래 예제는 2개의 assertion을 포함하고 있고 둘 다 통과할 것입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="nx">assert_false</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Truth is what you believe it to be"</span><span class="p">);</span>
</pre></div>
<p>그러나 아래 예제에서는 하나가 통과하였음에도 불구하고 다른 하나가 실패하였으므로 테스트 전체가 실패로 보고될 것입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="nx">assert_false</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"All opinions are equally valid."</span><span class="p">);</span>
</pre></div>
<p>함수 및 이름 외에도<code>test()</code>는 또한 옵션들을 설정하기 위한 세번째 매개변수를 받을 수 있습니다. 이 옵션에 대한 대부분이 문서화되어 있는 <a href="#including-metadata">메타데이터 소개</a>을 참조하시기 바랍니다.</p>
<p>옵션을 사용하는 가장 일반적인 사례는 <code>timeout</code>입니다. 이는 밀리초 값(기본값 1000이며 1초와 동일합니다.)를 인자로 받습니다. 만약 테스트 내용이 실행하는데 <code>timeout</code>보다 더 오랜 시간이 걸린다면 테스트는 중단되고 실패로 카운팅됩니다. 어떤 처리들은 실행에 많은 시간이 걸릴 수 있으므로 만약 (초기 모바일 폰과 같은) 낮은 환경에서 복잡한 테스트를 실행할 때는 예시와 같이 타임아웃의 제한을 늘려두는 것이 유용할 것입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="cm">/* 뭔가 더 오래걸리고 느린 것을 여기에서 수행합니다. */</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Long operation is successful"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">timeout</span><span class="o">:</span> <span class="mi">5000</span> <span class="p">});</span>
</pre></div>
<p>다만 비동기 동작의 경우 이를 사용하지 말아야 한다는 것을 주의하여야 합니다. (이 기능은 비동기와는 무관하므로 동작하지 않습니다.)
자세한 사항은 아래 섹션에서 관련 주제에 대한 설명을 보시기 바랍니다.</p>
<h2>
<a name="%ED%8F%AC%ED%95%A8%EB%90%9C-assertion%EB%93%A4" class="anchor" href="#%ED%8F%AC%ED%95%A8%EB%90%9C-assertion%EB%93%A4"><span class="octicon octicon-link"></span></a>포함된 Assertion들</h2>
<p>테스트를 위해 기본적으로 제공되는 훌륭한 assertion들을 사용할 수 있습니다. 대부분은 <code>assert_something(actual, expected, description)</code>의 형식을 취하고 있습니다만 일부는 다른 형태를 취하고 있습니다. 형식 중 일부가 <code>description</code>를 가지고 있다면 이 인자는 선택 사항이며 assertion이 실패에 대한 자세한 설명을 제공하기 위해 사람이 읽기 좋도록 정의된 문자열입니다. 만약 이를 설정하지 않는다면 대신 기본 에러 메시지를 보게 될 것입니다.</p>
<h3>
<a name="assert_trueactual-description" class="anchor" href="#assert_trueactual-description"><span class="octicon octicon-link"></span></a>assert_true(actual, description)</h3>
<ul>
<li>
<code>actual</code>이 <code>1</code>이나 <code>"문자열"</code>와 같은 "truthy"로써 처리되는 것이 아니라 <em>반드시</em> 자바스크립트의 <code>true</code>인지를 <em>엄격하게</em> 확인합니다.
<ul>
<li>
<strong>역주</strong>: <em>truthy는 1, NOT null, true와 같이 조건식에서 참(True)의 의미로써 처리될 수 있는 값을 통칭하는 용어입니다.</em>
</li>
</ul>
</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="s2">"Truth is true"</span><span class="p">);</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="mi">1</span> <span class="o">===</span> <span class="mi">1</span><span class="p">,</span> <span class="s2">"One is really one"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple checks on truth"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_falseactual-description" class="anchor" href="#assert_falseactual-description"><span class="octicon octicon-link"></span></a>assert_false(actual, description)</h3>
<ul>
<li>
<code>assert_true</code>와 동일하지만 반대로 동작합니다.</li>
<li>
<code>actual</code>이 (0이나 null과 같은) "falsy"로써가 아닌 자바스크립트의 <code>false</code>가 되어야 한다는 엄격함을 가지고 있습니다.
<ul>
<li>
<strong>역주</strong>: <em>truthy와는 반대로 falsy는 0, null, undefined, false와 같이 조건식에서 거짓(False)의 의미로써 처리될 수 있는 값을 통칭하는 용어입니다.</em>
</li>
</ul>
</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_false</span><span class="p">(</span><span class="kc">false</span><span class="p">,</span> <span class="s2">"Falsity is false"</span><span class="p">);</span>
<span class="nx">assert_false</span><span class="p">(</span><span class="mi">1</span> <span class="o">===</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">"One is not zero"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple checks on falsity"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_equalsactual-expected-description" class="anchor" href="#assert_equalsactual-expected-description"><span class="octicon octicon-link"></span></a>assert_equals(actual, expected, description)</h3>
<ul>
<li>
<code>actual</code>과 <code>expected</code>가 동일한 값, 좀 더 정확히는 동일 객체인지를 확인합니다.</li>
<li>이를 사용할 때는 아래 사항들을 주의하여야 합니다.
<ul>
<li>이러한 비교는 엄격하게 동작합니다.</li>
<li>자바스크립트에서 제공되는 자동 형변환에는 의존하지 않아야 합니다.</li>
<li>
<em>역주</em>: 이는 자동 형변환에서 발생할 수 있는 정밀도 상실이나 브라우저간의 차이 등에 의해 테스트의 결과값이 달라질 수 있기 때문입니다.</li>
</ul>
</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_equals</span><span class="p">(</span><span class="s2">"dahut"</span><span class="p">,</span> <span class="s2">"da"</span> <span class="o">%</span><span class="mi">2</span><span class="nx">B</span> <span class="s2">"hut"</span><span class="p">,</span> <span class="s2">"String concatenation"</span><span class="p">);</span>
<span class="nx">assert_equals</span><span class="p">(</span><span class="mi">42</span><span class="p">,</span> <span class="mi">6</span> <span class="o">*</span> <span class="mi">7</span><span class="p">,</span> <span class="s2">"The ultimate answer"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple checks on equality"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_not_equalsactual-expected-description" class="anchor" href="#assert_not_equalsactual-expected-description"><span class="octicon octicon-link"></span></a>assert_not_equals(actual, expected, description)</h3>
<ul>
<li>
<code>assert_equals</code>과 동일하지만 반대로 동작합니다.</li>
<li>
<code>actual</code>과 <code>expected</code>가 같지 않아야함을 확인합니다.</li>
<li>비교의 엄격함에 대하여 동일한 규칙이 적용되므로 값이 유사해보여도 여전히 동일하지는 않습니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_not_equals</span><span class="p">(</span><span class="s2">"dahut"</span><span class="p">,</span> <span class="s2">"myth"</span><span class="p">,</span> <span class="s2">"String comparison"</span><span class="p">);</span>
<span class="nx">assert_not_equals</span><span class="p">(</span><span class="mi">42</span><span class="p">,</span> <span class="s2">"42"</span><span class="p">,</span> <span class="s2">"The ultimate answer"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple checks on unequality"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_in_arrayactual-expected-description" class="anchor" href="#assert_in_arrayactual-expected-description"><span class="octicon octicon-link"></span></a>assert_in_array(actual, expected, description)</h3>
<ul>
<li>
<code>actual</code>이 <code>expected</code>에서 전달된 배열인지를 확인합니다.</li>
<li>어떠한 특이한 형태의 배열 멤버도 처리됩니다.</li>
<li>주의사항
<ul>
<li>다중 배열인 경우 배열 내에서 재귀적으로 처리되지 않습니다. 즉, 1차원 배열만 지원됩니다.</li>
</ul>
</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_in_array</span><span class="p">(</span><span class="s2">"dahut"</span><span class="p">,</span>
<span class="s2">"chupacabra dahut unicorn"</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">" "</span><span class="p">),</span>
<span class="s2">"Dahut hunting"</span><span class="p">);</span>
<span class="nx">assert_in_array</span><span class="p">(</span><span class="mi">2017</span><span class="p">,</span> <span class="p">[</span><span class="mi">42</span><span class="p">,</span> <span class="mi">47</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span> <span class="mi">2017</span><span class="p">]</span> <span class="p">,</span> <span class="s2">"Lottery"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple checks on membership"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_array_equalsactual-expected-description" class="anchor" href="#assert_array_equalsactual-expected-description"><span class="octicon octicon-link"></span></a>assert_array_equals(actual, expected, description)</h3>
<ul>
<li>
<code>actual</code>과 <code>expected</code> 모두에 대해 배열을 취합니다.</li>
<li>같은 길이인지와 배열 내의 각 아이템이 다른 배열 내에서 해당되는 멤버와 <code>assert_equals</code>인지를 확인합니다.</li>
<li>이전의 assertion과 동일하게 1차원 배열이어야 합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_array_equals</span><span class="p">([</span><span class="s2">"chupacabra"</span><span class="p">,</span> <span class="s2">"dahut"</span><span class="p">,</span> <span class="s2">"unicorn"</span><span class="p">],</span>
<span class="s2">"chupacabra dahut unicorn"</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">" "</span><span class="p">),</span>
<span class="s2">"Dahut hunting"</span><span class="p">);</span>
<span class="nx">assert_array_equals</span><span class="p">([</span><span class="mi">4</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">16</span><span class="p">],</span>
<span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">x</span><span class="p">;</span> <span class="p">}),</span>
<span class="s2">"Square"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks on identical membership"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_approx_equalsactual-expected-epsilon-description" class="anchor" href="#assert_approx_equalsactual-expected-epsilon-description"><span class="octicon octicon-link"></span></a>assert_approx_equals(actual, expected, epsilon, description)</h3>
<ul>
<li>숫자인 <code>actual</code> 값을 받아 이것이 <code>expected</code>의 <code>epsilon</code>인지를 확인합니다.</li>
<li>이는 여러분이 일어날 수 있는 추이들을 어느정도 알고 있을 경우의 실수 연산들에서 특히 유용하며 결과가 주어진 대략적인 범주에 있는지를 확인하고자 할 때 필요하지만 다른 경우에도 사용이 가능합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_approx_equals</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">,</span> <span class="mf">3.14</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">,</span> <span class="s2">"Roughly circular"</span><span class="p">);</span>
<span class="nx">assert_approx_equals</span><span class="p">(</span><span class="mi">42</span><span class="p">,</span> <span class="mi">47</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">"47 is almost 42"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks on epsilon equality"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_regexp_matchactual-expected-description" class="anchor" href="#assert_regexp_matchactual-expected-description"><span class="octicon octicon-link"></span></a>assert_regexp_match(actual, expected, description)</h3>
<ul>
<li>
<code>actual</code>이 <code>expected</code>의 정규 표현에 정합하는지를 확인합니다.</li>
<li>여러분이 만들고자 하는대로 끝을 간단하거나 복잡하게 할 수 있으며 플래그에 의해 이를 생성할 수 있습니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_regexp_match</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span>
<span class="sr">/^\w{5}-\w{10,12}\.js$/</span><span class="p">,</span>
<span class="s2">"That's my title"</span><span class="p">);</span>
<span class="nx">assert_regexp_match</span><span class="p">(</span><span class="s2">"A"</span><span class="p">,</span> <span class="sr">/a/i</span><span class="p">,</span> <span class="s2">"Matching lowercase"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks using regular expressions"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_own_propertyobject-property_name-description" class="anchor" href="#assert_own_propertyobject-property_name-description"><span class="octicon octicon-link"></span></a>assert_own_property(object, property_name, description)</h3>
<ul>
<li>속성을 가진<code>object</code>가 (프로토타입 체인을 상속받았는지가 아니라) 정말로 이를 가지고 있는지를 확인합니다.</li>
<li>자바스크립트 개발자는 이를 <code>hasOwnProperty</code>가 체크하는 것으로 이해할 것 입니다.</li>
<li>만약 이러한 중요한 메소드에 대해 알고 있지 않으시다면 <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">MDN에서 이에 대해 읽어보시기 바랍니다</a>.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">gollum</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">ring</span><span class="o">:</span> <span class="s2">"MIIIIINE!!!!"</span> <span class="p">};</span>
<span class="nx">assert_own_property</span><span class="p">(</span><span class="nx">gollum</span><span class="p">,</span> <span class="s2">"ring"</span><span class="p">,</span> <span class="s2">"Tricksy hobbitses!"</span><span class="p">);</span>
<span class="cm">/* `gollum`이 `toString`을 가지고 있음에도 불구하고 이는 실패할 것입니다. */</span>
<span class="nx">assert_own_property</span><span class="p">(</span><span class="nx">gollum</span><span class="p">,</span>
<span class="s2">"toString"</span><span class="p">,</span>
<span class="s2">"I have that property, but it'ssss not mine."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for property ownership"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_inheritsobject-property_name-description" class="anchor" href="#assert_inheritsobject-property_name-description"><span class="octicon octicon-link"></span></a>assert_inherits(object, property_name, description)</h3>
<ul>
<li>객체 상에서 속성이 유효한지를 확인하는 것은 <code>assert_own_property</code>와 유사하지만 이를 보완할 수 있도록 상속된 프로토타입 체인 여부가 아니라 객체 자체의 속성이 <em>아닌 경우에</em> assert가 발생합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">gollum</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">ring</span><span class="o">:</span> <span class="s2">"MIIIIINE!!!!"</span> <span class="p">};</span>
<span class="cm">/* this will succeed here */</span>
<span class="nx">assert_inherits</span><span class="p">(</span><span class="nx">gollum</span><span class="p">,</span>
<span class="s2">"toString"</span><span class="p">,</span>
<span class="s2">"I have that property, but it'ssss not mine."</span><span class="p">);</span>
<span class="nx">assert_inherits</span><span class="p">(</span><span class="nx">gollum</span><span class="p">,</span>
<span class="s2">"hasOwnProperty"</span><span class="p">,</span>
<span class="s2">"This one works too."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for property inheritance"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_idl_attributeobject-attribute_name-description" class="anchor" href="#assert_idl_attributeobject-attribute_name-description"><span class="octicon octicon-link"></span></a>assert_idl_attribute(object, attribute_name, description)</h3>
<ul>
<li>
<code>assert_inherits</code>와 동일하며 이를 단순화한 alias입니다. 분명함을 위해 먼저 것을 유지하는 것이 더 나을 것입니다.</li>
</ul><h3>
<a name="assert_readonlyobject-property_name-description" class="anchor" href="#assert_readonlyobject-property_name-description"><span class="octicon octicon-link"></span></a>assert_readonly(object, property_name, description)</h3>
<ul>
<li>주어진 <code>object</code> 상의<code>property_name</code>이 실제로 읽기-전용이고 설정할 수 없는지를 확인합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_readonly</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span> <span class="s2">"nodeType"</span><span class="p">,</span> <span class="s2">"You cannot change nodeType."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for attribute readonlyness"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_throwscode-func-description" class="anchor" href="#assert_throwscode-func-description"><span class="octicon octicon-link"></span></a>assert_throws(code, func, description)</h3>
<ul>
<li>
<code>func</code> 내의 코드가 어떤 예외를 꼭 발생하는지를 알고 있고 여러분이 기대하는 시간과 방식으로 코드가 (예외를) 발생하는지 확인하는 강력한 방법입니다.</li>
<li>이 assertion은 여러분이 <code>code</code>에 무엇을 전달하는지에 따라 다르게 동작합니다.</li>
<li>만약 <code>code</code>가 <code>null</code>이라면 모든 기존 예외가 동작할 것입니다. (다른 것들이 더 유용하므로 이는 특별히 확인할 필요는 없습니다.)</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_throws</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">);</span> <span class="p">},</span>
<span class="s2">"Any exception."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for exceptions (null)"</span><span class="p">);</span>
</pre></div>
<ul>
<li>만약 <code>code</code>가 객체 종류라면 이의 <code>name</code> 속성을 확인합니다. 이 속성은 반드시 발생한 예외의 <code>name</code> 속성과 맞아야 합니다.</li>
<li>즉, 여러분이 특정한 <code>DOException</code> 객체를 여기에 전달할 수 있으며 만약 발생된 예외라면 이와 맞는 객체를 가져야 한다는 것을 의미합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_throws</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Bad Kitten!"</span> <span class="p">},</span>
<span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">throw</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Bad Kitten!"</span><span class="p">};</span> <span class="p">},</span>
<span class="s2">"Any exception with the right name."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for exceptions (object)"</span><span class="p">);</span>
</pre></div>
<ul>
<li>
<code>code</code>가 문자열이라면 이는 일반적으로 <code>DOMException</code> 명칭으로 인식될 수 있는 것 중의 하나여야 하며 <code>func</code>가 만든 연관된 <code>DOMExpception</code>인지가 확인됩니다.</li>
<li>기존 브라우저들과의 호환성을 위해 기존 예외와의 접촉이 지원되며 새로운 명칭으로 매핑됩니다.</li>
<li>따라서 예를들어 여러분이 <code>WrongDocumentError</code>를 의미하는 <code>WRONG_DOCUMENT_ERR</code>을 사용할 수 있습니다.</li>
<li>그렇지만 <code>WrongDocumentError</code> 스타일이 더 적합합니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_throws</span><span class="p">(</span><span class="s2">"HierarchyRequestError"</span><span class="p">,</span>
<span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">);</span> <span class="p">},</span>
<span class="s2">"Specific DOM exception."</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Checks for exceptions (string)"</span><span class="p">);</span>
</pre></div>
<h3>
<a name="assert_unreacheddescription" class="anchor" href="#assert_unreacheddescription"><span class="octicon octicon-link"></span></a>assert_unreached(description)</h3>
<ul>
<li>어떠한 코드가 정말 도달할 수 없는지를 확인하기 위한 역할을 하는 아주 단순한 assertion입니다.</li>
<li>이는 설명(description)만을 인자로 받으며 단순하게 말하자면 이것이 호출될 때마다 항상 짜증스럽게 손을 들어야 하는 일을 집어치울 수 있습니다.</li>
<li>반대로 말하면 여기에서 여러분은 (건드리지도 않았으므로) 성공했다는 경우를 볼 수 있을 것입니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="k">return</span> <span class="s2">"where you came from"</span><span class="p">;</span>
<span class="nx">assert_unreached</span><span class="p">(</span><span class="s2">"Can't Touch This"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Simple check on unreachability"</span><span class="p">);</span>
</pre></div>
<ul>
<li>반면에 이는 코드가 이에 닿을 수 있기 때문에 실패할 것입니다.</li>
</ul><div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_unreached</span><span class="p">(</span><span class="s2">"Reaching where no coder has reached before"</span><span class="p">);</span>
<span class="p">},</span> <span class="s2">"Failed check on unreachability"</span><span class="p">);</span>
</pre></div>
<h2>
<a name="%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%95%98%EA%B8%B0" class="anchor" href="#%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%95%98%EA%B8%B0"><span class="octicon octicon-link"></span></a>비동기 테스트하기</h2>
<p>전체가 동기적으로 처리되는 Web API는 점점 드물어지고 있습니다. 많은 수의 최근 API들이 동작에 약간의 시간이 걸리고 메인 스레드에서 멈추게 할 때마다 이를 비동기적으로 만드는데 많은 주의를 기울이고 있습니다.</p>
<p>고맙게도 <code>testharness.js</code>는 비동기 API를 테스트하는 것은 거의 동기 테스트만큼이나 쉬우며 모든 assertion들을 동일하게 하고 단지 어떻게 테스트를 설정하는지에 대한 몇가지 세밀한 부분들만이 다릅니다. 예제로 setTimeout 동작을 테스트하는 것으로 시작해보겠습니다.</p>
<p>먼저, <code>test(func, name, options)</code>를 호출하는 것 대신에 <code>async_test(name, options)</code>를 호출하며 나중에 우리가 비동기 테스트의 흐름을 제어하기 위해 인터랙션할 객체인 이 함수의 반환값을 유지할 것입니다. 여러분이 보다시피 <code>async_test()</code>가 받는<code>name</code>과 <code>options</code> 인자는 <code>test()</code>에서 사용되었던 인자였던 것과 <code>options</code>는 단지 선택값이라는 것까지 완전히 똑같습니다.</p>
<div class="highlight highlight-js"><pre><span class="kd">var</span> <span class="nx">stTest</span> <span class="o">=</span> <span class="nx">async_test</span><span class="p">(</span><span class="s2">"Testing setTimeout()"</span><span class="p">);</span>
</pre></div>
<p>우리는 assertion을 발생하기 위해 setTimeout 호출와 테스트가 끝났다는 flag를 사용할 것입니다. 이는 타임아웃을 취소하고 만약 assertion이 성공
한다면 (이 케이스는 평범합니다만) 테스트는 통과할 것입니다. 이는 다음과 같은 2가지 동작으로 수행됩니다. 첫번째는 (<code>test()</code>에서 사용된 첫번째 인자와 똑같이) 실행을 위해 개별적인 테스트를 정의하기 위해 사용되는<code>step()</code> 메소드입니다. 두번째는 전체 테스트가 실행되었음을 <code>testharness.js</code>에 알려주기 위해 호출되는 <code>done()</code> 메소드입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">stTest</span><span class="p">.</span><span class="nx">step</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="s2">"Truth is asynchronously true."</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">stTest</span><span class="p">.</span><span class="nx">done</span><span class="p">();</span>
<span class="p">},</span> <span class="mi">10</span><span class="p">);</span>
</pre></div>
<p>이는 가끔 객체의 특정한 <code>onfoo</code> 필드들에 이벤트 핸들러를 지정하는 것이 필요한 비동기 코드의 테스트에서의 경우입니다. 이는 <code>step()</code>으로 완료될 수 있습니다만 <code>step()</code> 호출은 그 자체를 함수 내로 감싸는 것이 필요하기 때문에 다루기가 좀 귀찮습니다. 다음과 같이 정확하고 손쉬운 사용례가 있습니다. <code>step_func</code>. <code>step()</code>과 같은 함수를 받지만 이벤트 핸들러로 바로 사용될 수 있는 함수를 반환합니다. 아래 XHR 예제는 상대적으로 이 편의성을 사용하도록 할 것입니다.</p>
<div class="highlight highlight-js"><pre><span class="kd">var</span> <span class="nx">xhrTest</span> <span class="o">=</span> <span class="nx">async_test</span><span class="p">(</span><span class="s2">"Testing XHR access"</span><span class="p">)</span>
<span class="p">,</span> <span class="nx">xhr</span>
<span class="p">;</span>
<span class="cm">/* this in a step because it could throw */</span>
<span class="nx">xhrTest</span><span class="p">.</span><span class="nx">step</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">"GET"</span><span class="p">,</span> <span class="s2">"using-testharness.html"</span><span class="p">);</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">onreadystatechange</span> <span class="o">=</span> <span class="nx">xhrTest</span><span class="p">.</span><span class="nx">step_func</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">isTrusted</span><span class="p">,</span> <span class="s2">"readystatechange is a trusted event"</span><span class="p">);</span>
<span class="nx">assert_false</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">bubbles</span><span class="p">,</span> <span class="s2">"readystatechange is does not bubble"</span><span class="p">);</span>
<span class="nx">xhrTest</span><span class="p">.</span><span class="nx">done</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">();</span>
<span class="p">});</span>
</pre></div>
<h2>
<a name="%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%91%EB%91%90%EC%82%ACvendor-prefixed%EA%B0%80-%EC%9E%88%EB%8A%94-%EA%B8%B0%EB%8A%A5%EC%9D%98-%ED%85%8C%EC%8A%A4%ED%8A%B8" class="anchor" href="#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%91%EB%91%90%EC%82%ACvendor-prefixed%EA%B0%80-%EC%9E%88%EB%8A%94-%EA%B8%B0%EB%8A%A5%EC%9D%98-%ED%85%8C%EC%8A%A4%ED%8A%B8"><span class="octicon octicon-link"></span></a>브라우저 접두사(vendor-prefixed)가 있는 기능의 테스트</h2>
<p>새로운 기능이 더 이상 브라우저 접두사를 사용한 채로 배포되지 않기를 바라고 있는데도 여전히 테스트가 필요한 기능들이 브라우저 접두사가 있는 채로 존재합니다.</p>
<p>이러한 브라우저 접두사의 충격을 최소화하고 이러한 접두사 없이 테스트 스윗이 쉽게 실행되도록 만들기 위해 접두사가 있는 기능들의 사용과 요구사항을 선언할 수 있는 헌신적인 스크립트를 사용할 수 있습니다.</p>
<p>브라우저 접두사가 있는 기능을 위한 테스트 케이스를 작성하기 위해 다음과 같이 <code>testharness.js</code> 스크립트 <strong>뒤에</strong> 있을 스크립트를 추가해봅시다.</p>
<div class="highlight highlight-html"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"/common/vendor-prefix.js"</span><span class="nt">></script></span>
</pre></div>
<p>이제 여러분은 브라우저 접두사를 사용하는 것이 필요한 기능들을 정의할 필요가 있습니다. 이는 저 스크립트 엘리먼트의 <code>data-prefixed-objects</code>와 <code>data-prefixed-prototypes</code> 속성을 설정하는 것으로 이를 처리할 수 있습니다.</p>
<p>이 두가지 속성은 접두사가 적용될 곳이 어딘지를 기술한 객체들의 배열을 JSON으로 인코딩된 상태로 받아들입니다. 이러한 객체 각각은 다음과 같이 <code>ancestors</code>와 <code>name</code> 속성을 가지고 있습니다. <code>ancestors</code>는 접두사를 가진 기능들이 존재하는 계층을 기술하는 객체 명칭들의 리스트를 포함하고 있으며 접두사가 없는 상태의 이름입니다.</p>
<p>만약 브라우저 접두사가 전역 네임스페이스에서 잘 알고 있는 객체에 적용되었을 경우 <code>data-prefixed-objects</code> 속성을 통해 이를 선언할 수 있습니다. 만약 브라우저 접두사가 잘 알고 있는 인터페이스로부터 초기화된 객체들에 적용되었다면 <code>data-prefixed-prototypes</code> 속성을 통해 이를 선언할 수 있습니다.</p>
<p>예를 들어, <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">Media Capture and Streams API</a> 테스트는 다음과 같이 접두사를 필요로 합니다.</p>
<ul>
<li>
<code>navigator.getUserMedia</code> 메소드는 브라우저 접두사를 가진 상태로 배포되었습니다. (<code>navigator.mozGetUserMedia</code> 와 <code>navigator.webkitGetUserMedia</code>가 그 예시입니다.)</li>
<li>
<code>HTMLMediaElement</code>의 <code>srcObject</code> 속성도 브라우저 접두사를 가진 상태로 배포되었습니다. (<code>vid.mozSrcObject</code>와 같은 것이 예시입니다.)</li>
</ul><p>만약 이러한 기능들이 접두사를 가지고 있지 않고 있는 것처럼 테스트를 작성하는 것을 가능하도록 하기 위해 다음과 같이 아래 스크립트 선언에 한가지를 추가하여야 합니다.</p>
<div class="highlight highlight-html"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"vendor-prefix.js"</span>
<span class="na">data-prefixed-objects =</span><span class="err"> </span><span class="s">'[{"ancestors":["navigator"],</span>
<span class="s"> "name":"getUserMedia"}]'</span>
<span class="na">data-prefixed-prototypes=</span><span class="s">'[{"ancestors":["HTMLMediaElement"],</span>
<span class="s"> "name":"srcObject"}]'</span><span class="nt">></span>
<span class="nt"></script></span>
</pre></div>
<h2>
<a name="%EB%A9%94%ED%83%80%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8F%AC%ED%95%A8%ED%95%98%EA%B8%B0" class="anchor" href="#%EB%A9%94%ED%83%80%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8F%AC%ED%95%A8%ED%95%98%EA%B8%B0"><span class="octicon octicon-link"></span></a>메타데이터 포함하기</h2>
<p>만약 여러분이 <a href="http://w3c-test.org/tools/runner/index.html">W3C Testing Framework</a>내에 포함되기 위한 테스트를 작성 중이라면 (그리고 만약 여러분이 W3C 그룹을 위한 테스트들을 작성하고 있다면 반드시) 이 섹션이 흥미가 있으실 겁니다. 그렇지 않다면 그냥 넘어가셔도 됩니다.</p>
<p>Testing Framework로 통합하는 가장 훌륭한 방법은 여러분의 테스트가 메타데이터를 가지게 하는 것입니다. 만약 HTML 파일 당 단 하나의 테스트를 가진다면 여러분의 테스트 메타데이터는 문서 내의 섹션에 포함되어야 하고 다시 말씀드리지만 여러분은 이 섹션을 넘겨도 괜찮습니다. 그러나 만약 하나의 문서 내에 여러분의 테스트 스윗 전체를 포함하고자 한다면 (물론 이러한 방식으로 테스트 스윗을 구성할 수 있습니다.) 이는 모든 <code>test()</code> 호출마다 테스트 메타데이터를 지정하는 것이 유용합니다.</p>
<p>이는 여러분이 이전에 보았던 <code>test()</code>의 세번째 인자으로써 메타데이터를 제공하는 것으로 매우 쉽게 이를 처리할 수 있습니다. 여기에는 다음과 같이 3가지 필드를 사용할 수 있습니다. <code>help</code>는 이 테스트가 시험되는 규격의 섹션을 지정하며 <code>assert</code>는 여러분의 테스트가 포함하고 있는 assertion 설명들에 대한 배열입니다. 그리고 <code>author</code>는 그냥 테스트의 저작자입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">assert_true</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="s2">"The spec says it's true."</span><span class="p">);</span>
<span class="p">},</span>
<span class="s2">"True is true as per spec"</span><span class="p">,</span>
<span class="p">{</span>
<span class="nx">help</span><span class="o">:</span> <span class="s2">"http://w3.org/TR/some-specification#truth-and-beauty"</span><span class="p">,</span>
<span class="nx">assert</span><span class="o">:</span> <span class="p">[</span><span class="s2">"Truth is true, you know."</span><span class="p">],</span>
<span class="nx">author</span><span class="o">:</span> <span class="s2">"Robin Berjon "</span>
<span class="p">}</span>
<span class="p">);</span>
</pre></div>
<h2>
<a name="%EB%8D%94-%EB%82%98%EC%9D%80-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%A0%9C" class="anchor" href="#%EB%8D%94-%EB%82%98%EC%9D%80-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%A0%9C"><span class="octicon octicon-link"></span></a>더 나은 사용 예제</h2>
<p>대부분의 사용자는 이 섹션을 필요로 하지 않을 것입니다. 만약 동작하지 않는 복잡한 무언가를 처리하고자 하거나 궁금하지만 이것이 자주 필요하지 않을 것이므로 이해가 되지 않는 것처럼 보이더라도 걱정할 필요가 없다면 읽어보시기 바랍니다.</p>
<h3>
<a name="%EB%B3%B5%EC%9E%A1%ED%95%9C-%EC%84%A4%EC%A0%95" class="anchor" href="#%EB%B3%B5%EC%9E%A1%ED%95%9C-%EC%84%A4%EC%A0%95"><span class="octicon octicon-link"></span></a>복잡한 설정</h3>
<p>때로는 테스트가 실행되기 위한 복잡한 설정 동작을 수행하거나 테스트 실행의 전체 동작을 수정하는 것 모두가 중요할 수 있습니다. 이는 <code>setup(func, properties)</code>를 사용하여 처리할 수 있습니다. 인자들은 선택적일 수도 아닐 수도 있으므로 <code>setup(func)</code>나 <code>setup(properties)</code>로 호출될 수도 있습니다.</p>
<p>일단 첫번째 테스트가 실행되고 나면 <code>setup()</code>으로의 모든 호출은 즉시 제거될 것입니다. 따라서 이 섹션의 예제 중의 그 어떤 것도 실제로는 아무것도 하지 않지만 여전히 실제의 값을 보여주는데 유용할 것입니다.</p>
<p>근본적으로 <code>setup()</code>의 함수 내에서 발생하는 모든 것은 (사용되었을 때) <code>setup()</code>의 함수 내에 남아있습니다. 이는 여기서 실패가 대량으로 일어나더라도 테스트가 여전히 실행을 시도하는 것을 가능하게 합니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">setup</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"BOOM!"</span><span class="p">);</span>
<span class="p">});</span>
</pre></div>
<h4>
<a name="properties-%EC%9D%B8%EC%9E%90" class="anchor" href="#properties-%EC%9D%B8%EC%9E%90"><span class="octicon octicon-link"></span></a>properties 인자</h4>
<p><code>properties</code> 인자는 4개의 필드를 받을 수 있는 딕셔너리입니다.</p>
<h5>
<a name="timeout-ms" class="anchor" href="#timeout-ms"><span class="octicon octicon-link"></span></a>timeout: ms</h5>
<p>이는 단일 테스트보다는 페이지 내의 전체 테스트 셋을 위한 타임아웃값을 설정합니다. 개별 테스트들이 자체적인 타임아웃듯 발생하지 않을 지라도 전체 테스트가 느려지는 것을 우려한다면 이를 사용할 수 있습니다.</p>
<div class="highlight highlight-js"><pre><span class="cm">/* time out after 20 seconds */</span>
<span class="nx">setup</span><span class="p">({</span> <span class="nx">timeout</span><span class="o">:</span> <span class="mi">20000</span> <span class="p">});</span>
</pre></div>
<h5>
<a name="explicit_done-true--false" class="anchor" href="#explicit_done-true--false"><span class="octicon octicon-link"></span></a>explicit_done: true | false</h5>
<p>일반적으로 테스트 실행은 document가 load 이벤트를 발생하거나 모든 동기적인 테스트들의 결과값(혹은 타임아웃)을 리포팅하고 만약 비동기 테스트가 있다면 그들이 잘 실행되었는지 혹은 타임아웃이 발생하였을 때 결과값을 리포팅하였을 때 완료되도록 고려되어야 합니다. (그리고 리포트를 생성하는 등) 다시 말해서 일반적인 동작 하에서 시스템은 테스트가 완전하게 실행되고 이를 전달해줄 필요가 없을 때를 어떻게 추정할 수 있는지를 알고 있어야 합니다. 여러분은 예를 들어 비동기적인 로딩이나 새로운 테스트의 생성과 같이 시스템을 혼란시킬 수 있는 무언가를 하고자 할 때 이 동작을 오버라이딩하고자 할 수 있습니다. 이 경우에 해당한다면 <code>explicit_done</code>을 <code>true</code>로 설정하고 실행하고자 하는 모든 테스트가 끝난 것을 인지하였을 때 여러분이 직접 글로벌 함수인 <code>done()</code>을 호출합니다.</p>
<h5>
<a name="explicit_done" class="anchor" href="#explicit_done"><span class="octicon octicon-link"></span></a>explicit_done</h5>
<p>사용하고자 할 때 이를 이벤트 트리거들을 로딩하기 <em>전</em>에 true로 설정하는 것에 주의하는 것이 중요합니다. 아니면 여러분이 원하는대로 동작하는 것이 왜 아무것도 없는지를 확인하는데 놀라울 정도로 많은 시간을 소요하게 될 것입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">setup</span><span class="p">({</span> <span class="nx">explicit_done</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="cm">/* ... at some point later... */</span>
<span class="nx">done</span><span class="p">();</span>
</pre></div>
<h5>
<a name="output_document-document" class="anchor" href="#output_document-document"><span class="octicon octicon-link"></span></a>output_document: Document</h5>
<p>기본적으로 러너(runner)는 테스트 결과를 테스트가 실행 중인 동일 문서 내에 <code>log</code> ID를 가진 엘리먼트 내에 기록할 것입니다. 이는 대부분의 경우에 잘 동작합니다만 몇몇 상황에서는 여러분은 다른 방식으로 실행되기를 원할 수 있습니다. 테스트가 실행되는 문서는 아마 여러분이 테스트의 표시를 보기 위한 커다란 문서를 포함하고 있거나 새로운 팝업이나 새로운 탭을 열고 결과를 그곳에 출력하기를 원할 수 있습니다. 보다 일반적으로는 SVG 문서 내에서 테스트를 실행하고 있을 때 HTML로써 렌더링되지않는 <code>log</code> 엘리먼트의 제공은 약간 괜찮을 수 있습니다. 이 경우 출력을 HTML 문서로 리다이렉션(redirection)하는 것을 원할 것입니다. 이 모든 경우, Document 객체를 <code>output_document</code>로 전달하기만 하면 됩니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">setup</span><span class="p">({</span> <span class="nx">output_document</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">parent</span><span class="p">.</span><span class="nx">contentDocument</span> <span class="p">});</span>
<span class="nx">setup</span><span class="p">({</span> <span class="nx">output_document</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span>
<span class="p">(</span><span class="s2">"someIFrame"</span><span class="p">).</span><span class="nx">contentDocument</span> <span class="p">});</span>
</pre></div>
<h5>
<a name="explicit_timeout-true--false" class="anchor" href="#explicit_timeout-true--false"><span class="octicon octicon-link"></span></a>explicit_timeout: true | false</h5>
<p>몇몇 경우에 모든 타임아웃을 여러분이 직접 다루고 싶지 않습니다. (일반적으로는 여러분의 테스트가 더 큰 테스트 러너의 컨텍스트에서 실행되고 있는 것은 여러분을 대신하여 타임아웃들을 제어하는 것입니다.) 이 경우 간단하게 <code>explicist_timeout</code>을 <code>true</code>로 설정하고 글로벌 함수 <code>timeout()</code>을 직접 호출하여 타임아웃들을 조절할 수도 있습니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">setup</span><span class="p">({</span> <span class="nx">explicit_timeout</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="cm">/* ... at some point later if there really is a time out... */</span>
<span class="nx">timeout</span><span class="p">();</span>
</pre></div>
<h3>
<a name="%ED%8F%AC%EB%A7%B7-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0" class="anchor" href="#%ED%8F%AC%EB%A7%B7-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0"><span class="octicon octicon-link"></span></a>포맷 설정하기</h3>
<p>여러분이 테스트 스윗에서 이슈들을 리포탕하고 싶거나 단순히 개발 도중 무엇을 기록하고 싶을 때마다 <code>toString()</code>이 제공하는 것보다 더 인간-지향적인 결과를 생성하는 것은 매우 가치있는 것일 수 있다는 것은 대부분의 것들에서 제공되는 것과 마찬가지입니다. (여기에는 여러분이 <code>[object Object]</code>에서 추론할 수 있는 것 정도만 있을 뿐입니다.) 이러한 때는 단순하게 전역 함수인 <code>format_value(value)</code>를 사용합니다. 이는 어떻게 (재귀적인 탐색을 통해) 포맷 배열들, 제어 문자들을 가진 문자열들, 음수 0 그리고 이들보다 좀 더 중요한 DOM 노드 타입들을 포함하는 자바스크립트의 핵심 타입들을 알고 있습니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">format_value</span><span class="p">(</span><span class="nb">document</span><span class="p">);</span>
<span class="nx">format_value</span><span class="p">(</span><span class="s2">"foo bar"</span><span class="p">);</span>
<span class="nx">format_value</span><span class="p">([</span><span class="o">-</span><span class="mi">0</span><span class="p">,</span> <span class="kc">Infinity</span><span class="p">]);</span>
</pre></div>
<h2>
<a name="%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0" class="anchor" href="#%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0"><span class="octicon octicon-link"></span></a>테스트 설정하기</h2>
<p>테스트를 작성하는 것은 매우 반복적인 노력일 수 있습니다. 가끔 실제적이고 기대하는 값들의 긴 리스트 상에서 그리고 어떻게 가볍게 만들 수 있을지가 고려되지 않은 테스팅 보일러플레이트의 부하가 뒤덮을 듯 발생했을 때도 여러분은 단순하게 동일한 assertion을 호출할 필요가 있습니다.</p>
<p>여러분이 더 편리하도록 하기 위해, <code>testhharness.js</code>는 동일한 이름으로 각각이 기술되어 있는 실제값 및 기대값의 리스트 상에서 반복적으로 호출할 수 있는 아주 단순한 함수을 제공합니다. 이 함수의 형식은 <code>generate_tests(assert_something, [ [name, actual, expected], ...])</code>입니다.</p>
<div class="highlight highlight-js"><pre><span class="nx">generate_tests</span><span class="p">(</span><span class="nx">assert_equals</span><span class="p">,</span> <span class="p">[</span>
<span class="p">[</span> <span class="s2">"Square of 2"</span><span class="p">,</span> <span class="mi">2</span> <span class="o">*</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span> <span class="p">],</span>
<span class="p">[</span> <span class="s2">"Square of 3"</span><span class="p">,</span> <span class="mi">3</span> <span class="o">*</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">9</span> <span class="p">],</span>
<span class="p">[</span> <span class="s2">"Square of 4"</span><span class="p">,</span> <span class="mi">4</span> <span class="o">*</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">16</span> <span class="p">],</span>
<span class="p">[</span> <span class="s2">"Square of 5"</span><span class="p">,</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">25</span> <span class="p">],</span>
<span class="p">[</span> <span class="s2">"Square of 6"</span><span class="p">,</span> <span class="mi">6</span> <span class="o">*</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">36</span> <span class="p">]</span>
<span class="p">]</span>
<span class="p">);</span>
</pre></div>
<h2>
<a name="%EC%BD%9C%EB%B0%B1%EB%93%A4" class="anchor" href="#%EC%BD%9C%EB%B0%B1%EB%93%A4"><span class="octicon octicon-link"></span></a>콜백들</h2>
<p>가끔 내부 동작에 반응하고 여러분만의 동작을 구축할 수 있도록 test harness 내에서 무엇이 어떻게 되고 있는지를 알 수 있다면 유용할 것입니다. (여러분만의 리포트 생성 혹은 여러분이 사용 중인 더 커다란 테스트 시스템과의 통합이 그 예입니다.)</p>
<p>이를 위해 <code>testharness.js</code>는 여러분이 원한다면 알림을 설정할 수 있는 이벤트의 셋(Set)을 제공합니다. 만약 동일한 컨텍스트 내에서 테스트가 실행되고 있으며 이들이 시작 되기 전에 코드를 실행할 수 있다면 단순하게 몇가지 콜백들을 등록하는 것이 이러한 이벤트들을 인지할 수 있는 첫번째 방법입니다.
만약 테스트가 그 자체의 iframe (혹은 object 엘리먼트) 내에서 실행 중이라면 불려질 특정한 이름을 가진 함수의 생성에 의한 (어떠한 수준이던지) 여러분의 컨텍스트인 문서 안에 포함하는 것이 2번째 방법입니다. (후자의 접근 방법은 origin boundary 간에는 호출이 발생하지 않는다는 것을 주의하시기 바랍니다.)</p>
<h3>
<a name="start" class="anchor" href="#start"><span class="octicon octicon-link"></span></a>start</h3>
<p>설정이 이루어지고 첫번째 테스트가 생성되었을 때. 이는 여러분만의 설정을 수행할 수 있는 래퍼(wrapper)의 위치입니다.</p>
<div class="highlight highlight-js"><pre><span class="cm">/* in same context */</span>
<span class="nx">add_start_callback</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"The tests have started running."</span><span class="p">);</span>
<span class="p">});</span>
<span class="cm">/* in enclosing context */</span>
<span class="kd">function</span> <span class="nx">start_callback</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"The tests have started running."</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
<h3>
<a name="result" class="anchor" href="#result"><span class="octicon octicon-link"></span></a>result</h3>
<p>결과가 생성되었을 때마다 발생합니다. 이는 동일 객체 상에서 존재하는 <code>PASS</code>, <code>FAIL</code>, <code>TIMEOUT</code> 혹은 <code>NOTRUN</code> 필드들(이들은 테스트가 성공, 실패, 타임 아웃 혹은 아예 실행되지 않았는지를 의미합니다.)과 비교할 수 있는<code>status</code> 필드와 어떠한 에러라도 발생하면 이에 대한 에러 메세지를 제공하는 <code>message</code> 필드를 가진 <code>Test</code> 객체를 받습니다. </p>
<div class="highlight highlight-js"><pre><span class="cm">/* in same context */</span>
<span class="nx">add_result_callback</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Result received"</span><span class="p">,</span> <span class="nx">res</span><span class="p">);</span>
<span class="p">});</span>
<span class="cm">/* in enclosing context */</span>
<span class="kd">function</span> <span class="nx">result_callback</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Result received"</span><span class="p">,</span> <span class="nx">res</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
<h3>
<a name="complete" class="anchor" href="#complete"><span class="octicon octicon-link"></span></a>complete</h3>
<p>테스트가 종료되었을 때 발생합니다. (성공이던 실패던). 이는 모든 결과들과 관련되어 있는 <code>result</code>에 전달된 것과 같은 <code>Test</code> 객체들의 배열과 전체 실행의 상태를 기술하며 동일 객체 상에 존재하는 <code>OK</code>, <code>ERROR</code> 그리고 <code>TIMEOUT</code> 필드들(스윗이 완전하게 성공했는지 실패했는지 아니면 타임아웃이 발생했는지를 의미합니다.)과 비교할 수 있는 <code>status</code> 필드를 가진 상태 객체를 받습니다.</p>
<div class="highlight highlight-js"><pre><span class="cm">/* in same context */</span>
<span class="nx">add_completion_callback</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">allRes</span><span class="p">,</span> <span class="nx">status</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Test run completed"</span><span class="p">,</span> <span class="nx">allRes</span><span class="p">,</span> <span class="nx">status</span><span class="p">);</span>
<span class="p">});</span>
<span class="cm">/* in enclosing context */</span>
<span class="kd">function</span> <span class="nx">completion_callback</span> <span class="p">(</span><span class="nx">allRes</span><span class="p">,</span> <span class="nx">status</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Test run completed"</span><span class="p">,</span> <span class="nx">allRes</span><span class="p">,</span> <span class="nx">status</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</section>
<footer>
<p>Project maintained by <a href="https://github.com/cwdoh">cwdoh</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://twitter.com/michigangraham">mattgraham</a></small></p>
</footer>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-40929587-5");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>