ngOnInit 내에서 구독자를 점화하지 않는 각도 재스민 테스트

ngOnInit 내에서 구독자를 점화하지 않는 각도 재스민 테스트

기본 구성 요소 클래스가 있으며 ngOnInit 내에서 서비스 콜에 가입함

ngOnInit() {
    this.activityService.getActivities().subscribe(activities => {
        console.log('inside sub');
        this.recentActivities = activities;
    });
}

그래서 나는 이 구독이 실행되는지 알아보기 위해 이 console.log를 포함시켰다.

내 시험에서 나는 내가 필요로 하는 데이터의 관찰 가능한 컬렉션을 반환하기 위해 이 활동 서비스 방법을 감시한다.그리고 시험에서, 나는 모든 고정장치를 한다.detectChanges() 거래를 감지하고 내 배열이 길이 1이 될 것으로 예상한다.

fit('should populate recent activities', () => {
    const activities = [new ActivityBuilder()
        .withId('1').withRecentActivityActionId(RecentActivityActionType.Created).build()
    ];
    spyOn(activityService, 'getActivities').and.returnValue(of(activities));

    fixture.detectChanges();
    fixture.whenStable().then(() => {
        fixture.detectChanges();
    });
    fixture.detectChanges();

    expect(component.recentActivities.length).toBe(1);
});

Angular 문서에 따르면, 그들은 거의 같은 일을 한다. 나는 심지어 가짜 Async 접근법을 시도했지만 소용이 없었다.내가 뭘 놓쳤지?구독 블록이 실행되지 않는 이유는?

몇 시간 동안 가짜 Async를 시도하고, 서비스에 대한 모의수업을 하고, 다양한 진드기()를 부르고, 수십 개의 다른 게시물과 약간 다른 접근방식을 취하자, 범인은 한 줄을 더하는 것으로 귀결되었다.component.ngOnInit();.

보아하니, 그러는 동안fixture.detectChanges()확실히 ngOnInit에 전화해서 관찰할 수 있는 추위를 유지하고 있었다.내가 전화할 때fixture.detectChanges()그것은 관찰할 수 있는 사람의 구독에 들어가지 않을 것이다.덧붙이자마자component.ngOnInit()관찰할 수 있는 것이 뜨거워지고 구독자 내부의 코드가 실행되어 콘솔 로그가 인쇄되는 것을 볼 수 있었다.이상하게도, 이것은 다음과 같은 것을 만들었다.fixture.detectChanges()통화는 또한 각각의 후속 통화에 대한 가입 코드로 뛰어든다.

여기 내 스펙 파일의 단순화된 버전이 있는데, 이것이 미래의 같은 문제를 가진 모든 사람들에게 도움이 되기를 바란다.가짜Async와 동기화 존은 여전히 시험에 통과했고, 가짜 Async 존 안에서 적어도 진드기()가 필요했을 것이라고 짐작했지만, 그럴 필요는 없었다.

describe('RecentActivityComponent', () => {
let component: RecentActivityComponent;
let fixture: ComponentFixture<RecentActivityComponent>;
let activityService: ActivityService;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [AccordionModule, FontAwesomeModule, HttpClientTestingModule],
        declarations: [ RecentActivityComponent ],
        providers: [AccordionConfig, ActivityService]
    }).compileComponents();
}));

beforeEach(async () => {
    fixture = TestBed.createComponent(RecentActivityComponent);
    component = fixture.componentInstance;
    activityService = TestBed.get(ActivityService);
});

it('should populate recent activities', fakeAsync( () => {
    const activities = [new ActivityBuilder()
        .withId('1').withRecentActivityActionId(RecentActivityActionType.Created).build()
    ];
    spyOn(activityService, 'getActivities').and.returnValue(of(activities));
    component.ngOnInit();
    expect(component.recentActivities.length).toBe(1);
}));

it('should populate recent activities', () => {
    const activities = [new ActivityBuilder()
        .withId('1').withRecentActivityActionId(RecentActivityActionType.Created).build()
    ];
    spyOn(activityService, 'getActivities').and.returnValue(of(activities));
    component.ngOnInit();
    expect(component.recentActivities.length).toBe(1);
});

});

참조URL: https://stackoverflow.com/questions/53290899/angular-jasmine-test-not-firing-subscribe-inside-ngoninit