Как вызвать раскрывающийся список ввода input с помощью jQuery.javascript - PullRequest
Новая
       6

Как вызвать раскрывающийся список ввода input с помощью jQuery.javascript

0 голосов
/ 07 июня 2018

Я использую реагирование на выбор для серии выпадающих меню на веб-сайте, который является частью Ruby on Rails и частью React.js.Я хочу иметь возможность написать тест функции в Capybara, который будет:

  1. Нажмите / сфокусируйте выделение
  2. При необходимости введите значение фильтра
  3. Выберите результатиз выпадающего списка

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

Выбранный виджет отлично работает в браузере, когда я нажимаю, но я не вижу, как вызвать его, чтобы открыть JQuery или другие события JS click / mousedown / typing.Это возможно?

1 Ответ

0 голосов
/ 25 октября 2018

Для точки 1: (открытие раскрывающегося списка в JS)

Вам нужно будет передать его classNamePrefix='someCustomClass'

<Select classNamePrefix='list' options={[{ label: 'one', value: 'one' }]} />

classNamePrefix необходим, чтобы дать вам все обработчики классато есть list__control, list__option ..

Тогда вам нужно вызвать событие мыши на раскрывающемся индикаторе: 

function triggerMouseEvent (node, eventType) {
  var clickEvent = document.createEvent ('MouseEvents');
  clickEvent.initEvent (eventType, true, true);
  node.dispatchEvent (clickEvent);
}
triggerMouseEvent($('div.list__dropdown-indicator'), 'mousedown');

Это должно открыть раскрывающийся список для вас.

Возможно, вы захотите изменить $('div.list__dropdown-indicator') на что-то вроде document.getElementsByClassName('list__dropdown-indicator')[0], но я думаю, вы понимаете суть.

Для пункта 3:

Как только выОткрыв раскрывающийся список, вы можете нажать на один из вариантов, например, такой как первый вариант: 

document.getElementsByClassName('list__option')[0].click();

Кстати: если вам не обязательно открывать раскрывающийся список с помощью JS, вы всегда можетедобавьте menuIsOpen prop к компоненту реагировать на выбор.

...