Как вызвать событие в угловом приложении для модульного тестирования?

Question

Я запускаю модульное тестирование в угловом режиме, я хочу вызвать событие щелчка, при нажатии на него открывается выпадающий список номеров клиентов.Я хочу вызвать это событие в моем модульном тесте. Если это событие успешно запущено, я могу обновить информацию о клиенте, соответствующую индексу нажатой кнопки.Я приложил необходимый код для справки.Пожалуйста, дайте мне знать, как вызвать событие клика?

//template.html 
<mat-menu #menuFilter="matMenu">
    <button *ngFor="let customer of customers; let i = index" (click)="onCustomerChange(i)" mat-menu-item class="selectCustomerData">{{customer.licenseownerid}}</button>
 </mat-menu>

//angular generated code
<div class="mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c10-1 mat-menu-after
 mat-menu-below ng-star-inserted mat-elevation-z2" role="menu" tabindex="-1" ng-reflect-klass="mat-menu-panel" 
 ng-reflect-ng-class="[object Object]" style="transform-origin: left top;">
    <div class="mat-menu-content">
          <button class="selectCustomerData mat-menu-item ng-star-inserted" mat-menu-item="" role="menuitem" tabindex="0" aria-disabled="false">0LPT_id0306
            <div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]">
            </div>
          </button>
          <button class="selectCustomerData mat-menu-item ng-star-inserted" mat-menu-item="" role="menuitem" tabindex="0" aria-disabled="false">0LPT_id03061
           <div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]">
           </div>
          </button>
       </div>
...and so on
</div>

//component.ts
 onCustomerChange(i) {
    this.customerNumber = this.customers[i].licenseownerid;
    this.customerName = this.customers[i].licenseownername;
}

Answer 1

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

Я бы предпочел использовать NO_ERRORS_SCHEMA в настройках теста и запускать только события нажатия ваших собственных кнопок:

Спецификации будут выглядеть примерно так:

@Directive({
  selector: 'mat-menu',
  exportAs: 'matMenu'
})
class DirectiveStub {
}

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent, DirectiveStub],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .compileComponents();
    }));

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

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

    it('click on second button', fakeAsync(() => {
      component.customers = [
        {licenseownerid: 'ID_1', licenseownername: 'NAME_1'},
        {licenseownerid: 'ID_2', licenseownername: 'NAME_2'}
        ]
      fixture.detectChanges();

      const buttonDebugElems: DebugElement[] = fixture.debugElement.queryAll(By.css('button'));

      expect(buttonDebugElems.length).toEqual(3);

      buttonDebugElems[2].triggerEventHandler('click', null);
      tick();

      expect(component.customerName).toEqual('NAME_2');
      expect(component.customerNumber).toEqual('ID_2');
    }));
});

Важно отметить

К сожалению, необходимо заглушить директивный угловой материал, используемый для его меню. Это пустая (не экспортируемая) директива вверху спецификации. Если у вас есть больше компонентов с этим меню, которое вы хотели бы протестировать, возможно, было бы целесообразно перенести эту директиву в один файл, помещенный в отдельную папку, например 'test', чтобы вы могли повторно использовать эту директиву в своих тестах, но они не включены в ваше приложение.

Вот рабочий пример: stackblitz