fix: default collectedPercentage to 0 for non-finite values

Guard StationService.getStation and the station-icon progress ring
against NaN, null, or undefined collectedPercentage values that would
otherwise produce NaN aria-valuenow/stroke-dashoffset attributes in
the rendered SVG.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: stefanhuber

packages/data/src/domain/station/station-service.ts

@@ -22,7 +22,11 @@ export class StationService {
    * Get Stations without resolving assets
    */
   getUnresolvedStations(): Station[] {
-    return this.storage.get(`stations-${this.getLanguage()}`) as Station[];
+    if (this.storage.has(`stations-${this.getLanguage()}`)) {
+      return this.storage.get(`stations-${this.getLanguage()}`) as Station[];
+    } else {
+      return [];
+    }
   }
 
   async getStations(): Promise<Station[]> {
@@ -46,6 +50,10 @@ export class StationService {
 
     const station = this.storage.get(storageKey) as Station;
 
+    if (!Number.isFinite(station.collectedPercentage)) {
+      station.collectedPercentage = 0;
+    }
+
     if (station && station.images) {
       for (let i = 0; i < station.images.length; i++) {
         station.images[i] = await this.assetService.getAsset(station.images[i] as string);

packages/data/test/domain/station/service.test.ts

@@ -56,6 +56,14 @@ describe('test station service', () => {
     expect(resolveUrl.mock.calls.length).toEqual(0);
   });
 
+  test('should return empty array when unresolved stations storage entry does not exist', () => {
+    memoryStorage.set('language', 'xy');
+
+    const stations = service.getUnresolvedStations();
+
+    expect(stations).toEqual([]);
+  });
+
   test('should store collected percentage for station', async () => {
     resolveUrl.mockReturnValue('http://internal.url');
     memoryStorage.set('language', 'xy');
@@ -77,6 +85,26 @@ describe('test station service', () => {
     await expect(service.updateCollectedPercentage("123", "123", 0.456)).rejects.toThrow();
   });
 
+  test('should default collectedPercentage to 0 when missing, null, or NaN in storage', async () => {
+    memoryStorage.set('language', 'xy');
+    resolveUrl.mockReturnValue('http://internal.url');
+
+    const undefinedStation = setStationToStorage(memoryStorage, 'xy');
+    const nullStation = setStationToStorage(memoryStorage, 'xy');
+    const nanStation = setStationToStorage(memoryStorage, 'xy');
+
+    (memoryStorage.get(`station-xy-${nullStation.id}`) as Station).collectedPercentage = null as unknown as number;
+    (memoryStorage.get(`station-xy-${nanStation.id}`) as Station).collectedPercentage = NaN;
+
+    const loadedUndefined = await service.getStation(undefinedStation.id);
+    const loadedNull = await service.getStation(nullStation.id);
+    const loadedNaN = await service.getStation(nanStation.id);
+
+    expect(loadedUndefined.collectedPercentage).toBe(0);
+    expect(loadedNull.collectedPercentage).toBe(0);
+    expect(loadedNaN.collectedPercentage).toBe(0);
+  });
+
   test('should remove collected percentage for all stations in language', async () => {
     resolveUrl.mockReturnValue('http://internal.url');
     memoryStorage.set('language', 'xy');

packages/ui/src/components/station-icon/__snapshots__/station-icon.snapshot.tsx.snap

@@ -142,6 +142,23 @@ exports[`render station icon just above lower limit starts showing progress 1`]
 </sc-station-icon>
 `;
 
+exports[`render station icon with NaN collectedPercent falls back to 0% progress 1`] = `
+<sc-station-icon class="hydrated">
+  <mock:shadow-root>
+    <div class="station-icon-wrapper station-icon-size-normal">
+      <svg class="progress-ring" width="30" height="30" viewBox="0 0 30 30" role="progressbar" aria-label="Collection progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" focusable="false">
+        <circle class="progress-ring-track" cx="15" cy="15" r="13.5" stroke-width="3" fill="none"></circle>
+        <circle class="progress-ring-fill" cx="15" cy="15" r="13.5" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="84.82300164692441" stroke-dashoffset="84.82300164692441" transform="rotate(-90 15 15)"></circle>
+      </svg>
+      <div class="station-icon">
+        <slot></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  13
+</sc-station-icon>
+`;
+
 exports[`render station icon with custom lowerLimitPercent above boundary shows progress 1`] = `
 <sc-station-icon class="hydrated">
   <mock:shadow-root>

packages/ui/src/components/station-icon/station-icon.snapshot.tsx

@@ -50,3 +50,8 @@ test('render station icon with custom lowerLimitPercent above boundary shows pro
   const { root } = await render(<sc-station-icon collectedPercent={15} lowerLimitPercent={10}>13</sc-station-icon>);
   expect(root).toMatchSnapshot();
 });
+
+test('render station icon with NaN collectedPercent falls back to 0% progress', async () => {
+  const { root } = await render(<sc-station-icon collectedPercent={NaN}>13</sc-station-icon>);
+  expect(root).toMatchSnapshot();
+});

packages/ui/src/components/station-icon/station-icon.tsx

@@ -32,6 +32,9 @@ export class StationIcon {
   @Prop() size: 'small' | 'normal' | 'large' = 'normal';
 
   private calculatePercent() {
+    if (!Number.isFinite(this.collectedPercent)) {
+      return 0;
+    }
     if (this.collectedPercent >= this.upperLimitPercent) {
       return 100;
     } else if (this.collectedPercent <= this.lowerLimitPercent) {