angular2 testing - 輸入文本更改不會影響ngmodel

Question

我正在嘗試通過angular2測試設置DOM輸入元素：

這是HTML代碼：

<div>
            <label for="Player X">Player X</label>
            <input type="text" id="playerX" required [(ngModel)]="players[0].id" name="playerXid">
        </div>
        <div>
            <label for="Player O">Player O</label>
            <input type="text" id="playerO" required [(ngModel)]="players[1].id" name="playerOid">
        </div>

這是測試代碼，因為players[0].id和players[1].id為空而失敗：

it('Test input <-> player bindings', () => {
        fixture.detectChanges();

        let playerX = fixture.debugElement.nativeElement.querySelector('#playerX');
        playerX.value = 'First';
        playerX.dispatchEvent(new Event('input'));
        let playerO = fixture.debugElement.nativeElement.querySelector('#playerO');
        playerO.value = 'Second';
        playerO.dispatchEvent(new Event('input'));

        fixture.detectChanges();

        expect(comp.players[0].id).toBe('First');
        expect(comp.players[1].id).toBe('Second');
     });

我在這里錯過了什么？

UPDATE

我意識到輸入值會更新。 問題是comp.players沒有！

Answer 1

嘗試這個：

let compiled = fixture.debugElement.nativeElement;
let playerX = compiled.querySelector('#playerX');
let player0 = compiled.querySelector('#playerX');

fixture.detectChanges();

// Change value
playerX.value = 'First';
player0.value = 'Second';

// dispatch input event
dispatchEvent(playerX, 'input');
dispatchEvent(player0, 'input');

讓我知道...