테스트 픽스처는 계정, 데이터, 서버 연결 등 테스트에 필요한 출발 상태입니다. 모든 테스트가 같은 전제를 공유하면 결과를 재현하기 쉽습니다.
데모는 준비, 검증, 정리 단계에서 데이터 카드가 생성되고 사라지는 모습을 보여줍니다. 테스트끼리 상태를 공유하면 실행 순서에 따라 결과가 달라질 수 있으므로 격리합니다.
언제 쓰나
DB 데이터나 브라우저 세션처럼 실행 전후 처리가 필요한 테스트에 사용합니다.
테스트 픽스처
Test fixture
테스트가 시작할 조건을 만들고 끝난 뒤 사용한 자원을 정리합니다.
···
<div class="stage"><div class="title">TEST FIXTURE</div><div class="canvas"><div class="phases"><span id="p0">SETUP</span><span id="p1">TEST</span><span id="p2">CLEANUP</span></div><div class="record" id="record">record #42</div><div class="note" id="note">create known state</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,22px)}.phases{width:100%;max-width:620px;display:flex;gap:5px}.phases span{flex:1;text-align:center;padding:6px 2px;border:1px solid var(--line);border-radius:6px}.phases .active{border-color:var(--accent)}.record{border:2px solid var(--accent);border-radius:8px;padding:clamp(8px,3vmin,20px);color:var(--accent);transition:opacity .3s,transform .3s}.record.gone{opacity:.15;transform:scale(.8)}.note{color:var(--muted)}let n=0;function tick(){const s=n++%3;[0,1,2].forEach(i=>document.getElementById('p'+i).classList.toggle('active',i===s));document.getElementById('record').classList.toggle('gone',s===2);document.getElementById('note').textContent=['create known state','assert saved value','remove record'][s]}tick();setInterval(tick,1050)