Working on the tests for the Fight component

src/app/fight/fight.component.spec.ts

@@ -4,6 +4,7 @@ import { FightComponent } from './fight.component'
 import { provideRouter } from '@angular/router'
 import { provideHttpClient } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { waitFor } from '../utils'
 
 describe('FightComponent', () => {
   let component: FightComponent
@@ -41,4 +42,28 @@ describe('FightComponent', () => {
     expect(leftHealthBar.textContent).toContain('/ 100')
     expect(rightHealthBar.textContent).toContain('/ 100')
   })
+
+  it('should reset the game', async () => {
+    component.leftCharacterInitialHealth = 100
+    component.rightCharacterInitialHealth = 100
+    fixture.detectChanges()
+
+    try {
+      const resetButton = await waitFor('#resetButton')
+      resetButton.click()
+      fixture.detectChanges()
+    } catch (e) {
+      console.error(e)
+    }
+
+    const leftHealthBar = fightEl.querySelector(
+      '.left-health-bar',
+    ) as HTMLElement
+    const rightHealthBar = fightEl.querySelector(
+      '.right-health-bar',
+    ) as HTMLElement
+
+    expect(leftHealthBar.textContent).toContain('/ 100')
+    expect(rightHealthBar.textContent).toContain('/ 100')
+  }, 30000)
 })

src/app/utils.ts

@@ -4,3 +4,22 @@ export function getRandomFromRange(min: number, max: number): number {
   }
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
+
+export function waitFor(
+  selector: string,
+  timeout: number = 30000,
+): Promise<HTMLElement> {
+  const start = Date.now()
+  return new Promise((resolve, reject) => {
+    const interval = setInterval(() => {
+      const el = document.querySelector(selector) as HTMLElement
+      if (el) {
+        clearInterval(interval)
+        resolve(el)
+      } else if (Date.now() - start > timeout) {
+        clearInterval(interval)
+        reject(new Error('Timeout exceeded'))
+      }
+    }, 100)
+  })
+}