Угловой 2 + Жасмин: фокус браузера при тестировании фокуса

Question

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

it('testing input focus', async(() => { 
    let showDiv = false; 
    const template = `<div *ngIf="shouldShow" class='hidden-div'> 
         SHOW ME WHAT YOU GOT 
        </div> 
        <input (focus)="shouldShow = !shouldShow" name="input">`; 
    buildTestComponent(template, {shouldShow: showDiv}).then((fixture) => { 
    fixture.detectChanges(); 
    const inputEl: HTMLInputElement = fixture.nativeElement.querySelector('input'); 

    expect(fixture.nativeElement.querySelector('.hidden-div')).toBe(null); 

    inputEl.focus(); 
    fixture.detectChanges(); 

    expect(fixture.nativeElement.querySelector('.hidden-div')).not.toBe(null); 
    }); 
})); 

Когда я запускаю этот тест с кармой тест проходит до тех пор, как у меня есть фокус на вкладке хрома, который работает цель кармы. Однако, если браузер не имеет фокус тест не пройден (даже если браузер виден, но я нажимаю на другое окно) с сообщением об ошибке:

Expected null not to be null. 

Я полагаю, что, когда вкладка Chrome не имеет фокуса , вызов inputEl.focus() фактически не вызван, но я не знаю, как его исправить. Все остальные модульные тесты, которые я написал, проходят независимо от фокуса браузера. Кто-нибудь сталкивался с этим или имел какие-то идеи?

Answer 1

Чтобы вызвать событие на угловой элемент, вы можете использовать встроенный метод JavaScript ES6 dispatchEvent с последующим вызовом механизма обнаружения изменения угловых, чтобы получить ваш DOM обновление:

inputElement.dispatchEvent(new Event('focus')); 
fixture.detectChanges(); 

более элегантный способ чтобы достичь того же, чтобы использовать метод углового-х обертку:

import { dispatchEvent } from '@angular/platform-browser/testing/src/browser_util' 

dispatchEvent(inputElement, 'focus'); 
fixture.detectChanges(); 

интересен один, когда вы хотите, чтобы установить значение для вашего входного элемента. Вам нужно будет сначала назначить строку свойству значения в Input, а затем вызвать «вход» Событие изменения:

inputElement.value = 'abcd'; 
dispatchEvent(inputElement, 'input'); 
fixture.detectChanges(); 

Примечание: Есть события, которые не действуют так, как вы можете ожидать. Например, отправка события 'click' НЕ будет направлена ​​на ваш элемент ввода! Обходной может быть первым вызвать «фокус» событие, а затем «нажмите кнопку» событие следующим образом:

dispatchEvent(inputElement, 'focus'); 
dispatchEvent(inputElement, 'input'); 
fixture.detectChanges(); 

Все доступные события JavaScript являются here.