（Jasmine）如何以编程方式选择/传递值标签并在Angular 4中触发更改事件？

Question

我正在进行角度应用，我正在使用Jasmine进行单元测试。我是Jasmine的新手。

我想要的是测试（更改）事件的<select>标记，当用户从下拉列表中选择一个值时触发更改事件。

要测试的代码：

// template
<select class="selectTerminal"(change)="onChangeTerminal($event.target.value)">
  <option value="" disabled>Select Terminal</option>
  <option *ngFor="let terminal of terminalList" [value]="terminal.id">{{terminal.terminalCode}}</option>
</select>

//function called when the change event is triggered.
onChangeTerminal(id) {

  // `id` comes as `undefined` upon `ng test`, but works fine with `ng serve` since the value is selected manually from the dropdown list.
  this.terminalId = id; 
  this.wharfService.getWharfOrderByTerminalId(id).subscribe(res => {
  }, (error) => {
    // handle error
  });
}

我到目前为止能够做的是触发更改事件，以便调用该函数。但是，我无法以编程方式选择/传递值，该值应作为参数传递给从下拉列表中选择值时获取id的方法。

如何在触发更改事件之前设置选项的值？

Answer 1

请尝试以下代码。每当模型值改变时，它应该自动调用onChange函数

 // template
    <select class="selectTerminal"(change)="onChangeTerminal($event.target.value)" [(ngModel)]="selectedTerminal">
      <option value="" disabled>Select Terminal</option>
      <option *ngFor="let terminal of terminalList" [value]="terminal.id">{{terminal.terminalCode}}</option>
    </select>

    ngOnInit(){
        this.selectedTerminal = 'defaultTerminal';
    }
    //function called when the change event is triggered.
    onChangeTerminal(id) {

      // `id` comes as `undefined` upon `ng test`, but works fine with `ng serve` since the value is selected manually from the dropdown list.
      this.terminalId = id; 
      this.wharfService.getWharfOrderByTerminalId(id).subscribe(res => {
      }, (error) => {
        // handle error
      });
    }