Unit test

단위 테스트

Give one function or small module an input and compare its result with an expected value.

···
html
<div class="stage"><div class="title">UNIT TEST</div><div class="canvas"><div class="flow"><div class="box" id="input">input 2</div><span>→</span><div class="box">double()</div><span>→</span><div class="box" id="actual">actual 4</div></div><div class="expect" id="expect">expected 4 · PASS</div></div></div>
css
.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(12px,3vmin,22px)}.flow{display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.5vmin,13px);width:100%}.flow .box{min-width:0;flex:1;max-width:145px}.flow span{color:var(--accent)}.expect{color:var(--accent);border-bottom:3px solid var(--accent);padding-bottom:4px;text-align:center}
js
const cases=[[2,4],[5,10],[-1,-2]];let n=0;function run(){const [x,y]=cases[n++%cases.length];document.getElementById('input').textContent='input '+x;document.getElementById('actual').textContent='actual '+(x*2);document.getElementById('expect').textContent='expected '+y+' · PASS';document.getElementById('actual').classList.remove('active');setTimeout(()=>document.getElementById('actual').classList.add('active'),350)}run();setInterval(run,1700)

A unit test checks a small behavior with as little surrounding system as practical. Explicit inputs and expected outputs make a broken rule easy to locate.

The demo feeds values into a function and compares the result with the expectation. Prefer observable behavior over implementation details so harmless refactors do not break tests.

When to use

Use it to check calculations, transformations, and validation rules quickly and repeatedly.

Open as page ↗