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:
@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
|
|||||||
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
|
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
|
||||||
import { provideHttpClient } from '@angular/common/http';
|
import { provideHttpClient } from '@angular/common/http';
|
||||||
import { provideHttpClientTesting } from '@angular/common/http/testing';
|
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 { DetailComponent } from './detail.component';
|
||||||
import { ImageService } from '../services/image.service';
|
import { ImageService } from '../services/image.service';
|
||||||
import { ToastService } from '../services/toast.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', () => {
|
it('not-found card shown when image is null, loading is false, error is false', () => {
|
||||||
const { fixture, component } = setup('img-1', of(MOCK_IMAGE));
|
// Service returns null → fetchImage sets image=null, loading=false, markForCheck()
|
||||||
component.image = null;
|
const { fixture } = setup('img-1', of(null as any));
|
||||||
component.loading = false;
|
|
||||||
component.error = false;
|
|
||||||
fixture.detectChanges();
|
|
||||||
expect((fixture.nativeElement as HTMLElement).querySelector('.not-found-card')).not.toBeNull();
|
expect((fixture.nativeElement as HTMLElement).querySelector('.not-found-card')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('tag error element uses danger styling class', () => {
|
it('tag error element uses danger styling class', () => {
|
||||||
const { fixture, component } = setup();
|
const { fixture, component, imgSvc } = setup();
|
||||||
component.tagError = 'Invalid tag: special characters not allowed';
|
spyOn(imgSvc, 'updateTags').and.returnValue(throwError(() => ({ error: { detail: 'Invalid tag' } })));
|
||||||
|
component.addTag('bad#tag');
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
const errEl = (fixture.nativeElement as HTMLElement).querySelector('.tag-error');
|
const errEl = (fixture.nativeElement as HTMLElement).querySelector('.tag-error');
|
||||||
expect(errEl).not.toBeNull();
|
expect(errEl).not.toBeNull();
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
|
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
|
||||||
import { ReactiveFormsModule } from '@angular/forms';
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
import { Router } from '@angular/router';
|
import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
|
||||||
import { HttpErrorResponse } from '@angular/common/http';
|
import { HttpErrorResponse } from '@angular/common/http';
|
||||||
import { of, throwError } from 'rxjs';
|
import { of, throwError } from 'rxjs';
|
||||||
import { LoginComponent } from './login.component';
|
import { LoginComponent } from './login.component';
|
||||||
@@ -20,6 +20,7 @@ describe('LoginComponent', () => {
|
|||||||
providers: [
|
providers: [
|
||||||
{ provide: AuthService, useValue: authService },
|
{ provide: AuthService, useValue: authService },
|
||||||
{ provide: Router, useValue: router },
|
{ provide: Router, useValue: router },
|
||||||
|
{ provide: ActivatedRoute, useValue: { snapshot: { queryParamMap: convertToParamMap({}) } } },
|
||||||
],
|
],
|
||||||
}).compileComponents();
|
}).compileComponents();
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ describe('UploadComponent', () => {
|
|||||||
const router = TestBed.inject(Router);
|
const router = TestBed.inject(Router);
|
||||||
spyOn(router, 'navigate');
|
spyOn(router, 'navigate');
|
||||||
await component.handleUploadResponse({ id: 'xyz', short_id: 'XyZ12345', duplicate: false } as Parameters<typeof component.handleUploadResponse>[0]);
|
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']);
|
expect(router.navigate).toHaveBeenCalledWith(['/i', 'XyZ12345']);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -192,6 +192,7 @@ export class UploadComponent {
|
|||||||
} else {
|
} else {
|
||||||
this.errorMessage = 'Upload failed. Please try again.';
|
this.errorMessage = 'Upload failed. Please try again.';
|
||||||
}
|
}
|
||||||
|
this.cdr.markForCheck();
|
||||||
}
|
}
|
||||||
|
|
||||||
resetForm(): void {
|
resetForm(): void {
|
||||||
|
|||||||
Reference in New Issue
Block a user