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).
Assert with semantic matchers, not raw DOM property reads
Use toHaveStyle/toBeVisible instead of asserting on element.style.* so failures are readable and decoupled from implementation.
Bad example
| 1 | expect(container.style.display).toBe('none'); |
Explanation (EN)
Reading el.style.display only sees inline styles and fails with an opaque 'expected "" to be "none"' message that says nothing about the element.
Objašnjenje (HR)
Citanje el.style.display vidi samo inline stilove i pada s nejasnom porukom 'expected "" to be "none"' koja ne govori nista o elementu.
Good example
| 1 | await expect.element(container).toHaveStyle('display: none'); |
Explanation (EN)
toHaveStyle checks the resolved style and produces a clear, element-aware failure message, independent of whether the style came from inline, a class, or a stylesheet.
Objašnjenje (HR)
toHaveStyle provjerava izracunati stil i daje jasnu poruku o gresci vezanu uz element, neovisno o tome dolazi li stil iz inline, klase ili stylesheeta.
Notes (EN)
In Vitest browser mode, expect.element is retryable, so every call must be awaited.
Bilješke (HR)
U Vitest browser modu expect.element ponavlja pokusaje, pa svaki poziv mora biti awaitan.