@ContentChild的角度單元測試失敗

Question

我在Angular Material菜單組件上關閉了一個自定義菜單，但我想對其進行測試，但是它一直失敗並輸出“ TypeError：無法讀取未定義的屬性'closeMenu'”

規格文件（底部測試）：

@Component({
  selector: 'app-test',
  template: `
    <app-header-menu>
      <button [matMenuTriggerFor]="test">Test</button>
      <mat-menu #test="matMenu">menu content</mat-menu>
    </app-header-menu>
  `
})
class TestComponent {}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent, HeaderMenuComponent ],
      imports: [
        MatMenuModule
      ]
    })
    .compileComponents();
  }));

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

  it ('should close on click', () => {
    document.dispatchEvent(new MouseEvent('click'));
    expect(fixture.debugElement.query(By.css('app-header-menu')).nativeElement.trigger.closeMenu()).toHaveBeenCalled();
  });
});

組件文件：

export class HeaderMenuComponent {
  @ContentChild(MatMenuTrigger) trigger: MatMenuTrigger;

  @HostListener('document:click', ['$event'])
  onClick = event => {
    if (this.trigger && this.trigger.menuOpen && !this.elRef.nativeElement.contains(event.target)) {
      this.trigger.closeMenu();
    }
  }
}

有人知道我在做什么錯嗎？

Answer 1

如果要測試@ContentChild(ren) ，則使用包裝器組件是正確的方法。

事實是，要測試觸發器是否關閉，您需要先打開它，然后才能實際觸發文檔上的click事件。

PFB我的測試設置和測試本身。 我還沒有發現為什么單擊該按鈕后無法打開該mat-menu 。 我直接使用內容子級觸發了openMenu。

從某種意義上說，恕我直言，無需測試角材的功能性，因此無論如何，直接觸發菜單對於您的測試用例來說應該沒問題。

我所做的不同，以測試設置中，我使用componentInstance從具有MatMenuTrigger組件，因為本地的HtmlElement不具備觸發也沒有closeMenu方法窺探。

這是一個堆疊閃電戰 ：

---

component.spec.ts

@Component({
    selector: 'test-cmp',
    template: `<app-component>
        <button [matMenuTriggerFor]="test">Test</button>
        <mat-menu #test="matMenu">menu content</mat-menu>
    </app-component>`,
  })
  class TestWrapperComponent { }


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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent, TestWrapperComponent],
            providers: [],
            imports: [MatMenuModule, BrowserAnimationsModule],
            schemas: []
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TestWrapperComponent);
        component = fixture.debugElement.children[0].componentInstance;
    });

    it('should be created', () => {
      fixture.detectChanges();
      expect(component).toBeTruthy();
    });

    it ('should close on click', fakeAsync(() => {
    fixture.detectChanges();
    const closeMenueSpy: jasmine.Spy = spyOn(component.trigger, 'closeMenu');

    // Not too sure why this menu doesn't open on click
    // const debugElem: DebugElement = fixture.debugElement.query(By.css('button'));
    // debugElem.triggerEventHandler('click', null);
    component.trigger.openMenu();
    tick();

    expect(component.trigger.menuOpen).toBeTruthy();

    document.dispatchEvent(new MouseEvent('click'));
    tick();

    expect(closeMenueSpy).toHaveBeenCalled();
  }));
});