Лучший способ проверить функцию, которая принимает значение из элемента ввода HTML?

Question

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

Невозможно прочитать свойство 'nativeElement' из неопределенного

Пожалуйста, посмотрите мой стек для живого примера

html

<input #timeInput type="text" [value]="myData">
<button (click)="doSomething()">Click</button>

ts

 myData = 'initial text';

  @ViewChild('timeInput') tI: any;

  doSomething() {
    this.myData = this.tI.nativeElement.value;
  }

test

  it('should', () => {
    component.something.nativeElement.value = 'new data';
    component.myFunc();
    expect(component.myData).toEqual('new data');
  })

Answer 1

Кажется, я нашел рабочую версию, увидев этот вопрос :

describe('component: TestComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      declarations: [ AppComponent ]
    });
  });

  it('should be ok', () => {
    let fixture = TestBed.createComponent(AppComponent);
    let component = fixture.componentInstance;

    fixture.detectChanges();

    let input = fixture.debugElement.query(By.css('#myInput'));
    let el = input.nativeElement;

    expect(el.value).toBe('initial text');

    el.value = 'new data';

    component.doSomething();
    fixture.detectChanges();

    expect(component.myData).toBe('new data');

  });
});