Question

我有一个嵌入Angular Material ngOnInit() { this.service.getContent(); }元素的Component。

在我正在编写的测试中，我需要模拟对某个选项的选择，并确保与该MatSelect元素关联的selectionChange Observable实际上触发。

到目前为止，我的代码是

MatSelect

但是不幸的是，这没有使const mySelect: MatSelect = fixture.nativeElement.querySelector('#mySelect'); mySelect.value = 'new value';发出通知，因此无法进行我的测试。关于如何执行此操作的任何想法都非常欢迎。

Answer 1

我只需通过MatSelect访问要测试的组件中的@ViewChild，以便可以在单元测试中轻松使用它。

/** For testing purposes */
@ViewChild(MatSelect) public matSelect: MatSelect;

在您的测试中，我将通过_selectViaInteraction()选择所需的选项，这模拟了该选项已由用户选择。

it('test selectionChange', () => {    
  // make sure the mat-select has the expected mat-options
  const options: MatOption[] = component.matSelect.options.toArray();
  expect(options.length).toBe(3);
  expect(options[0].viewValue).toBe('Steak');
  expect(options[1].viewValue).toBe('Pizza');
  expect(options[2].viewValue).toBe('Tacos');

  // set up a spy on the function that will be invoked via selectionChange
  const spy = spyOn(component, 'onChange').and.callThrough();
  expect(spy).not.toHaveBeenCalled();

  // select the option
  options[1]._selectViaInteraction();
  fixture.detectChanges();

  // selectionChange was called and the option is now selected    
  expect(spy).toHaveBeenCalledTimes(1);
  expect(options[1].selected).toBe(true);
});

您可以找到一个堆叠闪电战 here。

Answer 2

要获取MatSelect实例，您必须在灯具上使用DebugElement并使用By.directive访问指令：

const mySelect = fixture.debugElement.query(By.directive(MatSelect));
mySelect.componentInstance.value = 'new value';

Answer 3

一个简单的解决方案是

it('should take the dropdown value and show data ', () => {
let event = {value:25};
debugElement
.query(By.css('.mat-select'))
.triggerEventHandler('selectionChange',event);
fixture.detectChanges();
expect(component.generalLedgerRequest.pageSize).toBe(25);
});

如何从测试代码触发Angular Material MatSelect上的selectionChange事件

3 个答案: