Найдите n-й элемент в vue-test-utils - PullRequest
Новая
       20

Найдите n-й элемент в vue-test-utils

0 голосов
/ 13 июня 2019

Я использую vue-test-utils с jest. Моя обертка содержит 9 элементов ввода, и я бы хотел получить третий. Это решение работает: 

    wrapper.findAll('input').at(3) // OK

Согласно документации (https://vue -test-utils.vuejs.org / api / selectors.html ), я должен иметь возможность использовать псевдо-селекторы CSS, но это не работает: 

    wrapper.find('input:nth-of-type(3)') // ErrorWrapper

С помощью этого метода я могу получить только первый вход: 

    wrapper.find('input:nth-of-type(1)') // OK

Я неправильно использую селектор CSS?

Моя оболочка HTML выглядит так: 

<div class="layout wrap">
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nom*</label><input aria-label="Nom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Prénom*</label><input aria-label="Prénom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-at theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Email*</label><input aria-label="Email*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> 
      <div>
         <div class="v-menu">
            <div class="v-menu__content theme--light " style="max-height: auto; min-width: 290px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"></div>
         </div>
         <div class="v-input v-text-field theme--light">
            <div class="v-input__prepend-outer">
               <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon v-icon--link material-icons theme--light">event</i></div>
            </div>
            <div class="v-input__control">
               <div class="v-input__slot">
                  <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Date de naissance</label><input aria-label="Date de naissance" type="text"></div>
               </div>
               <div class="v-text-field__details">
                  <div class="v-messages theme--light">
                     <div class="v-messages__wrapper"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!---->
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">place</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Adresse</label><input aria-label="Adresse" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Code postal</label><input aria-label="Code postal" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Ville</label><input aria-label="Ville" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">smartphone</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Numéro de téléphone</label><input aria-label="Numéro de téléphone" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-globe-europe theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nationalité</label><input aria-label="Nationalité" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

1 Ответ

1 голос
/ 13 июня 2019

Я думаю, что причина wrapper.find('input:nth-of-type(3)') не работает в том, что ваши входные данные не совпадают с одним и тем же родителем.И причина того, что wrapper.findAll('input').at(3) работает, заключается в том, что он пересекает весь DOM, чтобы найти входные данные и создать массив, из которого он выбирает третий элемент

...