Add health bar text content test

Enhanced unit test to verify that the health bars display the correct initial health values. Modified the HTML to include class identifiers for left and right health bars, facilitating easier DOM element selection in tests.
dhAlcojor · Aug 19, 2024 · c47fc3f · c47fc3f
1 parent 061a07b
commit c47fc3f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/app/fight/fight.component.html b/src/app/fight/fight.component.html
@@ -2,60 +2,64 @@
 <span id="rightDamageText" class="damage-text"></span> -->
 <div class="relative">
   @for (hpEvent of hpEvents(); track $index) {
-    <cf-hp-event [hpEvent]="hpEvent" />
+    <cf-hp-event [hpEvent]="hpEvent"/>
   }
 </div>
 <div class="h-svh w-full bg-black">
   <div class="flex flex-col items-center h-full max-w-[480px] mx-auto bg-white">
-    <cf-header class="w-full" />
+    <cf-header class="w-full"/>
     <main class="p-4 flex-1 flex flex-col justify-center items-center overflow-y-hidden">
       <div class="flex justify-around items-end">
         <div class="w-1/3 flex flex-col justify-center">
-          <img id="leftCharacterIdleImage" [class]="leftLoserClass()" [src]="leftCharacter.idle" [alt]="leftCharacter.name + ' idle sprite'" />
-          <img [class]="leftLoserClass()" [src]="leftCharacter.logo" [alt]="leftCharacter.name + ' logo'" />
+          <img [alt]="leftCharacter.name + ' idle sprite'" [class]="leftLoserClass()" [src]="leftCharacter.idle"
+               id="leftCharacterIdleImage"/>
+          <img [alt]="leftCharacter.name + ' logo'" [class]="leftLoserClass()" [src]="leftCharacter.logo"/>
           <cf-health-bar
-            [value]="leftCharacterHealth()"
-            [max]="leftCharacter.maxHealth"
             [fillColor]="leftCharacter.mainColor"
+            [max]="leftCharacter.maxHealth"
+            [value]="leftCharacterHealth()"
+            class="left-health-bar"
           />
         </div>
         <span class="font-fighter text-2xl">VS</span>
         <div class="w-1/3 flex flex-col justify-center">
           <img
-            id="rightCharacterIdleImage"
+            [alt]="rightCharacter.name + ' idle sprite'"
             [class]="'-scale-x-100 ' + rightLoserClass()"
             [src]="rightCharacter.idle"
-            [alt]="rightCharacter.name + ' idle sprite'"
+            id="rightCharacterIdleImage"
           />
           <img
+            [alt]="rightCharacter.name + ' logo'"
             [class]="rightLoserClass()"
             [src]="rightCharacter.logo"
-            [alt]="rightCharacter.name + ' logo'"
           />
           <cf-health-bar
-            [value]="rightCharacterHealth()"
-            [max]="rightCharacter.maxHealth"
             [fillColor]="rightCharacter.mainColor"
+            [max]="rightCharacter.maxHealth"
+            [value]="rightCharacterHealth()"
+            class="right-health-bar"
           />
         </div>
       </div>
       <div class="w-full flex-1 flex flex-col gap-2 mt-4 overflow-y-auto">
         @if (winnerEvent()) {
           @if (winnerEvent()?.attacker?.length === 0) {
-            <p class="font-fighter text-4xl mt-4 text-center text-transparent" [style]="{'background-image': doubleKoBackgroundStyle, 'background-clip': 'text'}">
+            <p class="font-fighter text-4xl mt-4 text-center text-transparent"
+               [style]="{'background-image': doubleKoBackgroundStyle, 'background-clip': 'text'}">
               DOBLE K.O.!
             </p>
           } @else {
             <p
-            [class]="'font-fighter mt-4 text-center'"
-            [style.color]="winnerEvent()?.color"
+              [class]="'font-fighter mt-4 text-center'"
+              [style.color]="winnerEvent()?.color"
             >
               ¡{{ winnerEvent()?.attacker }} ha ganado!
             </p>
           }
         }
         @for (event of roundEvents(); track $index) {
-          <cf-event [event]="event" />
+          <cf-event [event]="event"/>
         }
       </div>
     </main>
@@ -70,4 +74,4 @@
       </div>
     }
   </div>
-</div>
+</div>
diff --git a/src/app/fight/fight.component.spec.ts b/src/app/fight/fight.component.spec.ts
@@ -8,6 +8,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 describe('FightComponent', () => {
   let component: FightComponent
   let fixture: ComponentFixture<FightComponent>
+  let fightEl: HTMLElement
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -21,10 +22,23 @@ describe('FightComponent', () => {
 
     fixture = TestBed.createComponent(FightComponent)
     component = fixture.componentInstance
+    fightEl = fixture.nativeElement
     fixture.detectChanges()
   })
 
   it('should create', () => {
-    expect(component).toBeTruthy()
+    component.leftCharacterInitialHealth = 100
+    component.rightCharacterInitialHealth = 100
+    fixture.detectChanges()
+
+    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')
   })
 })