How to mock Rxjs Subject in Angular

Question

I have a centralized DataStore to hold my report connections. So that I can manage report connections events like onShow, onError and onCancel; so the implementer doesn't have to. Anyways. How can I mock the SomeService.doSomething function so that it returns my connection object and them emits on the onShow Subject. Please look at my should resolve test data test. How can I mock this appropriately.

mockSomeService.doSomething.and.callFake(() => {
  const response = new ReportManagerConnection();
  response.onShow.next({ data: [ {id: 1} ]})
  return response
})

Here is my test.

describe('SomeComponent', () => {
  let component: SomeComponent;
  let fixture: ComponentFixture<SomeComponent>;
  beforeEach(async(() => {
    const mockSomeService: jasmine.SpyObj<SomeService> = jasmine.createSpyObj<SomeService>(
      'SomeService',
      ['doSomething']
    );
    mockSomeService.doSomething.and.callFake(() => {
      const response = new ReportManagerConnection();
      response.onShow.next({ data: [ {id: 1} ]})
      return response
    })
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [SomeComponent],
      providers: [
        { provide: SomeService, useValue: mockSomeService },
      ]
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should resolve test data', fakeAsync(() => {
    component.loadData()
    tick()
    expect(component.data.length).toBeGreaterThan(0)
  }));
});

Here is my code

export class ReportManagerConnection {
  onShow: Subject<any>
  onFinish: Subject<any>
  onCancel: Subject<any>
  onShow: Subject<any>
  onStart: ReplaySubject<any>
  onError: ReplaySubject<any>
  constructor() {
    this.onFinish = new Subject()
    this.onCancel = new Subject()
    this.onShow = new Subject()
    this.onStart = new ReplaySubject()
    this.onError = new ReplaySubject()
  }
}

@Injectable({
    providedIn: 'root'
})
export class ReportStoreService {
  connections: Array<ReportManagerConnection> = []
  constructor( public http: HttpClient ) { }
  send(){
    const connection = new ReportManagerConnection()
    connections.push(connection)
    connection.onShow.asObservable().subscribe((c)=>{
        alert('Report Shown')
    })
    return connection
  }
}

@Injectable()
export class SomeService {
  constructor( public http: HttpClient, public _ReportStoreService: ReportStoreService ) { }
  doSomething(){
    const connection = this._ReportStoreService.send()
    this.http.get('/api/test').subscribe(c=>{
        connection.onShow.next({ data: c })
    })
    return connection
  }
}

@Component({
  selector: 'some-component',
  templateUrl: './some-component.component.html',
})
export class SomeComponent {
  public data = []
  constructor(public _SomeService: SomeService) {}
  loadData(){
    const connection = _SomeService.doSomething()
    connection.onShow.asObservable().subscribe((c)=>{
        this.data = c.data
    })
  }
}

score -1 · Answer 1 · answered Feb 27 '21 at 19:47

Try to simplify the test with a help of a mocking library. For example, such as ng-mocks.

a sandbox with the solution: https://codesandbox.io/s/ecstatic-cache-lv8gk?file=/src/test.spec.ts

describe('SomeComponent', () => {
  // configuring TestBed with one line.
  beforeEach(() => MockBuilder(SomeComponent).mock(SomeService));

  it('should resolve test data', () => {
    // creating a mock instance of ReportManagerConnection
    // with a preconfigured emit on subscribe to onShow
    const reportManagerConnection = MockService(ReportManagerConnection, {
      onShow: new BehaviorSubject({ data: [ {id: 1} ]}),
    });

    // customizing a mock instance of SomeService
    MockInstance(SomeService, 'doSomething', () => reportManagerConnection);

    // rendering the component
    const component = MockRender(SomeComponent).point.componentInstance;

    // asserting
    expect(component.data.length).toEqual(0);
    component.loadData();
    expect(component.data.length).toBeGreaterThan(0);
  });
});

score -1 · Answer 2 · answered Mar 01 '21 at 05:24

I answered a similar question else-where. Please check this way of mocking-data for the test cases:

// In your component.spec file, 

@Injectable()
class MockService extends RealService {
  yourOriginalServiceMethod() {
    return of(mockData);
    // Here mockData can be any mocked-data. It should be of whatever the type your 
       original method in the service returns. Like an object 
   // 'of' is the RXJS operator. It will turn your mockData to an Observable so that when you run the test case, it will be subscribed without any issue. 
  }
}
  
beforeEach(() => {
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;

  realService = TestBed.get(RealService); // this is important to test the subscription error scenario
});

describe('AppComponent', () => { // 2
  beforeEach(async(() => { // 3
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [
        {
           provide: MockService,
           useClass: RealService
        }
      ]
    }).compileComponents();
  }));

// Now your test case,  

it("component #yourComponentMethod() method for successful subscription",() => {
  spyOn(component, "yourComponentMethod").and.callThrough();
  component.yourComponentMethod();
  expect(component.yourComponentMethod).toHaveBeenCalled();

  // THis method will clear the successful subscription scenario
});


it("component #yourComponentMethod() method for failed subscription",() => {

  // This line will call the service and instead of returning mockData, it will fail it.
  spyOn(realService, 'yourMethodName').and.returnValue(throwError({status: 500}));
  
  // Rest is the same
  spyOn(component, "yourComponentMethod").and.callThrough();
  component.yourComponentMethod();
  expect(component.yourComponentMethod).toHaveBeenCalled();

  // THis method will clear the failed subscription scenario
});

How to mock Rxjs Subject in Angular

2 Answers2