RXJS Observables and how to mock them

[claridgicus]

Subject

A simple example for implementing an RXJS observable

Description

Super common use case in Angular is a component that subscribes to an observable from a service to react to changes in the applications state, could that be documented in the angular examples please as the current documentation is pretty limited to the most basic examples.

Heres an example from my own testing suite.
In my current code example below, the first value is emitted by the mock and the observable in the component correctly reflects the state.

describe('FilterOpenComponent', () => {
	let config: any
	let activeFacetSubject: ReplaySubject<any> 
	beforeEach(() => {
		activeFacetSubject = new ReplaySubject<string[]>(1) 
		const mock: MountConfig<FilterOpenComponent> = {
			imports: [],
			providers: [
				{
					provide: UtilityService,
					useValue: {
						activeFacetObservable: activeFacetSubject.asObservable(), 
					},
				},
				SessionStorageService,
			],
			declarations: [FilterOpenComponent],
		}
		config = mock
	})

	it('should update active filter count when UtilityService emits new data', () => {
		cy.mount(FilterOpenComponent, config)
		activeFacetSubject.next(['test'])
		cy.get('.filter-open .count').should('contain', '1')
	})
})

But if I were to chain them it would not work, so my implementation is clearly not up to scratch

	it('should update active filter count when UtilityService emits new data', () => {
		cy.mount(FilterOpenComponent, config)
		activeFacetSubject.next(['test'])
		cy.get('.filter-open .count').should('contain', '1')
		activeFacetSubject.next(['test','reactivity'])
		cy.get('.filter-open .count').should('contain', '2')
	})