skills.rest
sdcorejs
sdcorejsCOMMUNITY
Explore all skills by this author →
GitHub

sdcorejs-testing-integration-angular-portal

Write Angular Portal integration tests validating DI wiring and mocked HTTP interactions.

2|Updated Apr 18, 2026
Search Tags:#integration testing#angular#ng-mocks#testbed#workflow actions#routertestingharness#httpclienttestingmodule
One-click install
npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-testing-integration-angular-portal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sdcorejs-testing-integration-angular-portal
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/sdcorejs-testing-integration-angular-portal
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-testing-integration-angular-portal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents Angular Portal integration regressions by validating real DI, component lifecycle, router navigation, and mocked HTTP boundaries in a single integration spec rather than isolated unit tests.

Core Features & Use Cases

  • TestBed-driven collaborator integration: Render a component with its real service/DI wiring while mocking the network via HttpClientTestingModule.
  • RouterTestingHarness navigation assertions: Verify form submit flows and route changes using a real router harness.
  • Core UI stubbing with ng-mocks: Avoid heavy @sd-angular/core imports while still asserting DOM behavior.
  • Workflow action coverage: Test permission-allowed and permission-denied action paths and the resulting API calls + UI updates.

Quick Start

Use the skill to create an integration spec for ProductListComponent and ProductCreateComponent, mocking HTTP and asserting DOM rendering plus navigation after submit.

Frequently Asked Questions about sdcorejs-testing-integration-angular-portal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to test router navigation flows in Angular integration tests?▼

Workflow action testing uses TestBed integration specs to validate permission-allowed and permission-denied action paths, asserting resulting API calls via HttpTestingController and verifying subsequent UI state updates after whenStable().

Does ng-mocks work with @sd-angular/core components for Angular integration testing?▼

ng-mocks stubs @sd-angular/core components in Angular integration tests to avoid heavy library imports while still rendering the DOM, allowing assertions on component-service-router collaborators without pulling in full UI dependencies.

How do I mock HTTP requests in Angular TestBed integration specs?▼

Mock HTTP requests in Angular TestBed specs by configuring HttpClientTestingModule and injecting HttpTestingController to stub network responses, then call httpMock.verify() to ensure all expected HTTP interactions are matched.

Why do my Angular integration tests fail with async component lifecycle and HTTP assertion errors?▼

Angular integration tests fail when async operations are unresolved, requiring whenStable() to wait for component lifecycle and router navigation to settle, followed by httpMock.verify() to confirm no pending HTTP requests remain.

Related Skills

Explore More Software Engineering Skills→
ROU-TechnologyROU-Technology

angular-testing

Write unit and integration tests for Angular v21+ components and services.

Official
Advanced
GainInsightDevGainInsightDev

af-analyse-test-coverage

Analyze test coverage reports to identify untested code paths and gaps.

Official
Intermediate
jander99jander99
1

angular-testing

Generate Angular unit, component, service, and end-to-end tests with Vitest, Jest, Jasmine, or Playwright.

Community
Advanced
RogerioSobrinhoRogerioSobrinho

angular-tdd

Generate Angular unit tests for components and services using TestBed and HttpClientTestingModule.

Community
Intermediate