feat(lib): create formatDay helper function

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html

@@ -8,23 +8,20 @@
             class="day"
             [ngClass]="{
               'cursor-pointer valid': isDateOfInterest(
-                `${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
+                `${itemByMonth.key}-${formatDay(i + 1)}`
               ),
               available:
-                marketDataByMonth[itemByMonth.key][
+                marketDataByMonth[itemByMonth.key][formatDay(i + 1)]
-                  i + 1 < 10 ? `0${i + 1}` : i + 1
+                  ?.marketPrice,
-                ]?.marketPrice,
+              today: isToday(`${itemByMonth.key}-${formatDay(i + 1)}`)
-              today: isToday(
-                `${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
-              )
             }"
             [title]="
-              (`${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
+              (`${itemByMonth.key}-${formatDay(i + 1)}`
                 | date: defaultDateFormat) ?? ''
             "
             (click)="
               onOpenMarketDataDetail({
-                day: i + 1 < 10 ? `0${i + 1}` : (i + 1).toString(),
+                day: formatDay(i + 1),
                 yearMonth: itemByMonth.key
               })
             "

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.spec.ts

@@ -0,0 +1,57 @@
+import { DataService } from '@ghostfolio/ui/services';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DeviceDetectorService } from 'ngx-device-detector';
+
+import { GfHistoricalMarketDataEditorComponent } from './historical-market-data-editor.component';
+
+jest.mock(
+  './historical-market-data-editor-dialog/historical-market-data-editor-dialog.component',
+  () => ({
+    GfHistoricalMarketDataEditorDialogComponent: class {}
+  })
+);
+
+describe('GfHistoricalMarketDataEditorComponent', () => {
+  let component: GfHistoricalMarketDataEditorComponent;
+  let fixture: ComponentFixture<GfHistoricalMarketDataEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GfHistoricalMarketDataEditorComponent],
+      providers: [
+        FormBuilder,
+        { provide: DataService, useValue: {} },
+        {
+          provide: DeviceDetectorService,
+          useValue: { getDeviceInfo: () => ({ deviceType: 'desktop' }) }
+        },
+        { provide: MatDialog, useValue: {} },
+        { provide: MatSnackBar, useValue: {} }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GfHistoricalMarketDataEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('formatDay', () => {
+    it('should pad single digit days with zero', () => {
+      expect(component.formatDay(1)).toBe('01');
+      expect(component.formatDay(9)).toBe('09');
+    });
+
+    it('should not pad double digit days', () => {
+      expect(component.formatDay(10)).toBe('10');
+      expect(component.formatDay(31)).toBe('31');
+    });
+  });
+});

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts

@@ -191,6 +191,10 @@ export class GfHistoricalMarketDataEditorComponent
     }
   }
 
+  public formatDay(day: number): string {
+    return day < 10 ? `0${day}` : `${day}`;
+  }
+
   public isDateOfInterest(aDateString: string) {
     // Date is valid and in the past
     const date = parse(aDateString, DATE_FORMAT, new Date());