Replace a dependency with a controlled stand-in to reproduce specific responses and failures.
<div class="stage"><div class="title">MOCKING</div><div class="canvas"><div class="mockflow"><div class="box">APP</div><div class="branch"><div class="line live" id="live">live API</div><div class="line fake" id="fake">mock 200</div></div><div class="box" id="response">response</div></div><div class="hint" id="hint">using live API</div></div></div>.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,26px)}.mockflow{display:flex;align-items:center;gap:clamp(8px,4vmin,32px)}.mockflow .box{min-width:clamp(55px,15vmin,100px)}.branch{display:flex;flex-direction:column;gap:6px}.line{padding:5px 8px;border-left:3px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s}.line.on{border-color:var(--accent);color:var(--accent)}.hint{color:var(--accent)}let mock=false;function swap(){mock=!mock;document.getElementById('live').classList.toggle('on',!mock);document.getElementById('fake').classList.toggle('on',mock);document.getElementById('response').textContent=mock?'200 · fixed':'variable';document.getElementById('hint').textContent=mock?'using controlled reply':'using live API'}swap();setInterval(swap,1500)Mocking lets a test control responses from dependencies such as a network API or payment service. It makes success and failure cases quick to reproduce.
The demo switches an app’s connection from a service to a stand-in response. A mock can drift from the real contract, so integration tests should cover that boundary too.
Use it to reproduce external failures, latency, or rare responses reliably.