Карма тест паста событие

Question

Карма тест паста событие

1

У меня есть простой компонент, который обрабатывает событие insert в форме ввода.

Форма:

this.searchForm = this.formBuilder.group({
  query: [ null, [Validators.required] ]
});

onPaste(event) {
    event.preventDefault();
    const formattedQuery = event.clipboardData.getData('text/plain')
      .split(/,?[\r\n\t]+\s?/)
      .join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.get('query').setValue(formattedQuery);
  }

Теперь я пытаюсь проверить это, и это выглядит так:

it('should reformat pasted data', () => {
    const queryField = fixture.debugElement.query(By.css('input[type="search"]'));
    queryField.nativeElement.dispatchEvent(new ClipboardEvent('paste', {
      dataType: 'text/plain', 
      data: '123\r123'
    }));
    fixture.detectChanges();
    expect(queryField.nativeElement.value).toBe('123, 123');
    // also tried expect(component.searchForm.get('query').value).toBe('123, 123');
  });

Но в результате у меня есть

Expected '' to be '123, 123'

Если я делаю console.log(queryField.nativeElement) он показывает ввод, но почему он не обрабатывает new ClipboardEvent('paste') событие new ClipboardEvent('paste')?

<input class="ng-untouched ng-pristine ng-invalid" formcontrolname="query" type="search" ng-reflect-name="query">

Полный компонент можно найти здесь https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

Что случилось с моим модульным тестом?

rel1x 08 дек. 2017, в 15:35

Источник

0

Вы пробовали это без fixture.detectChanges() ?
pop 08 дек. 2017, в 13:57
0

я сделал. тот же результат (
rel1x 08 дек. 2017, в 14:01
0

Откуда берется значение 325435956, 325435956 ? Вы установили это где-то перед тестом? Мол, в beforeEach?
pop 08 дек. 2017, в 14:04
0

К сожалению, я пробовал разные номера. давайте предположим, что это «123, 123»
rel1x 08 дек. 2017, в 14:12
0

попробуйте вызвать onPaste напрямую. Поэтому вместо отправки события на элемент queryField.nativeElement.dispatchEvent.... попробуйте вызвать onPaste( new ClipboardEvent(.... и посмотреть, поможет ли это).
pop 08 дек. 2017, в 14:15
0

TypeError: queryField.nativeElement.onPaste is not a function а TypeError: queryField.onPaste is not a function
rel1x 08 дек. 2017, в 14:18

Показать ещё 4 комментария

Теги:

angular

javascript

karma-jasmine

karma-runner

1 ответ

Ещё вопросы

Вы пробовали это без fixture.detectChanges() ?
Откуда берется значение 325435956, 325435956 ? Вы установили это где-то перед тестом? Мол, в beforeEach?
К сожалению, я пробовал разные номера. давайте предположим, что это «123, 123»
попробуйте вызвать onPaste напрямую. Поэтому вместо отправки события на элемент queryField.nativeElement.dispatchEvent.... попробуйте вызвать onPaste( new ClipboardEvent(.... и посмотреть, поможет ли это).
TypeError: queryField.nativeElement.onPaste is not a function а TypeError: queryField.onPaste is not a function

pop · Answer 1 · 2017-12-08T13-11-00.000Z

Попробуй это:

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(queryField.nativeElement.value).toBe('123, 123');
});

Или даже

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(component.searchForm.get('query').value).toBe('123, 123');
});

извините, но я получил тот же результат, Expected '' to be '123, 123'. я скопировал и вставил оба ваших примера без каких-либо изменений
может быть, вам нужно detectChanges прежде чем expect конце концов ...