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).
Control the test environment directly instead of building artificial scaffolding
Set the controlling variable (e.g. viewport size) directly in tests rather than wrapping subjects in artificial containers to provoke behaviour.
Bad example
| 1 | // Wrap the component in a tiny scroll container to force overflow |
| 2 | const renderInScrollContainer = (markup: ReactNode) => |
| 3 | page.render( |
| 4 | <div style={{ height: '200px', overflowY: 'auto' }}>{markup}</div>, |
| 5 | ); |
| 6 |
|
| 7 | renderInScrollContainer(<Component />); |
| 8 | // Now scroll the inner container and hope sticky behaviour matches a real viewport |
Explanation (EN)
An artificial scroll container is introduced just to make scrolling observable. The wrapper does not match how the component renders in production, adds indirection, and behaves differently from the actual browser viewport, making the test brittle.
Objašnjenje (HR)
Uvodi se umjetni scroll kontejner samo da bi se skrolanje moglo promatrati. Omotac ne odgovara nacinu na koji se komponenta prikazuje u produkciji, dodaje neizravnost i ponasa se drugacije od stvarnog viewporta preglednika, sto test cini krhkim.
Good example
| 1 | // Set the viewport directly, then scroll the page as a real user would |
| 2 | await page.viewport(375, 200); |
| 3 | page.render(<Component />); |
| 4 | await page.scrollTo(0, 500); |
| 5 | // Sticky behaviour is now measured against the real viewport |
Explanation (EN)
The viewport size is set directly, so the component is exercised in the same conditions it sees in production. No wrapper indirection, and the assertion reflects real browser behaviour, making the test more stable.
Objašnjenje (HR)
Velicina viewporta postavlja se izravno, pa se komponenta testira u istim uvjetima koje vidi u produkciji. Nema neizravnosti kroz omotac, a tvrdnja odrazava stvarno ponasanje preglednika, sto test cini stabilnijim.
Exceptions / Tradeoffs (EN)
A wrapper is acceptable when the component is genuinely always rendered inside a scrollable parent in production and that parent is part of what you're testing.
Iznimke / Tradeoffi (HR)
Omotac je prihvatljiv kada se komponenta u produkciji stvarno uvijek prikazuje unutar skrolajuceg roditelja i kada je taj roditelj dio onoga sto testiras.