Невозможно нажать на указанную c часть класса с помощью vue -test-utils - PullRequest
Новая
       13

Невозможно нажать на указанную c часть класса с помощью vue -test-utils

2 голосов
/ 19 марта 2020

Я хочу протестировать редактируемую таблицу с помощью vue -test-utils. Есть кнопки редактирования для каждой строки, и когда нажата кнопка редактирования, строка таблицы расширяется и позволяет пользователю вводить информацию.

Каждая кнопка редактирования имеет класс "editAddress", это то, что я до сих пор пробовал: 

describe('Customers Addresses Table', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(AddressesTable);
    });


    it('can edit an address',() => {
        const firstEditAddressButton = wrapper.findAll('button.editAddress').at(0);
        firstEditAddressButton.trigger('click');
        console.log(firstEditAddressButton.html());
        expect(wrapper.html()).toContain('Close');
    });

});

Тест не пройден, так как кажется, что кнопка не нажата ..

Код html моей таблицы выглядит следующим образом (я использую bootstrap - vue таблица здесь): 

<div class="panel panel-default">
    <b-table>
          Address Edition-->
          <template v-slot:cell(name)="data">
               <div>
                     <button class="editAddress" @click="data.toggleDetails(); buttonEditClicked(data.item)">{{ data.item.name }}</button>
               </div>
          </template>

      </b-table>
</div>

После нажатия кнопки редактирования таблица должна преобразоваться следующим образом:

enter image description here

enter image description here

Возможно, я неправильно получаю первую кнопку класса "editAddress", понятия не имею ..

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 19 марта 2020

Попробуйте это 

it('can edit an address', async () => {
   const firstEditAddressButton = wrapper.findAll('button.editAddress').at(0);     
   firstEditAddressButton.trigger('click');

   await wrapper.vm.$nextTick();

   expect(wrapper.html()).toContain('Close');
});
...