如何在订阅中测试二传手？有角度的答案

【问题标题】：How to test setter in subscribe? angular如何在订阅中测试二传手？有角度的
【发布时间】：2019-12-06 10:26:59
【问题描述】：

我有这个代码：

    public ngOnInit(): void {
    this.searchControl.valueChanges.pipe(debounceTime(300), this.takeUntilDestroyed()).subscribe(query => {
      this.officeService.searchQuery = query;
    });
  }

如何覆盖searchQuery setter？

我写了通过的测试，但没有写覆盖率设置器。

我的测试：

it('should searchQuery called ', () => {
    const { component, service } = setup();
    const query: string = 'test';
    const fixture: ComponentFixture<SearchComponent> = TestBed.createComponent(SearchComponent);
    const input = fixture.debugElement.query(By.css('input'));
    const inputEvent = new Event('input');
    const spiez: jasmine.Spy = spyOnProperty(service, 'searchQuery', 'set');

    component.searchControl.valueChanges.subscribe((tmp: string) => expect(spiez).toHaveBeenCalledWith(tmp));
    input.nativeElement.value = 'newString';
    input.nativeElement.dispatchEvent(inputEvent);

    fixture.detectChanges();
  });

我使用 fakeAsync 和 tick 进行的测试：

    const { component, service } = setup();
    const query: string = 'test';
    const fixture: ComponentFixture<SearchComponent> = TestBed.createComponent(SearchComponent);
    const input = fixture.debugElement.query(By.css('input'));
    const inputEvent = new Event('input');
    const spiez: jasmine.Spy = spyOnProperty(service, 'searchQuery', 'set');

    component.searchControl.valueChanges.subscribe((tmp: string) => expect(spiez).toHaveBeenCalledWith(tmp));
    input.nativeElement.value = 'newString';
    input.nativeElement.dispatchEvent(inputEvent);

    fixture.detectChanges();
    tick(300);
  }));

【问题讨论】：

通过在 fakeAsync 测试中修改搜索控件的值并勾选 300 毫秒：angular.io/guide/testing#async-test-with-fakeasync
@JBNizet 检查编辑。像这样？
没有。在您的测试中订阅是没有用的。您已经在您的组件中进行了订阅，并且该订阅应该在 300 毫秒后 设置属性。因此，您应该在调用 tick(300) 之后检查是否设置了属性。

标签： angular testing jasmine setter subscribe

【解决方案1】：

让我们试试这个：

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

      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ SearchComponent ]
        })
        .compileComponents();
      }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it('should test value changes', () => {
        const testValue = 'test';
        const input = fixture.debugElement.query(By.css('input'));
        const spiez: jasmine.Spy = spyOnProperty(service, 'searchQuery');
        tick();
        fixture.detectChanges()
        input.nativeElement.value = testValue;
        dispatchEvent(input.nativeElement, "input");
        tick();
        fixture.detectChanges();
        expect(spiez).toHaveBeenCalledWith(testValue))
      }));

【讨论】：

我有一个错误：Error: Expected spy searchQuery to have been called with: [ 'test' ] but it was never called.
在那里我更新了很多。请现在尝试看看它是否有效。
同样的错误。我尝试了一切，但我不知道：D
别担心，我们会继续努力直到测试成功！！！我刚刚更新了我的答案，现在试试吧