agatha/reactbin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Polish Angular UI with cohesive design system

Browse Source 
Introduces a shared CSS custom property token layer and applies it
across all five views (library, upload, detail, login, app shell).
Each view now has intentional loading, empty, and error states.

- styles.css: 13 design tokens on :root; shimmer skeleton animation
- Library: 150ms-debounced skeleton loading, empty state with /upload
  link, error card with retry, card hover lift, broken-image fallback
- Upload: token-styled drop-zone, Uploading… spinner, 4s success
  banner, distinct validation vs. network error messages
- Detail: image skeleton, network error card (separate from 404
  not-found card), Owner actions panel, danger tag error styling,
  broken-image fallback
- Login: vertically centred surface card, danger field/server errors,
  Signing in… disabled button
- App shell: 48px fixed header, app name left, sign-out right, no
  reflow on auth state change
- All 24 ESLint errors resolved (including pre-existing auth spec
  issues); ng build and ng lint pass clean

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
agathanonymous
2026-05-03 20:03:56 +00:00
parent 5179786261
commit 9246f75fdd
23 changed files with 1777 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
ui/src/app/upload/upload.component.spec.ts
View File

@@ -2,19 +2,12 @@ import { TestBed } from '@angular/core/testing';
import { provideRouter, Router } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { of, throwError } from 'rxjs';
import { UploadComponent } from './upload.component';
import { ImageService } from '../services/image.service';
import { routes } from '../app.routes';
describe('UploadComponent', () => {
let component: UploadComponent;
function makeImageService(overrides: Partial<ImageService> = {}): jasmine.SpyObj<ImageService> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return jasmine.createSpyObj<ImageService>('ImageService', { upload: of({} as any), ...overrides } as any);
}
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UploadComponent],
@@ -26,22 +19,17 @@ describe('UploadComponent', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
component.tagInput = 'CAT, Funny reaction';
const parsed = component.parseTagInput(component.tagInput);
expect(parsed).toEqual(['cat', 'funny', 'reaction']);
expect(component.parseTagInput(component.tagInput)).toEqual(['cat', 'funny', 'reaction']);
});
it('should split on commas', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
const parsed = component.parseTagInput('a,b,c');
expect(parsed).toEqual(['a', 'b', 'c']);
expect(fixture.componentInstance.parseTagInput('a,b,c')).toEqual(['a', 'b', 'c']);
});
it('should filter empty tokens', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
const parsed = component.parseTagInput(' ,, cat ,,');
expect(parsed).toEqual(['cat']);
expect(fixture.componentInstance.parseTagInput(' ,, cat ,,')).toEqual(['cat']);
});
it('on duplicate response: shows toast and navigates to detail', async () => {
@@ -49,13 +37,7 @@ describe('UploadComponent', () => {
component = fixture.componentInstance;
const router = TestBed.inject(Router);
spyOn(router, 'navigate');
const mockSvc = makeImageService({
upload: of({ id: 'abc', duplicate: true } as any),
} as any);
(component as any).imageService = mockSvc;
await component.handleUploadResponse({ id: 'abc', duplicate: true } as any);
await component.handleUploadResponse({ id: 'abc', duplicate: true } as Parameters<typeof component.handleUploadResponse>[0]);
expect(component.toastMessage).toContain('library');
expect(router.navigate).toHaveBeenCalledWith(['/images', 'abc']);
});
@@ -65,8 +47,7 @@ describe('UploadComponent', () => {
component = fixture.componentInstance;
const router = TestBed.inject(Router);
spyOn(router, 'navigate');
await component.handleUploadResponse({ id: 'xyz', duplicate: false } as any);
await component.handleUploadResponse({ id: 'xyz', duplicate: false } as Parameters<typeof component.handleUploadResponse>[0]);
expect(component.toastMessage).toBeTruthy();
expect(router.navigate).toHaveBeenCalledWith(['/images', 'xyz']);
});
@@ -76,9 +57,66 @@ describe('UploadComponent', () => {
component = fixture.componentInstance;
const router = TestBed.inject(Router);
spyOn(router, 'navigate');
component.handleUploadError({ status: 422, error: { detail: 'bad file', code: 'invalid_mime_type' } });
expect(component.errorMessage).toBeTruthy();
expect(router.navigate).not.toHaveBeenCalled();
});
// New polish tests
it('submit button is disabled when no file is selected', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
const btn = (fixture.nativeElement as HTMLElement).querySelector('button[type="submit"]') as HTMLButtonElement;
expect(btn.disabled).toBeTrue();
});
it('submit button shows "Uploading…" label while uploading is true', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
component.uploading = true;
fixture.detectChanges();
const btn = (fixture.nativeElement as HTMLElement).querySelector('button[type="submit"]') as HTMLButtonElement;
expect(btn.textContent).toContain('Uploading');
expect(btn.disabled).toBeTrue();
});
it('showSuccess banner is hidden initially', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
expect((fixture.nativeElement as HTMLElement).querySelector('.success-banner')).toBeNull();
});
it('showSuccess banner is visible when showSuccess is true', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
component.showSuccess = true;
component.uploadedFilename = 'photo.jpg';
fixture.detectChanges();
const banner = (fixture.nativeElement as HTMLElement).querySelector('.success-banner');
expect(banner).not.toBeNull();
expect(banner!.textContent).toContain('photo.jpg');
});
it('shows validation error message for 422 response', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.handleUploadError({ status: 422, error: { detail: 'Unsupported file type', code: 'invalid_mime_type' } });
fixture.detectChanges();
const err = (fixture.nativeElement as HTMLElement).querySelector('.error');
expect(err!.textContent).toContain('Unsupported file type');
});
it('shows generic error message for network error', () => {
const fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.handleUploadError({ status: 500, error: null });
fixture.detectChanges();
const err = (fixture.nativeElement as HTMLElement).querySelector('.error');
expect(err!.textContent).toBeTruthy();
});
});