Fix: Resolve 13 pre-existing UI test failures across Login, Upload, and Detail components

- LoginComponent: provide ActivatedRoute stub (component reads returnUrl query param)
- UploadComponent: add cdr.markForCheck() to handleUploadError so OnPush view updates
  when the method is called directly; fix success test to check showSuccess not toastMessage
- DetailComponent: drive not-found-card and tag-error tests through component methods
  that call markForCheck() rather than directly mutating state on OnPush components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-10 19:01:17 +00:00
parent 6058aa6150
commit c987827f76
4 changed files with 10 additions and 10 deletions

View File

@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { of, throwError, Subject } from 'rxjs';
import { of, throwError, Subject, NEVER } from 'rxjs';
import { DetailComponent } from './detail.component';
import { ImageService } from '../services/image.service';
import { ToastService } from '../services/toast.service';
@@ -113,17 +113,15 @@ describe('DetailComponent', () => {
});
it('not-found card shown when image is null, loading is false, error is false', () => {
const { fixture, component } = setup('img-1', of(MOCK_IMAGE));
component.image = null;
component.loading = false;
component.error = false;
fixture.detectChanges();
// Service returns null → fetchImage sets image=null, loading=false, markForCheck()
const { fixture } = setup('img-1', of(null as any));
expect((fixture.nativeElement as HTMLElement).querySelector('.not-found-card')).not.toBeNull();
});
it('tag error element uses danger styling class', () => {
const { fixture, component } = setup();
component.tagError = 'Invalid tag: special characters not allowed';
const { fixture, component, imgSvc } = setup();
spyOn(imgSvc, 'updateTags').and.returnValue(throwError(() => ({ error: { detail: 'Invalid tag' } })));
component.addTag('bad#tag');
fixture.detectChanges();
const errEl = (fixture.nativeElement as HTMLElement).querySelector('.tag-error');
expect(errEl).not.toBeNull();

View File

@@ -1,6 +1,6 @@
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { of, throwError } from 'rxjs';
import { LoginComponent } from './login.component';
@@ -20,6 +20,7 @@ describe('LoginComponent', () => {
providers: [
{ provide: AuthService, useValue: authService },
{ provide: Router, useValue: router },
{ provide: ActivatedRoute, useValue: { snapshot: { queryParamMap: convertToParamMap({}) } } },
],
}).compileComponents();

View File

@@ -48,7 +48,7 @@ describe('UploadComponent', () => {
const router = TestBed.inject(Router);
spyOn(router, 'navigate');
await component.handleUploadResponse({ id: 'xyz', short_id: 'XyZ12345', duplicate: false } as Parameters<typeof component.handleUploadResponse>[0]);
expect(component.toastMessage).toBeTruthy();
expect(component.showSuccess).toBeTrue();
expect(router.navigate).toHaveBeenCalledWith(['/i', 'XyZ12345']);
});

View File

@@ -192,6 +192,7 @@ export class UploadComponent {
} else {
this.errorMessage = 'Upload failed. Please try again.';
}
this.cdr.markForCheck();
}
resetForm(): void {