Тестирование угловой службы подписки / отказа от подписки внутри компонента

Question

У меня есть этот класс компонента страницы, который просто вызывает службу под нагрузкой, которая заполняет массив внутри этой службы. Какой лучший способ проверить функциональность подписки и отписки для этого компонента?

export class HomeComponent implements OnInit, OnDestroy  {
    private destroySubject$: Subject<void> = new Subject();

    constructor(private accountsService: AccountsService) {}

    ngOnInit(): void {
        this.accountsService.getLoginAndAccountsList$()
        .pipe(takeUntil(this.destroySubject$))
        .subscribe(() => { /* do nothing */ }, (error: Error) => {
            console.error('Unable to get the list of accounts!', error);
        });
    }

    ngOnDestroy(): void {
        this.destroySubject$.next();
    }
}

Мои тесты прямо сейчас:

describe('Page Component: Home', () => {
    let component: HomeComponent;
    let fixture: ComponentFixture<HomeComponent>;
    let debugEl: DebugElement;
    let accountsService: AccountsService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ HttpClientTestingModule,],
            providers: [ AccountsService ],
            declarations: [ HomeComponent]
        }).compileComponents();
        accountsService = TestBed.get(AccountsService);
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(HomeComponent);
        component = fixture.componentInstance;
        debugEl = fixture.debugElement;
    });

    it('should call the accountService to fetch the logins & accounts upon page load', async(() => {
        spyOn(accountsService, 'getLoginAndAccountsList$');
        fixture.detectChanges();
        expect(accountsService.getLoginAndAccountsList$).toHaveBeenCalled();
    }));

    it('should kill the accountService subscription upon page destruction', async(() => {
        spyOn(accountsService, 'getLoginAndAccountsList$');
        fixture.detectChanges();
        component.ngOnDestroy();
        expect(????).toHaveBeenCalled();
    }));
...

Первый тест работает прямо сейчас, но второй - нет, так как я не уверен, что мне нужно там тестировать. как я могу проверить, что подписка больше не активна, когда вызывается ngOnDestroy?

Answer 1

В общем, это правильный вопрос, поэтому вот мой ответ: Вы можете проверить, является ли подписка недействительной, следя за следующим методом наблюдателя. И убедитесь, что он больше не вызывается, когда наблюдаемое излучает новые значения.

Позвольте мне уточнить:

В вашем компоненте где-то есть:

obs$.pipe(
  takeUntil(destroy$$)
).subscribe(handleNewValues)

В спецификации у вас должно быть что-то вроде этого:

// we need to mock the service so that we can control the values emited by the observable
let newValues = Subjects(); 
let mockService = { getLoginAndAccountsList$: () => newValues.asObservable() }

TestBed.configureTestingModule({
            imports: [ HttpClientTestingModule,],
            providers: [ {provide: AccountsService, useValue: mockService  }], // this is one way of mocking the service
            declarations: [ HomeComponent]
        }).compileComponents();

// in the test
const spy = spyOn(comp, 'handleNewValues');
comp.ngOnDestroy(); // cancels the subscription
newValues.next('test');

expect(spy).not.toHaveBeenCalled();

В описываемом вами конкретном случае использования я не вижу необходимости вообще использовать наблюдаемые, потому что вы не используете значения, излучаемые наблюдаемой. Ваш сервис может иметь заполненную функцию, которая вызывается в ngOnInit