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).
Test render helpers should mirror the real production wrapper markup
Give component test harnesses the same wrapper classes/attributes the real page applies, so rendered output matches production.
Bad example
| 1 | // real page markup: <header id="header" class="preflight relative z-101"> |
| 2 | function renderHeader() { |
| 3 | return page.render( |
| 4 | <div id="header"> |
| 5 | <Header /> |
| 6 | </div>, |
| 7 | ); // missing the production wrapper classes |
| 8 | } |
Explanation (EN)
The harness drops the wrapper classes the real page applies, so the component renders without its production styling context and visual/layout-dependent assertions don't reflect reality.
Objašnjenje (HR)
Test okruzenje ispusta klase omotaca koje stvarna stranica primjenjuje, pa se komponenta renderira bez svog produkcijskog stilskog konteksta i tvrdnje ovisne o izgledu/rasporedu ne odrazavaju stvarnost.
Good example
| 1 | // real page markup: <header id="header" class="preflight relative z-101"> |
| 2 | function renderHeader() { |
| 3 | return page.render( |
| 4 | <div id="header" className="preflight relative z-101"> |
| 5 | <Header /> |
| 6 | </div>, |
| 7 | ); // mirrors the production wrapper |
| 8 | } |
Explanation (EN)
Mirroring the production wrapper classes makes the test render the way the shipped page does, so visual inspection and styling-aware assertions stay trustworthy.
Objašnjenje (HR)
Vjerno preslikavanje produkcijskih klasa omotaca cini da se test renderira kao i isporucena stranica, pa vizualna inspekcija i tvrdnje svjesne stila ostaju pouzdane.
Exceptions / Tradeoffs (EN)
If duplicating the wrapper markup in every test is unwieldy, factor a shared render helper or fixture that owns the production wrapper so tests stay in sync with the real page.
Iznimke / Tradeoffi (HR)
Ako je dupliciranje oznaka omotaca u svakom testu nezgrapno, izdvoji zajednicki render helper ili fixture koji posjeduje produkcijski omotac kako bi testovi ostali u skladu sa stvarnom stranicom.