The map was blank. Every test was green.
The most important screen in a parking app is the map. It's the first thing a driver sees, and the only reason they opened the app. On the web build of ParkEase, that map was blank. No crash. No red error box. No failing test. Just an empty rectangle where Bangalore should have been, sitting quietly above a perfectly working list of parking spots. Every test passed, because no test looked at the…
On a parking app, the map is the most crucial screen; it's the first thing a driver sees. However, in the web version of ParkEase, the map was blank. No crash, no error, no failing test—just an empty rectangle where Bangalore should have been. This glitch was caused by three bugs that were interlinked. The first bug stemmed from MapLibre, the open-source map renderer used by ParkEase, running its heavy lifting in a Web Worker.
Due to Expo's web bundler not creating separate modules, the URL for MapLibre's worker file didn't exist. Instead, the dev server served the app's HTML page, causing the worker to crash before processing any tiles. A fix was to specify precisely where MapLibre's worker lived and ensure it was active. The second bug was due to a CSS rule in ParkMap that clipped the map container, hiding everything inside it.
Removing this line fixed the issue. The third bug involved every parking spot appearing in the top-left corner due to transform animations. By moving the animation effects to individual properties instead of transforming them within a single keyframe, the problem was resolved. Ten tests were implemented to guard against these bugs, including checks for the map's CSS, the initial state of the map, and the worker copy.
A video demonstrating the broken states was also created to illustrate the issue. In the future, the app aims to display an empty state with a reason if a screen can be empty, ensuring users understand why they see a blank screen. ParkEase is a peer-to-peer parking marketplace for India, set to launch on Android soon. For more information, visit https://github.com/Deonkar/parkease.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
