feat: unit tests and CI (#12)

Author: ThisIsDemetrio

.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Prettier
+        run: npm run prettier -- --check .
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Build app
+        run: npm run build
+
+      - name: Run tests
+        run: npm test -- --watch=false --browsers=ChromeHeadless

src/app/app.component.spec.ts

@@ -1,16 +1,70 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { BombTimerState } from './types';
+import { ConfigurationComponent } from './configuration/configuration.component';
+import { BombTimerComponent } from './bomb-timer/bomb-timer.component';
+import { TimerExpiredComponent } from './timer-expired/timer-expired.component';
+import { ConfigurationStore } from './configuration.store';
 
 describe('AppComponent', () => {
-  beforeEach(() =>
+  let fixture: ComponentFixture<AppComponent>;
+  let app: AppComponent;
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent],
-    })
-  );
+      imports: [
+        AppComponent,
+        ConfigurationComponent,
+        BombTimerComponent,
+        TimerExpiredComponent,
+      ],
+      providers: [
+        {
+          provide: ConfigurationStore,
+          useValue: {
+            configuration: () => ({
+              hours: '00',
+              minutes: '01',
+              color: '#FF0000',
+              showMilliseconds: false,
+            }),
+            setConfiguration: jasmine.createSpy('setConfiguration'),
+            reset: jasmine.createSpy('reset'),
+          },
+        },
+      ],
+    });
+    fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
+
+  it('should start in CONFIGURATION state', () => {
+    expect(app.state).toBe(BombTimerState.CONFIGURATION);
+  });
+
+  it('should move to TIMER_RUNNING after configuration completed', () => {
+    app.onConfigurationCompleted({
+      hours: '00',
+      minutes: '01',
+      color: '#FF0000',
+      showMilliseconds: false,
+    });
+    expect(app.state).toBe(BombTimerState.TIMER_RUNNING);
+  });
+
+  it('should move to TIMER_EXPIRED after countdown completed', () => {
+    app.onCountdownCompleted();
+    expect(app.state).toBe(BombTimerState.TIMER_EXPIRED);
+  });
+
+  it('should return to CONFIGURATION after moveToConfiguration', () => {
+    app.state = BombTimerState.TIMER_EXPIRED;
+    app.onMoveToConfiguration();
+    expect(app.state).toBe(BombTimerState.CONFIGURATION);
+  });
 });

src/app/app.component.ts

