Integration test

통합 테스트

Check that connected modules exchange requests and data correctly across their boundaries.

···
html
<div class="stage"><div class="title">INTEGRATION TEST</div><div class="canvas"><div class="nodes"><div class="box" id="a">REQUEST</div><div class="wire"><i id="pulse"></i></div><div class="box" id="b">API</div><div class="wire"><i></i></div><div class="box" id="c">STORE</div></div><div class="receipt" id="receipt">201 · saved value read back</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,4vmin,30px)}.nodes{display:flex;align-items:center;width:100%;max-width:650px}.nodes .box{flex:1}.wire{position:relative;flex:.35;height:2px;background:var(--line)}.wire i{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent);animation:travel 2.4s infinite}.wire:nth-of-type(4) i{animation-delay:.6s}@keyframes travel{0%{left:0;opacity:0}20%{opacity:1}75%{left:100%;opacity:1}100%{left:100%;opacity:0}}.nodes .box{animation:glow 2.4s infinite}.nodes #b{animation-delay:.6s}.nodes #c{animation-delay:1.2s}@keyframes glow{0%,70%{border-color:var(--line)}20%,45%{border-color:var(--accent);color:var(--accent)}}.receipt{color:var(--accent);text-align:center}

Integration tests catch failures that appear when individually correct parts are connected. A request that writes and reads through an API checks both the contract and the wiring.

The demo sends a request through an API to storage and back. Define which dependencies are real, and isolate and clean up test data.

When to use

Use it where connections among APIs, databases, queues, or other components matter.

Open as page ↗