Project note, August 2026: This post comes from the first browser-level verification of the Seasoned Pan calculators.
The nutrition engine was correct.
Its tests produced the expected calorie and macronutrient results. The REST endpoints returned the right values. The conditional fields had the correct JavaScript state.
One of those fields still refused to disappear in the browser.
The Application Was More Than Its Engine
The form included controls that should appear only for certain goals. The markup used the standard hidden attribute, and the script toggled that attribute correctly.
The problem was a broad component rule that set the field container to display: block. Author styles have precedence over the browser’s built-in stylesheet, including the user-agent rule that normally hides elements carrying the hidden attribute.
The state was right. The rendering was wrong.
A small, component-scoped rule restoring display: none for hidden elements fixed every affected toggle.
Unit Tests Had Done Their Job
It would be easy to describe this as a testing failure. It was actually a boundary lesson.
The unit tests proved the arithmetic. They were never capable of proving CSS cascade behavior inside WordPress. Endpoint tests proved the server contract. They could not prove that the form made sense when placed inside a real theme with browser defaults and plugin styles interacting.
Each layer had passed the test appropriate to that layer.
What was missing until the final pass was the medium itself.
Test The Thing Where It Lives
WordPress plugins do not live in isolated PHP functions. They live on pages with themes, browser styles, cached assets, other plugins, and users clicking controls in an order the implementation may not anticipate.
For this project, the practical test sequence became:
- Verify pure calculations without WordPress.
- Verify server endpoints and permissions.
- Place the shortcode on an actual page.
- Drive the full form in a browser.
- Check both visible results and state transitions.
The browser pass was not a ceremonial acceptance test after the “real” engineering. It was where a different category of engineering became visible.
The bug was one line of CSS. Finding it required running the entire product.