@@ -7,10 +7,10 @@ import { TimerExpiredComponent } from './timer-expired/timer-expired.component';
 import { ConfigurationStore } from './configuration.store';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    imports: [BombTimerComponent, ConfigurationComponent, TimerExpiredComponent]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  imports: [BombTimerComponent, ConfigurationComponent, TimerExpiredComponent],
 })
 export class AppComponent {
   // TODO: Add ngOnInit to retrieve from localStorage existing timers

src/app/bomb-timer/bomb-timer.component.spec.ts

@@ -1,14 +1,34 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BombTimerComponent } from './bomb-timer.component';
+import { ConfigurationStore } from '../configuration.store';
 
 describe('BombTimerComponent', () => {
   let component: BombTimerComponent;
   let fixture: ComponentFixture<BombTimerComponent>;
 
   beforeEach(() => {
+    spyOn(window.HTMLMediaElement.prototype, 'play').and.returnValue(
+      Promise.resolve()
+    );
+
     TestBed.configureTestingModule({
-      declarations: [BombTimerComponent],
+      imports: [BombTimerComponent],
+      providers: [
+        {
+          provide: ConfigurationStore,
+          useValue: {
+            configuration: () => ({
+              hours: '00',
+              minutes: '01',
+              color: '#FF0000',
+              showMilliseconds: false,
+            }),
+            setConfiguration: jasmine.createSpy('setConfiguration'),
+            reset: jasmine.createSpy('reset'),
+          },
+        },
+      ],
     });
     fixture = TestBed.createComponent(BombTimerComponent);
     component = fixture.componentInstance;
@@ -18,4 +38,22 @@ describe('BombTimerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display the timer and emit countdownCompleted on complete', done => {
+    spyOn(component.countdownCompleted, 'emit');
+    component.endDate = new Date(Date.now() + 100);
+    component.ngOnInit();
+    setTimeout(() => {
+      expect(component.countdownCompleted.emit).toHaveBeenCalled();
+      done();
+    }, 200);
+  });
+
+  it('should emit countdownCanceled on ESC when warning is shown', () => {
+    spyOn(component.countdownCanceled, 'emit');
+    component.showCancelWarning = true;
+    const event = new KeyboardEvent('keydown', { key: 'Escape' });
+    component.onKeydownHandler(event);
+    expect(component.countdownCanceled.emit).toHaveBeenCalled();
+  });
 });

src/app/bomb-timer/bomb-timer.component.ts

@@ -22,10 +22,10 @@ import { MILLISECONDS_IN_SECOND, getFormattedTimeLeft } from '../utils';
 import { ConfigurationStore } from '../configuration.store';
 
 @Component({
-    selector: 'bomb-timer',
-    templateUrl: './bomb-timer.component.html',
-    styleUrls: ['./bomb-timer.component.scss'],
-    imports: [CommonModule]
+  selector: 'bomb-timer',
+  templateUrl: './bomb-timer.component.html',
+  styleUrls: ['./bomb-timer.component.scss'],
+  imports: [CommonModule],
 })
 export class BombTimerComponent implements OnDestroy, OnInit, AfterViewInit {
   @Input() endDate: Date = new Date();
@@ -65,6 +65,7 @@ export class BombTimerComponent implements OnDestroy, OnInit, AfterViewInit {
     const config = this.bombTimerConfiguration;
     if (!config) throw new Error('BombTimerOptions not set in store');
     const { showMilliseconds } = config;
+    this.color = config.color;
 
     this.countdownInterval$ = interval(61)
       .pipe(takeWhile(() => this.endDate.getTime() > new Date().getTime()))
@@ -89,7 +90,6 @@ export class BombTimerComponent implements OnDestroy, OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     const config = this.bombTimerConfiguration;
     if (!config) throw new Error('BombTimerOptions not set in store');
-    this.color = config.color;
     this.audioPlayerRef.nativeElement.play();
   }
 

src/app/configuration.store.spec.ts

@@ -0,0 +1,41 @@
+import { ConfigurationStore } from './configuration.store';
+import { BombTimerOptions, RED } from './types';
+
+describe('ConfigurationStore', () => {
+  let store: ConfigurationStore;
+
+  beforeEach(() => {
+    store = new ConfigurationStore();
+  });
+
+  it('should be created', () => {
+    expect(store).toBeTruthy();
+  });
+
+  it('should have null configuration by default', () => {
+    expect(store.configuration()).toBeNull();
+  });
+
+  it('should set configuration', () => {
+    const config: BombTimerOptions = {
+      hours: '01',
+      minutes: '10',
+      color: RED,
+      showMilliseconds: true,
+    };
+    store.setConfiguration(config);
+    expect(store.configuration()).toEqual(config);
+  });
+
+  it('should reset configuration to null', () => {
+    const config: BombTimerOptions = {
+      hours: '01',
+      minutes: '10',
+      color: RED,
+      showMilliseconds: true,
+    };
+    store.setConfiguration(config);
+    store.reset();
+    expect(store.configuration()).toBeNull();
+  });
+});

src/app/configuration/configuration.component.spec.ts

@@ -1,14 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ConfigurationComponent } from './configuration.component';
+import { ConfigurationStore } from '../configuration.store';
 
 describe('ConfigurationComponent', () => {
   let component: ConfigurationComponent;
   let fixture: ComponentFixture<ConfigurationComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ConfigurationComponent],
+      imports: [ConfigurationComponent],
+      providers: [
+        {
+          provide: ConfigurationStore,
+          useValue: {
+            configuration: () => ({
+              hours: '00',
+              minutes: '01',
+              color: '#FF0000',
+              showMilliseconds: false,
+            }),
+            setConfiguration: jasmine.createSpy('setConfiguration'),
+            reset: jasmine.createSpy('reset'),
+          },
+        },
+      ],
     });
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;
@@ -18,4 +34,27 @@ describe('ConfigurationComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit configurationCompleted with valid options', () => {
+    spyOn(component.configurationCompleted, 'emit');
+    component.configuration.hours = '01';
+    component.configuration.minutes = '10';
+    component.configuration.color = '#FF0000';
+    component.configuration.showMilliseconds = true;
+    component.submitConfiguration();
+    expect(component.configurationCompleted.emit).toHaveBeenCalledWith({
+      hours: '01',
+      minutes: '10',
+      color: '#FF0000',
+      showMilliseconds: true,
+    });
+  });
+
+  it('should validate configuration correctly', () => {
+    component.configuration.hours = '00';
+    component.configuration.minutes = '00';
+    expect(component.isConfigurationValid()).toBeFalse();
+    component.configuration.hours = '01';
+    expect(component.isConfigurationValid()).toBeTrue();
+  });
 });

src/app/configuration/configuration.component.ts

@@ -8,10 +8,10 @@ const MAX_HOURS_ALLOWED = 99;
 const MAX_MINUTES_ALLOWED = 59;
 
 @Component({
-    selector: 'configuration',
-    imports: [FormsModule],
-    templateUrl: './configuration.component.html',
-    styleUrls: ['./configuration.component.scss']
+  selector: 'configuration',
+  imports: [FormsModule],
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.scss'],
 })
 export class ConfigurationComponent {
   @Input() configuration: BombTimerOptions = getDefaultOptions();