revise October 2022 UI tests articles

web/public/assets/editorial/2022/ui-tests-2022-diagnosis-rollback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="580" viewBox="0 0 960 580" role="img" aria-labelledby="title desc"><title id="title">Диагностика flaky UI-проверки и rollback</title><desc id="desc">Маршрут заменяет произвольную паузу на состояние, проверку request id, ветки acknowledgement и recovery, затем rollback.</desc><rect width="960" height="580" fill="#111827"/><style>text{font-family:Arial,sans-serif;fill:#f1f5f9}.h{font-size:32px;font-weight:700}.s{font-size:25px}.b{fill:#1f2937;stroke:#64748b;stroke-width:2}.y{fill:#453516;stroke:#fbbf24;stroke-width:2}.g{fill:#163b32;stroke:#34d399;stroke-width:2}.r{fill:#48212d;stroke:#fb7185;stroke-width:2}.l{stroke:#cbd5e1;stroke-width:3;marker-end:url(#a)}</style><defs><marker id="a" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0L0 6L9 3z" fill="#cbd5e1"/></marker></defs><text x="48" y="57" class="h">Диагностика: заменить sleep, не потеряв сигнал</text><rect x="35" y="125" width="210" height="118" rx="13" class="r"/><text x="70" y="170" class="h">sleep</text><text x="59" y="212" class="s">нет condition</text><rect x="300" y="125" width="220" height="118" rx="13" class="y"/><text x="323" y="170" class="h">state</text><text x="323" y="212" class="s">submitting</text><rect x="575" y="125" width="205" height="118" rx="13" class="b"/><text x="603" y="170" class="h">request id</text><text x="605" y="212" class="s">сверить reply</text><path d="M245 184H298" class="l"/><path d="M520 184H573" class="l"/><rect x="792" y="80" width="135" height="110" rx="13" class="g"/><text x="810" y="125" class="h">saved</text><text x="812" y="165" class="s">ack</text><rect x="772" y="290" width="155" height="110" rx="13" class="r"/><text x="786" y="335" class="h">recovery</text><text x="805" y="375" class="s">нет ack</text><path d="M780 163H790" class="l"/><path d="M674 243C725 278 750 323 770 340" fill="none" class="l"/><text x="575" y="283" class="s">нет ответа</text><rect x="300" y="425" width="315" height="92" rx="13" class="b"/><text x="335" y="463" class="h">rollback → editing</text><text x="356" y="496" class="s">сохранить текст</text><path d="M772 400C692 449 646 463 617 463" fill="none" class="l"/><text x="48" y="555" class="s">Граница: маршрут не измеряет время и не объясняет настоящий timeout.</text></svg>

web/public/assets/editorial/2022/ui-tests-2022-observation-route.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="580" viewBox="0 0 960 580" role="img" aria-labelledby="title desc"><title id="title">Разделение intent, transition и наблюдения</title><desc id="desc">Схема показывает, как submit создаёт transition, а тест проверяет доступное наблюдаемое состояние.</desc><rect width="960" height="580" fill="#101827"/><style>text{font-family:Arial,sans-serif;fill:#edf2f7}.h{font-size:34px;font-weight:bold}.s{font-size:26px}.box{fill:#1f2937;stroke:#64748b;stroke-width:2}.green{fill:#153b31;stroke:#34d399;stroke-width:2}.red{fill:#43212c;stroke:#fb7185;stroke-width:2}.line{stroke:#93c5fd;stroke-width:3;marker-end:url(#a)}</style><defs><marker id="a" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0L0 6L9 3z" fill="#93c5fd"/></marker></defs><text x="48" y="58" class="h">Сначала смысл перехода, затем assertion</text><rect x="45" y="145" width="245" height="185" rx="15" class="box"/><text x="112" y="195" class="h">Intent</text><text x="77" y="245" class="s">ввод + submit</text><text x="77" y="287" class="s">не success</text><rect x="357" y="145" width="250" height="185" rx="15" class="box"/><text x="378" y="195" class="h">Transition</text><text x="385" y="245" class="s">submitting</text><text x="385" y="287" class="s">request id + guard</text><rect x="674" y="145" width="240" height="185" rx="15" class="green"/><text x="689" y="195" class="h">Observation</text><text x="702" y="245" class="s">role: status</text><text x="702" y="287" class="s">«Сохранено»</text><path d="M290 237H355" class="line"/><path d="M607 237H672" class="line"/><rect x="357" y="400" width="250" height="100" rx="15" class="red"/><text x="388" y="442" class="h">Recovery</text><text x="387" y="478" class="s">alert + текст</text><path d="M482 330V398" class="line"/><text x="50" y="548" class="s">Граница: labels модели, не accessibility-аудит.</text></svg>

web/public/assets/editorial/2022/ui-tests-2022-state-contract.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="580" viewBox="0 0 960 580" role="img" aria-labelledby="title desc"><title id="title">Контракт наблюдаемых состояний UI-сценария</title><desc id="desc">Переходы editing, submitting, saved и recovery-required; повторная отправка заблокирована.</desc><rect width="960" height="580" fill="#0f172a"/><style>text{font-family:Arial,sans-serif;fill:#e2e8f0}.t{font-size:32px;font-weight:700}.s{font-size:26px}.b{fill:#1e293b;stroke:#64748b;stroke-width:2}.ok{fill:#123b35;stroke:#34d399;stroke-width:2}.warn{fill:#472c14;stroke:#fbbf24;stroke-width:2}.bad{fill:#49202d;stroke:#fb7185;stroke-width:2}.a{stroke:#94a3b8;stroke-width:3;marker-end:url(#arrow)}</style><defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0,0 L0,6 L9,3z" fill="#94a3b8"/></marker></defs><text x="48" y="58" class="t">Проверка ждёт состояние, не секунду</text><rect x="45" y="150" width="195" height="125" rx="14" class="b"/><text x="76" y="198" class="t">editing</text><text x="67" y="238" class="s">черновик готов</text><rect x="370" y="150" width="245" height="125" rx="14" class="warn"/><text x="405" y="198" class="t">submitting</text><text x="394" y="238" class="s">ждём ответ</text><rect x="735" y="150" width="180" height="125" rx="14" class="ok"/><text x="773" y="198" class="t">saved</text><text x="752" y="238" class="s">сохранено</text><path d="M240 213H368" class="a"/><text x="270" y="135" class="s">submit</text><path d="M615 213H733" class="a"/><text x="636" y="135" class="s">ack + id</text><rect x="365" y="375" width="260" height="116" rx="14" class="bad"/><text x="389" y="422" class="t">recovery</text><text x="389" y="461" class="s">нет подтверждения</text><path d="M495 275V373" class="a"/><text x="525" y="332" class="s">нет ack</text><path d="M365 332C265 375 172 350 135 278" fill="none" class="a"/><text x="52" y="353" class="s">rollback → editing</text><rect x="675" y="390" width="235" height="82" rx="12" fill="#18263b" stroke="#60a5fa" stroke-width="2"/><text x="699" y="424" class="s">повторный submit</text><text x="724" y="455" class="s">→ guard</text><text x="48" y="545" class="s">Граница: in-memory модель, без DOM, сети, таймера и Playwright.</text></svg>