Ufdjrw

I have written many unit tests to test observables, but for some reason, this test is not working like the other ones I've written, but I dont see what the issue is.

I would like a mock for ChangePasswordFacade.successful$ to return an Observable that returns true. Even though I have previously used the mocking strategy below, it's not working. I tried injecting ChangePasswordFacade into the test. I tried using a mock successful$ function in the useValue of the TestBed provider. And I tried the approach below. They all yield sucessful$ as false. How can I mock this out differently to return true?

import ComponentFixture, TestBed from '@angular/core/testing';
import PasswordChangeModalComponent from './password-change-modal.component';
import ReactiveFormsModule from '@angular/forms';
import PasswordChangeFormComponent from '../../..';
import DefaultPopoverComponent from '@bis-angular/shared-components/pattern-library';
import Store, StoreModule from '@ngrx/store';
import 
 ChangePasswordFacade,
 UserInformationFacade,
 changePasswordInitialState,
 CHANGEPASSWORD_FEATURE_KEY,
 changePasswordReducer
 from '@bis-angular/users';
import configureTestSuite from 'ng-bullet';
import of from 'rxjs';

describe('PasswordChangeModalComponent', () => 
 let component: PasswordChangeModalComponent;
 let fixture: ComponentFixture<PasswordChangeModalComponent>;

 const childDefaultPopoverComponent = jasmine.createSpyObj('DefaultPopoverComponent', ['hideModal', 'showModal']);
 const childPasswordChangeFormComponent = jasmine.createSpyObj('PasswordChangeFormComponent', ['setFormControlsToEmpty']);

 const changePasswordFacadeSpy = jasmine.createSpyObj('ChangePasswordFacade', ['resetState']);

 configureTestSuite(() => 
 TestBed.configureTestingModule(
 imports: [
 ReactiveFormsModule,
 StoreModule.forRoot(),
 StoreModule.forFeature(CHANGEPASSWORD_FEATURE_KEY, changePasswordReducer, 
 initialState: changePasswordInitialState
 )
 ],
 declarations: [PasswordChangeFormComponent, DefaultPopoverComponent, PasswordChangeModalComponent],
 providers: [Store, UserInformationFacade, ChangePasswordFacade]
 );
 );

 beforeEach(() => 
 fixture = TestBed.createComponent(PasswordChangeModalComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
 component.defaultPopoverComponent = childDefaultPopoverComponent;

 component.watchSuccessful = unsubscribe: () => ;
 spyOn(component.watchSuccessful, 'unsubscribe');
 const service = TestBed.get(ChangePasswordFacade);
 spyOn(service, 'successful$').and.returnValue(of(true));
 );


 describe('showPasswordChangeModal function ', () => 
 it('should call showModal and then not hide if not successful ', () => 
 spyOn(component, 'hidePasswordChangeModal');
 component.successful$.subscribe((successful: boolean) => 
 expect(component.hidePasswordChangeModal).toHaveBeenCalled();
 expect(changePasswordFacadeSpy.resetState).toHaveBeenCalled();
 expect(component.watchSuccessful.unsubscribe).toHaveBeenCalled();
 );
 component.showPasswordChangeModal();
 expect(childDefaultPopoverComponent.showModal).toHaveBeenCalled();
 );
 );


);

import Injectable from '@angular/core';
import select, Store from '@ngrx/store';
import ChangePasswordPartialState from './change-password.reducer';
import changePasswordQuery from './change-password.selectors';
import ChangePassword, ChangePasswordResetState from './change-password.actions';
import NewPassword from '@bis-angular/users';

@Injectable()
export class ChangePasswordFacade 
 successful$ = this.store.pipe(select(changePasswordQuery.getSuccessful));

 initiated$ = this.store.pipe(select(changePasswordQuery.getInitiated));

 constructor(private store: Store<ChangePasswordPartialState>) 

 changePassword(newPassword: NewPassword, userId: string) 
 this.store.dispatch(new ChangePassword(newPassword, userId));
 

 resetState() 
 this.store.dispatch(new ChangePasswordResetState());
 

here is how I did it: I used the store to dispatch an action to change successful$ to true. it's now an integration test at this point, not a unit test.

import ChangePasswordFacade, UserInformationFacade from '@bis-angular/users';
import ComponentFixture, TestBed from '@angular/core/testing';
import StoreModule, Store from '@ngrx/store';
import PasswordChangeModalComponent, PasswordChangeFormComponent from '../../..';
import * as fromFeature from '@bis-angular/users';
import ReactiveFormsModule from '@angular/forms';
import configureTestSuite from 'ng-bullet';
import DefaultPopoverComponent from '@bis-angular/shared-components/pattern-library';

describe('PasswordChangeModalComponent', () => 
 let component: PasswordChangeModalComponent;
 let fixture: ComponentFixture<PasswordChangeModalComponent>;
 let store: Store<fromFeature.ChangePasswordState>;

 const childDefaultPopoverComponent = jasmine.createSpyObj('DefaultPopoverComponent', ['hideModal', 'showModal']);
 const childPasswordChangeFormComponent = jasmine.createSpyObj('PasswordChangeFormComponent', ['setFormControlsToEmpty']);

 configureTestSuite(() => 
 TestBed.configureTestingModule(
 imports: [
 StoreModule.forRoot(),
 ReactiveFormsModule,
 StoreModule.forFeature(fromFeature.CHANGEPASSWORD_FEATURE_KEY, fromFeature.changePasswordReducer, 
 initialState: fromFeature.changePasswordInitialState
 )
 ],
 declarations: [PasswordChangeModalComponent, DefaultPopoverComponent, PasswordChangeFormComponent],
 providers: [ChangePasswordFacade, UserInformationFacade]
 );
 );

 beforeEach(() => 
 store = TestBed.get(Store);
 spyOn(store, 'dispatch').and.callThrough();

 fixture = TestBed.createComponent(PasswordChangeModalComponent);
 component = fixture.componentInstance;
 component.defaultPopoverComponent = childDefaultPopoverComponent;
 component.watchSuccessful = unsubscribe: () => ;

 spyOn(component.watchSuccessful, 'unsubscribe');
 fixture.detectChanges();
 );

 it('should be created', () => 
 expect(component).toBeTruthy();
 );


 describe('showPasswordChangeModal function ', () => 
 it('should call showModal and then hide if successful ', () => 
 spyOn(component, 'hidePasswordChangeModal');
 spyOn(component.changePasswordService, 'resetState');
 const action = new fromFeature.ChangePasswordSuccessful();

 store.dispatch(action);
 component.showPasswordChangeModal();

 component.successful$.subscribe((successful: boolean) => 
 expect(component.hidePasswordChangeModal).toHaveBeenCalled();
 expect(component.changePasswordService.resetState).toHaveBeenCalled();
 );
 expect(childDefaultPopoverComponent.showModal).toHaveBeenCalled();
 );
 );
);

Since, you want to access successful$ which is defined at class level of ChangePasswordFacade.

something like:

export class ChangePasswordFacade
 successful$:observable // ... something like this

You should try useValue:

 configureTestSuite(() => 
 TestBed.configureTestingModule(
 imports: [
 ReactiveFormsModule,
 StoreModule.forRoot(),
 StoreModule.forFeature(CHANGEPASSWORD_FEATURE_KEY, changePasswordReducer, 
 initialState: changePasswordInitialState
 )
 ],
 declarations: [PasswordChangeFormComponent, DefaultPopoverComponent, PasswordChangeModalComponent],
 providers: [Store, UserInformationFacade, 
 provide: ChangePasswordFacade , useValue: 
 
 successful$ : of(true)
 
 '
 ]
 );
 );