Impossible to click on a specific button part of a class with vue-test-utils

Question

I want to test an editable table with vue-test-utils. There are edit buttons for each row, and when an edit button is clicked, the table row expands and allow the user to input information.

Each edit button has the class "editAddress", this is what I've tried so far :

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');
    });

});

The test fails because it doesn't seem the button has been clicked..

The html code of my table looks like this (I use bootstrap-vue table here):

<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>

After the edit button being clicked, the table should transform like this :

Maybe I am not fetching the first button of the class "editAddress" correctly, I don't have any idea..

Thanks for your help !

Answer 1

Try that

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');
});