PD-4790 improve tests

Author: aromanovv

projects/orcid-ui/src/lib/components/auth-challenge/auth-challenge.component.html

@@ -209,7 +209,7 @@
   </div>
 </div>
 } @if (showHelpText) {
-<ul class="leading-5.25">
+<ul class="leading-5.25" data-testid="help-text-links">
   @if (!showRecoveryCode) {
   <li>
     <div class="orc-font-body-small">
@@ -220,6 +220,7 @@
         (click)="toggleRecoveryCode($event)"
         i18n="@@account.useARecoveryCode"
         class="underline"
+        data-testid="recovery-toggle"
         >Use a recovery code instead</a
       >
     </div>
@@ -232,6 +233,7 @@
       >&nbsp;<a
         href="#"
         (click)="toggleRecoveryCode($event)"
+        data-testid="recovery-toggle"
         i18n="@@account.useYourAuthenticationAppInstead"
         class="underline"
         >Use your authentication app instead</a

projects/orcid-ui/src/lib/components/auth-challenge/auth-challenge.component.spec.ts

@@ -8,6 +8,7 @@ import {
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'
 import { NoopAnimationsModule } from '@angular/platform-browser/animations'
 import { AuthChallengeComponent } from './auth-challenge.component'
+import { AlertMessageComponent } from '../alert-message/alert-message.component'
 import { By } from '@angular/platform-browser'
 import '@angular/localize/init'
 
@@ -18,8 +19,11 @@ import '@angular/localize/init'
       <app-auth-challenge
         [showAlert]="showAlert"
         [showHelpText]="showHelpText"
+        [showTwoFactorField]="showTwoFactorField"
+        [showPasswordField]="showPasswordField"
         codeControlName="twoFactorCode"
         recoveryControlName="twoFactorRecoveryCode"
+        passwordControlName="passwordControl"
       >
       </app-auth-challenge>
     </form>
@@ -29,10 +33,12 @@ import '@angular/localize/init'
 })
 class TestHostComponent {
   @ViewChild(AuthChallengeComponent)
-  childComponent: AuthChallengeComponent
+  childComponent!: AuthChallengeComponent
 
   showAlert = false
   showHelpText = true
+  showTwoFactorField = true
+  showPasswordField = true
 
   form = new FormGroup({
     passwordControl: new FormControl(''),
@@ -77,7 +83,10 @@ describe('AuthChallengeComponent', () => {
 
   describe('Toggling Recovery Code Mode', () => {
     it('should switch to Recovery mode when toggle link is clicked', fakeAsync(() => {
-      const toggleLink = fixture.debugElement.query(By.css('a')).nativeElement
+      // Robust query using data-testid instead of CSS classes
+      const toggleLink = fixture.debugElement.query(
+        By.css('[data-testid="recovery-toggle"]')
+      ).nativeElement
 
       toggleLink.click()
       fixture.detectChanges()
@@ -94,6 +103,7 @@ describe('AuthChallengeComponent', () => {
       recoveryControl?.setValue('')
       expect(recoveryControl?.hasError('required')).toBeTrue()
 
+      // IDs are safe to query by, as they are functionally required for a11y labels
       const recoveryInput = fixture.debugElement.query(
         By.css('#twoFactorRecoveryCode')
       )
@@ -107,7 +117,6 @@ describe('AuthChallengeComponent', () => {
       component.toggleRecoveryCode(new Event('click'))
 
       fixture.detectChanges()
-
       tick()
 
       const recoveryInputEl = fixture.debugElement.query(
@@ -125,33 +134,33 @@ describe('AuthChallengeComponent', () => {
   })
 
   describe('Backend Response Handling', () => {
-    it('should handle invalidPassword (reset all)', () => {
-      hostComponent.form.get('twoFactorCode')?.setValue('123456')
-
+    it('should apply backend error to password control', () => {
       component.processBackendResponse({ invalidPassword: true })
 
-      expect(hostComponent.form.get('twoFactorCode')?.value).toBeNull()
-      expect(hostComponent.form.get('twoFactorCode')?.touched).toBeFalse()
+      const control = hostComponent.form.get('passwordControl')
+      expect(control?.hasError('invalid')).toBeTrue()
     })
 
     it('should apply backend error to 2FA code', () => {
       component.processBackendResponse({ invalidTwoFactorCode: true })
 
       const control = hostComponent.form.get('twoFactorCode')
-      expect(control?.hasError('backendInvalid')).toBeTrue()
+      expect(control?.hasError('invalid')).toBeTrue()
     })
 
     it('should apply backend error to Recovery code', () => {
       component.processBackendResponse({ invalidTwoFactorRecoveryCode: true })
 
       const control = hostComponent.form.get('twoFactorRecoveryCode')
-      expect(control?.hasError('backendInvalid')).toBeTrue()
+      expect(control?.hasError('invalid')).toBeTrue()
     })
 
     it('should refocus input if response indicates success/continuation', fakeAsync(() => {
       component.processBackendResponse({
         twoFactorEnabled: true,
         invalidPassword: false,
+        invalidTwoFactorCode: false,
+        invalidTwoFactorRecoveryCode: false,
       })
 
       fixture.detectChanges()
@@ -165,11 +174,29 @@ describe('AuthChallengeComponent', () => {
   })
 
   describe('Inputs (@Input)', () => {
-    it('should display alert message if showAlert is true', () => {
+    it('should display verification alert message if showAlert and showPasswordField are true', () => {
+      hostComponent.showAlert = true
+      hostComponent.showPasswordField = true
+      fixture.detectChanges()
+
+      // Robust query by Angular Directive rather than HTML tag
+      const alert = fixture.debugElement.query(
+        By.directive(AlertMessageComponent)
+      )
+      expect(alert).toBeTruthy()
+      expect(alert.nativeElement.textContent).toContain(
+        'Verify your ORCID account to continue'
+      )
+    })
+
+    it('should display active 2FA alert message if showAlert is true but showPasswordField is false', () => {
       hostComponent.showAlert = true
+      hostComponent.showPasswordField = false
       fixture.detectChanges()
 
-      const alert = fixture.debugElement.query(By.css('app-alert-message'))
+      const alert = fixture.debugElement.query(
+        By.directive(AlertMessageComponent)
+      )
       expect(alert).toBeTruthy()
       expect(alert.nativeElement.textContent).toContain(
         'As two-factor authentication is currently active'
@@ -180,8 +207,19 @@ describe('AuthChallengeComponent', () => {
       hostComponent.showHelpText = false
       fixture.detectChanges()
 
-      const links = fixture.debugElement.query(By.css('ul.leading-5\\.25'))
+      // Querying by data-testid instead of utility classes
+      const links = fixture.debugElement.query(
+        By.css('[data-testid="help-text-links"]')
+      )
       expect(links).toBeFalsy()
     })
+
+    it('should hide two-factor field if showTwoFactorField is false', () => {
+      hostComponent.showTwoFactorField = false
+      fixture.detectChanges()
+
+      const codeInput = fixture.debugElement.query(By.css('#twoFactorCode'))
+      expect(codeInput).toBeFalsy()
+    })
   })
 })