Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Wait on the element's own animations finishing, not a hardcoded settle-time constant
When a browser/DOM test needs to wait for a CSS transition or animation to finish before asserting layout, don't hardcode a duration constant (e.g. `ANIMATION_SETTLE_MS = 400`) tied to the current style values — instead await `element.getAnimations().map(a => a.finished)`, which stays correct even if the animation duration changes, and resolves immediately if there's no animation at all.
Bad example
| 1 | const ANIMATION_SETTLE_MS = 400; // matches the drawer's current 0.3s transition + margin |
| 2 |
|
| 3 | await trigger.click(); |
| 4 | await new Promise((resolve) => setTimeout(resolve, ANIMATION_SETTLE_MS)); |
| 5 | const rect = dropdown.element().getBoundingClientRect(); |
Explanation (EN)
The constant silently drifts out of sync the moment someone tweaks the CSS transition duration, and it either wastes time (over-waiting) or flakes (under-waiting) in the meantime.
Objašnjenje (HR)
Konstanta tiho izlazi iz sinkronizacije čim netko promijeni trajanje CSS tranzicije, i u međuvremenu ili gubi vrijeme (predugo čekanje) ili uzrokuje nestabilnost testa (prekratko čekanje).
Good example
| 1 | const waitForAnimations = (locator: Locator) => |
| 2 | Promise.all(locator.element().getAnimations({ subtree: true }).map((a) => a.finished)); |
| 3 |
|
| 4 | await trigger.click(); |
| 5 | await waitForAnimations(dropdown); |
| 6 | const rect = dropdown.element().getBoundingClientRect(); |
Explanation (EN)
This waits on the actual running animations, so it tracks whatever duration the CSS currently specifies, and resolves instantly when there's nothing animating.
Objašnjenje (HR)
Ovo čeka na stvarno pokrenute animacije, pa prati trajanje koje CSS trenutno specificira, i odmah se razrješava kad ništa nije animirano.