test: fix testing errors

npm/ng-packs/packages/core/src/lib/tests/replaceable-route-container.component.spec.ts

@@ -5,6 +5,7 @@ import { Store } from '@ngxs/store';
 import { of, Subject, BehaviorSubject } from 'rxjs';
 import { ReplaceableRouteContainerComponent } from '../components/replaceable-route-container.component';
 import { ReplaceableComponentsState } from '../states';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 
 @Component({
   selector: 'abp-external-component',
@@ -30,16 +31,15 @@ const activatedRouteMock = {
 };
 
 describe('ReplaceableRouteContainerComponent', () => {
-  const selectResponse = new BehaviorSubject(undefined);
-  const mockSelect = jest.fn(() => selectResponse);
-
   let spectator: SpectatorHost<ReplaceableRouteContainerComponent>;
+  const get$Res = new BehaviorSubject(undefined);
+  const replaceableComponents = spectator.inject(ReplaceableComponentsService);
+  const spy = jest.spyOn(replaceableComponents, 'get$');
+  spy.mockReturnValue(get$Res as any);
+
   const createHost = createHostFactory({
     component: ReplaceableRouteContainerComponent,
-    providers: [
+    providers: [{ provide: ActivatedRoute, useValue: activatedRouteMock }],
-      { provide: ActivatedRoute, useValue: activatedRouteMock },
-      { provide: Store, useValue: { select: mockSelect } },
-    ],
     declarations: [ExternalComponent, DefaultComponent],
     entryComponents: [DefaultComponent, ExternalComponent],
   });
@@ -55,11 +55,11 @@ describe('ReplaceableRouteContainerComponent', () => {
   });
 
   it("should display the external component if it's available in store.", () => {
-    selectResponse.next({ component: ExternalComponent });
+    get$Res.next({ component: ExternalComponent });
     spectator.detectChanges();
     expect(spectator.query('p')).toHaveText('external');
 
-    selectResponse.next({ component: null });
+    get$Res.next({ component: null });
     spectator.detectChanges();
     expect(spectator.query('p')).toHaveText('default');
   });

npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts

@@ -4,6 +4,8 @@ import { Store } from '@ngxs/store';
 import { Subject } from 'rxjs';
 import { ReplaceableTemplateDirective } from '../directives';
 import { ReplaceableComponents } from '../models';
+import { Router } from '@angular/router';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 
 @Component({
   selector: 'abp-default-component',
@@ -48,15 +50,17 @@ class ExternalComponent {
 }
 
 describe('ReplaceableTemplateDirective', () => {
-  const selectResponse = new Subject();
-  const mockSelect = jest.fn(() => selectResponse);
-
   let spectator: SpectatorDirective<ReplaceableTemplateDirective>;
+  const get$Res = new Subject();
+
+  const replaceableComponents = spectator.inject(ReplaceableComponentsService);
+  const spy = jest.spyOn(replaceableComponents, 'get$');
+  spy.mockReturnValue(get$Res as any);
   const createDirective = createDirectiveFactory({
     directive: ReplaceableTemplateDirective,
-    providers: [{ provide: Store, useValue: { select: mockSelect } }],
     declarations: [DefaultComponent, ExternalComponent],
     entryComponents: [ExternalComponent],
+    mocks: [Router],
   });
 
   describe('without external component', () => {
@@ -72,7 +76,7 @@ describe('ReplaceableTemplateDirective', () => {
         `,
         { hostProps: { oneWay: { label: 'Test' }, twoWay: false, twoWayChange, someOutput } },
       );
-      selectResponse.next(undefined);
+      get$Res.next(undefined);
       const component = spectator.query(DefaultComponent);
       spectator.directive.context.initTemplate(component);
       spectator.detectChanges();
@@ -114,7 +118,7 @@ describe('ReplaceableTemplateDirective', () => {
         `,
         { hostProps: { oneWay: { label: 'Test' }, twoWay: false, twoWayChange, someOutput } },
       );
-      selectResponse.next({ component: ExternalComponent, key: 'TestModule.TestComponent' });
+      get$Res.next({ component: ExternalComponent, key: 'TestModule.TestComponent' });
     });
 
     afterEach(() => twoWayChange.mockClear());
@@ -150,7 +154,7 @@ describe('ReplaceableTemplateDirective', () => {
       const externalComponent = spectator.query(ExternalComponent);
       spectator.setHostInput({ oneWay: 'test' });
       externalComponent.data.inputs.twoWay = true;
-      selectResponse.next({ component: null, key: 'TestModule.TestComponent' });
+      get$Res.next({ component: null, key: 'TestModule.TestComponent' });
       spectator.detectChanges();
       const component = spectator.query(DefaultComponent);
       spectator.directive.context.initTemplate(component);
@@ -161,14 +165,14 @@ describe('ReplaceableTemplateDirective', () => {
     });
 
     it('should reset default component subscriptions', () => {
-      selectResponse.next({ component: null, key: 'TestModule.TestComponent' });
+      get$Res.next({ component: null, key: 'TestModule.TestComponent' });
       const component = spectator.query(DefaultComponent);
       spectator.directive.context.initTemplate(component);
       spectator.detectChanges();
       const unsubscribe = jest.fn(() => {});
       spectator.directive.defaultComponentSubscriptions.twoWayChange.unsubscribe = unsubscribe;
 
-      selectResponse.next({ component: ExternalComponent, key: 'TestModule.TestComponent' });
+      get$Res.next({ component: ExternalComponent, key: 'TestModule.TestComponent' });
       expect(unsubscribe).toHaveBeenCalled();
     });
   });