Обход проверки Ember во время введения пользователя и передачи с помощью jquery val - PullRequest
Новая
       8

Обход проверки Ember во время введения пользователя и передачи с помощью jquery val

0 голосов
/ 03 октября 2019

В качестве хобби я пытаюсь создать свое собственное хранилище имен пользователей и паролей для внедрения через плагин chrome с сайта на сайт.

Работает нормально с обычным $('#username').val() Однако я сталкиваюсь с проблемойна сайте, который был построен с тлеющим углем. На сайте есть такая форма: 

<form class="login_form" novalidate="" data-ember-action="" data-ember-action-7="7" _lpchecked="1">
    <div id="ember4" class="fieldset fieldset--error fieldset--empty fieldset--material ember-view"> <label for="username" class="fieldset_label">Username</label> <input name="username" id="username" class="input username" autocomplete="off" autofocus=""></div>
</form>

Проблема в том, что когда я использую $('#username').val("myUsername");

, я получаю сообщение об ошибке "Пожалуйста, введите имя пользователя". Дело в том, что если я войду во ввод, нажму любую клавишу, а затем удаляю добавленный текст, он проверяет, потому что он удаляет fieldset - error и fieldset - empty, что затем позволяет мне нажать submit, и это работает.

Дело в том - как мне решить это программным способом? Есть ли способ заставить Эмбер прекратить приставать меня печатать вручную вместо использования .val ()?

Или есть способ обмануть меня, думая, что я это сделал (потому что jquery.trigger не работает)

1 Ответ

2 голосов
/ 03 октября 2019

Я не уверен на 100%, но, думаю, проблема, с которой вы столкнулись, заключается в том, что вы не вызвали событие change. jQuery.val() не делает этого:

Установка значений с помощью этого метода (или с использованием свойства собственного значения) не вызывает отправку события изменения. По этой причине соответствующие обработчики событий не будут выполняться. Если вы хотите выполнить их, вы должны вызвать .trigger («изменить») после установки значения.

https://api.jquery.com/val/

Вы можете сделать это либо с помощью jQuery.trigger('change'), либорефакторинг для использования нативных браузерных API. В сообществе ember есть набор тестовых помощников, которые стараются максимально симулировать нормальное поведение браузера. Они разработаны и поставляются в виде пакета @ember/test-helpers. Он поставляется с fillIn помощником по тестированию, который делает то, что вы пытаетесь достичь.

Я бы не рекомендовал использовать @ember/test-helpers в вашем проекте напрямую, поскольку это добавляет еще одну зависимость для простогозадача. Вместо этого вы можете просто использовать там реализацию в качестве схемы: https://github.com/emberjs/ember-test-helpers/blob/v1.6.1/addon-test-support/@ember/test-helpers/dom/fill-in.ts

Упрощенно это должно выглядеть так: 

function fillIn(selector, value) {
  // TODO: Assert that selector does not match more than one element.
  let element = document.querySelector(selector);

  // TODO: Firefox does not trigger the `focusin` event if the window
  //       does not have focus.
  element.focus();

  // TODO: Handle elements that aren't a control.
  element.value = value;

  element.dispatchEvent(new Event('input'));
  element.dispatchEvent(new Event('change'));
}

Это может вызвать асинхронную работу. Поэтому вам следует дождаться завершения этой работы, прежде чем продолжить. Ember поставляется с тестовым помощником settled. Так как этот является специфическим для ember, он не будет работать на других проектах. Но вы можете найти вдохновение в waitFor() и waitUntil(), которые позволяют вам ожидать определенного состояния пользовательского интерфейса. Но это тема для другого вопроса.

...