Блог

Главная - Вопросы по программированию - Как я могу заставить KeyboardEvents изменять значение HTMLInputElement?

Как я могу заставить KeyboardEvents изменять значение HTMLInputElement?

#javascript #unit-testing #dom #ecmascript-6

#javascript #модульное тестирование #dom #ecmascript-6

Вопрос:

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

Когда я пытаюсь создать автоматический тест, в котором отправляются события keydown и keyup, я вижу запуск обработчика событий, но свойство value элемента input никогда не меняется. Я пробовал использовать jQuery для запуска событий и использовать базовые методы DOM; ни то, ни другое, похоже, не работает.

Кто-нибудь может подсказать, как изменить значение? Я предполагаю, что это возможно, поскольку тесты Selenium делают это.

Это пример кода:

     function setupTest(elem) {
      const input = elem[0] as HTMLInputElement;
      const letters = "aSdFgH";
      let index = 0;

      $("#injectButton").click(() => {
        const char = letters.charAt(index);
        const keydown = new KeyboardEvent("keydown", {
            key: char,
            shiftKey: char >= 'A' amp;amp; char <= 'Z'
        });

        const keyup = new KeyboardEvent("keyup", {
            key: char,
            shiftKey: char >= 'A' amp;amp; char <= 'Z'
        });
        index  ;
        input.dispatchEvent(keydown);
        input.dispatchEvent(keyup);
    });

    const report = (name, event) => {
        const target = event.target as HTMLInputElement;
        console.log(name, target.value, event);
    }

    $(elem)
        .focus(event => report("FOCUS", event))
        .keydown(event => report("KEYDOWN", event))
        .keyup(event => report("KEYUP", event))
        .blur(event => report("BLUR", event))
    ;
}

Комментарии:

1. Это реальный синтаксис: const input = elem[0] as HTMLInputElement; ?

2. @zer00ne — Выглядит как TypeScript

3. Я думаю, что это не сработает из соображений безопасности. Прочитайте примечание ниже: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Example

4. @zer00ne извините, это TypeScript. Я думал, что свел все это к JS, но я немного пропустил. Приведение не влияет на функциональность.

5. @ArtemBozhko возможно, вы правы, но сообщения консоли показывают, что события запускаются. Я не вижу ничего на странице MDN, что указывает на то, что действие события по умолчанию не произойдет.

Ответ №1:

@Artem Bozhko прав — это невозможно. Синтетические события (созданные в скрипте) имеют isTrusted значение false. Ненадежные события не могут запускать действия по умолчанию, поэтому они никогда не изменяют входное значение. По очевидным причинам безопасности, isTrusted является свойством, доступным только для чтения, так что, насколько я могу судить, это все.

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