계약 테스트는 서비스 사이에서 필드 이름, 타입, 상태 코드 같은 약속이 유지되는지 확인합니다. 제공자와 소비자가 따로 배포되어도 호환 여부를 빠르게 볼 수 있습니다.
데모는 소비자가 요구한 필드와 제공자 응답을 겹쳐 맞거나 빠진 곳을 표시합니다. 계약 통과가 전체 사용자 흐름의 성공을 보장하지는 않으므로 중요한 여정은 별도로 확인합니다.
언제 쓰나
마이크로서비스나 외부 API의 제공자·소비자 변경을 독립 배포할 때 사용합니다.
계약 테스트
Contract testing
서비스를 쓰는 쪽의 기대와 제공하는 쪽의 응답이 맞는지 검사합니다.
···
<div class="stage"><div class="title">CONTRACT TEST</div><div class="canvas"><div class="contract"><div class="box"><b>CONSUMER</b><span>id: number</span><span>name: text</span></div><div class="join" id="join">⇄</div><div class="box"><b>PROVIDER</b><span>id: 42</span><span id="field">name: Ada</span></div></div><div id="status" class="status">fields match</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(9px,3vmin,18px)}.contract{display:flex;align-items:center;gap:clamp(4px,3vmin,25px);width:100%;justify-content:center}.contract .box{display:flex;flex-direction:column;gap:5px;width:37%;max-width:220px;text-align:left}.contract b{color:var(--accent);font-size:1em}.contract span{font-family:ui-monospace,monospace}.join{font-size:1.8em;color:var(--accent)}.status{color:var(--accent)}.missing{opacity:.2;text-decoration:line-through}let match=true;function compare(){match=!match;document.getElementById('field').classList.toggle('missing',!match);document.getElementById('status').textContent=match?'fields match':'missing: name';document.getElementById('join').textContent=match?'⇄':'×'}compare();setInterval(compare,1500)