Orqestria Download
← Zurück zu Web-App-Entwickler

Skill · Version 1.0.0

Angular-Änderungen überprüfen

Prüft Templates, gezielte Verhaltenstests und echte Browserabläufe vor einer belastbaren Fertigmeldung.

angular-verification

Teammitglieder mit diesem Skill

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill, wenn eine Angular-Änderung mehr Nachweise als einen TypeScript-Lauf benötigt.

Wobei hilft er dir?

  • Führt die passenden tatsächlichen Build-, Template- und Lintbefehle aus.
  • Testet Komponentenverhalten, HTTP-Verträge, Abbruch und Fehlerbehandlung.
  • Prüft Routen, Bildschirmbreiten und Tastatur und benennt ausgelassene Prüfungen.

Das könntest du fragen

Prüfe unsere Bestellansicht mit Direktlinks, Servervalidierung, Zurücknavigation und Tastaturbedienung auf schmalem Bildschirm. Sende bei schmalem Viewport eine ungültige Bestellung, korrigiere sie und kehre zur Liste zurück. Berichte Browserergebnis sowie Build- und Testergebnisse.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

Angular Verification & Browser QA

Prove that an Angular change compiles with strict template checking, passes targeted automated tests, and behaves properly in the browser across states and routes before calling it done.

1. Template typecheck, lint and build verification

  • Run the project's actual scripts from package.json / angular.json:
    • Typecheck & template check: run ng build --configuration development or tsc --noEmit / ngc (as configured) so Angular's template compiler (strictTemplates) validates component bindings, pipes, directives and signal/observable types.
    • Lint: run ng lint / eslint and fix every error or warning in touched files.
    • Build: run the build script when changing lazy-loaded routes, standalone imports, providers, SSR config or bundle assets.

2. Targeted component, service and RxJS tests

  • Test observable behavior rather than private fields:
    • For components: use TestBed.configureTestingModule, ComponentFixture or TestbedHarnessEnvironment (ComponentHarness), trigger inputs and DOM events, call fixture.detectChanges(), and assert on rendered DOM and emitted outputs.
    • For HTTP services and interceptors: use provideHttpClient() + provideHttpClientTesting() and HttpTestingController (expectOne, flush, verify()), asserting request method, URL, params, headers and error paths.
    • For RxJS streams and timers: test cancellation, debounce and error recovery deterministically (fakeAsync/tick, marble tests or controlled subjects).

3. Browser, route and interaction check

  • Whenever browser or preview tools are available, verify the changed flow in a real browser:
    • States: initial load, loading indicator, empty state, client & server validation errors, retry and success.
    • Navigation: direct URL load, browser Back/Forward, reload and same-component route parameter changes.
    • Console & network: verify zero Angular runtime errors (NG0100, NG0200, NG0950), unhandled rejections, or duplicate HTTP calls.
    • Responsive & keyboard: check phone, tablet and desktop widths, keyboard navigation (Tab, Enter, Escape) and visible focus.

4. Honest handoff

  • Record the exact commands, tests, routes and states verified and any environment limits, along with clear reproduction and testing steps for the reviewer or tester.

Before you finish

  • Angular build/template typecheck, linter and targeted tests ran and passed.
  • No Angular runtime errors (NG*), console errors or duplicate HTTP calls in the changed flow.
  • Loading, empty, error, navigation and form states verified.
  • Verification steps and remaining environment limits documented for the tester.

Enthaltene Dateien 2

  • LICENSE.txt
  • SKILL.md