Enhance injectTestingRouterStore with InjectOptions and component injector support

Co-authored-by: LayZeeDK <6364586+LayZeeDK@users.noreply.github.com>

Author: Copilot

packages/router-component-store/README.md

@@ -326,7 +326,9 @@ describe('HeroService', () => {
 
 #### Injection helper
 
-The `injectTestingRouterStore()` function provides a convenient way to inject the testing router store without manual casting:
+The `injectTestingRouterStore()` function provides a convenient way to inject the testing router store without manual casting. It supports injection options similar to Angular's `inject()` function and can also inject from specific component injectors for local router stores.
+
+##### Basic usage
 
 ```typescript
 import { injectTestingRouterStore } from '@ngworker/router-component-store';
@@ -346,6 +348,46 @@ TestBed.runInInjectionContext(() => {
 });
 ```
 
+##### With injection options
+
+```typescript
+TestBed.runInInjectionContext(() => {
+  // With injection options (optional, skipSelf, self, host)
+  const routerStore = injectTestingRouterStore({ 
+    optional: true, 
+    host: true 
+  });
+  routerStore?.setRouteParam('id', '123');
+});
+```
+
+##### For local router stores
+
+```typescript
+// When testing components with local router store providers
+@Component({
+  template: '<p>Hero: {{ heroId$ | async }}</p>',
+  providers: [provideTestingRouterStore()], // Local provider
+})
+class HeroComponent {
+  private routerStore = inject(RouterStore);
+  heroId$ = this.routerStore.selectRouteParam('id');
+}
+
+// In your test
+const fixture = TestBed.createComponent(ParentComponent);
+
+// Inject from the specific component's injector
+const routerStore = injectTestingRouterStore({
+  component: HeroComponent,
+  fixture,
+  options: { host: true } // Optional injection options
+});
+
+routerStore.setRouteParam('id', '123');
+fixture.detectChanges();
+```
+
 **Note:** The `injectTestingRouterStore()` function should only be used when `provideTestingRouterStore()` is provided in the testing module. It must be called within an injection context (e.g., inside `TestBed.runInInjectionContext()` or within a component/service constructor).
 
 #### Available testing methods

packages/router-component-store/src/lib/testing/inject-testing-router-store.example.spec.ts

@@ -1,19 +1,7 @@
-import { Component, inject } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { RouterStore } from '../router-store';
 import { injectTestingRouterStore, provideTestingRouterStore, TestingRouterStore } from '../testing';
 
-// Example showing the improvement in developer experience
-@Component({
-  standalone: true,
-  selector: 'ngw-example-usage',
-  template: '<p>Route param: {{ routeParam$ | async }}</p>',
-})
-class ExampleComponent {
-  private routerStore = inject(RouterStore);
-  routeParam$ = this.routerStore.selectRouteParam('id');
-}
-
 describe('injectTestingRouterStore - Usage Examples', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({

packages/router-component-store/src/lib/testing/testing-router-store.spec.ts

@@ -488,4 +488,223 @@ describe('injectTestingRouterStore', () => {
     // the injection works by checking the component renders properly
     expect(fixture.nativeElement.querySelector('div')).toBeTruthy();
   });
+});
+
+describe('injectTestingRouterStore - Enhanced Options', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideTestingRouterStore()],
+    });
+  });
+
+  describe('injection options', () => {
+    it('should support optional injection', () => {
+      TestBed.runInInjectionContext(() => {
+        // With optional: false (default behavior)
+        const routerStore = injectTestingRouterStore();
+        expect(routerStore).toBeInstanceOf(TestingRouterStore);
+
+        // With optional: true - should still work since TestingRouterStore is provided
+        const optionalStore = injectTestingRouterStore({ optional: true });
+        expect(optionalStore).toBeInstanceOf(TestingRouterStore);
+      });
+    });
+
+    it('should support host injection option', () => {
+      TestBed.runInInjectionContext(() => {
+        const routerStore = injectTestingRouterStore({ host: true });
+        expect(routerStore).toBeInstanceOf(TestingRouterStore);
+        expect(typeof routerStore.setRouteParam).toBe('function');
+      });
+    });
+
+    it('should support self injection option', () => {
+      TestBed.runInInjectionContext(() => {
+        const routerStore = injectTestingRouterStore({ self: true });
+        expect(routerStore).toBeInstanceOf(TestingRouterStore);
+        expect(typeof routerStore.setUrl).toBe('function');
+      });
+    });
+
+    it('should support skipSelf injection option', () => {
+      TestBed.runInInjectionContext(() => {
+        const routerStore = injectTestingRouterStore({ skipSelf: false });
+        expect(routerStore).toBeInstanceOf(TestingRouterStore);
+        expect(typeof routerStore.reset).toBe('function');
+      });
+    });
+
+    it('should support combined injection options', () => {
+      TestBed.runInInjectionContext(() => {
+        const routerStore = injectTestingRouterStore({
+          optional: false,
+          host: true,
+          self: false,
+        });
+        expect(routerStore).toBeInstanceOf(TestingRouterStore);
+      });
+    });
+  });
+
+  describe('component injector support', () => {
+    @Component({
+      standalone: true,
+      selector: 'ngw-test-with-local',
+      template: '<p>Test Component</p>',
+      providers: [provideTestingRouterStore()], // Local provider
+    })
+    class TestComponentWithLocalStoreComponent {}
+
+    @Component({
+      standalone: true,
+      template: '<ngw-test-with-local></ngw-test-with-local>',
+      imports: [TestComponentWithLocalStoreComponent],
+    })
+    class TestParentComponent {}
+
+    it('should inject from specific component injector', () => {
+      TestBed.configureTestingModule({
+        imports: [TestComponentWithLocalStoreComponent, TestParentComponent],
+      });
+
+      const fixture = TestBed.createComponent(TestParentComponent);
+      fixture.detectChanges();
+
+      const routerStore = injectTestingRouterStore({
+        component: TestComponentWithLocalStoreComponent,
+        fixture,
+      });
+
+      expect(routerStore).toBeInstanceOf(TestingRouterStore);
+      expect(typeof routerStore.setRouteParam).toBe('function');
+
+      // Test that we can use the injected store
+      routerStore.setRouteParam('test', 'value');
+      expect(routerStore).toBeDefined();
+    });
+
+    it('should inject from component with options', () => {
+      TestBed.configureTestingModule({
+        imports: [TestComponentWithLocalStoreComponent, TestParentComponent],
+      });
+
+      const fixture = TestBed.createComponent(TestParentComponent);
+      fixture.detectChanges();
+
+      const routerStore = injectTestingRouterStore({
+        component: TestComponentWithLocalStoreComponent,
+        fixture,
+        options: { host: true },
+      });
+
+      expect(routerStore).toBeInstanceOf(TestingRouterStore);
+      routerStore.setQueryParam('search', 'test');
+      expect(routerStore).toBeDefined();
+    });
+
+    it('should throw error if component not found in fixture', () => {
+      @Component({
+        standalone: true,
+        template: '<p>Different Component</p>',
+      })
+      class DifferentComponent {}
+
+      TestBed.configureTestingModule({
+        imports: [DifferentComponent],
+      });
+
+      const fixture = TestBed.createComponent(DifferentComponent);
+
+      expect(() => {
+        injectTestingRouterStore({
+          component: TestComponentWithLocalStoreComponent, // This component is not in the fixture
+          fixture,
+        });
+      }).toThrow('Component TestComponentWithLocalStoreComponent not found in fixture');
+    });
+  });
+});
+
+describe('injectTestingRouterStore - Real-world Usage', () => {
+  @Component({
+    standalone: true,
+    selector: 'ngw-hero-detail',
+    template: `
+      <div class="hero-detail">
+        <h1>Hero: {{ heroId$ | async }}</h1>
+        <p>Search: {{ search$ | async }}</p>
+      </div>
+    `,
+    imports: [AsyncPipe],
+    providers: [provideTestingRouterStore()], // Local testing store
+  })
+  class HeroDetailComponent {
+    private routerStore = inject(RouterStore);
+    heroId$ = this.routerStore.selectRouteParam('id');
+    search$ = this.routerStore.selectQueryParam('search');
+  }
+
+  @Component({
+    standalone: true,
+    template: '<ngw-hero-detail></ngw-hero-detail>',
+    imports: [HeroDetailComponent],
+  })
+  class AppComponent {}
+
+  it('should work with local router store in real component', () => {
+    TestBed.configureTestingModule({
+      imports: [AppComponent],
+    });
+
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+
+    // Inject from the specific component's injector
+    const routerStore = injectTestingRouterStore({
+      component: HeroDetailComponent,
+      fixture,
+    });
+
+    // Set up test data
+    routerStore.setRouteParam('id', 'superman');
+    routerStore.setQueryParam('search', 'hero');
+
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.textContent).toContain('Hero: superman');
+    expect(compiled.textContent).toContain('Search: hero');
+  });
+
+  it('should demonstrate different injection strategies', () => {
+    TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [provideTestingRouterStore()], // Global testing store
+    });
+
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+
+    // Strategy 1: Use global testing store with injection context
+    TestBed.runInInjectionContext(() => {
+      const globalStore = injectTestingRouterStore();
+      globalStore.setUrl('/global/test');
+      expect(globalStore.url$).toBeDefined();
+    });
+
+    // Strategy 2: Use local component store
+    const localStore = injectTestingRouterStore({
+      component: HeroDetailComponent,
+      fixture,
+      options: { host: true },
+    });
+
+    localStore.setRouteParam('id', 'batman');
+    localStore.setQueryParam('search', 'dark knight');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Hero: batman');
+    expect(fixture.nativeElement.textContent).toContain('Search: dark knight');
+  });
 });