mercredi 18 novembre 2020

Vue test can't trigger click on

I try to test an accordion.

would like to test if the accordion collapse after a click.

 <template>
    <div :id="accordionName">
    
      <div class="card mb-4">
    
    
        <div class="card-header" @click.prevent="accordionToggle()" data-toggle="collapse" data-target="accordionTarget">
          <h5 ref="title" class="float-left">
            
          </h5>
          <span class="float-right" v-show="!accordionActive">
            <font-awesome-icon icon="chevron-left" /></span>
          <span class="float-right" v-show="accordionActive">
            <font-awesome-icon icon="chevron-down" /></span>
        </div>
    
          <div id="accordionTarget" class="collapse show" v-show="accordionActive">
            <div class="card-body">
              <slot>
                <!-- The content will be here -->
              </slot>
            </div>
          </div>
    
      </div>
    
    </div>
</template>
<script>
export default {
  name: 'LayoutCard',
  data() {
    return {
      accordionActive: null
    }
  },
  props: {
    title: {
      required: true
    },
    active: {
      default: false
    }
  },
  computed: {
...
  methods: {
    assignPropsToData() {
      this.accordionActive = this.active;
    },
    accordionToggle() {
      this.accordionActive = !this.accordionActive;
    }
  },

...

The test

it("check user click", () => {
      const wrapper = factory({
        active: false
      })

      wrapper.find('.button').trigger('click')

      expect(wrapper.find('.card-body').isVisible()).toBe(true)

    })

I tried to spy my function. It's works but it's depreciated. So I guess my function is called but the result of the test is wrong

  Expected: true
    Received: false

      41 |       wrapper.find('.button').trigger('click')
      42 | 
    > 43 |       expect(wrapper.find('.card-body').isVisible()).toBe(true)
         |                                                      ^
      44 | 
      45 |     })
      46 | 

As you can see the value is false, the user click, run the toggle method so the expected should be true. However, the received is still false as if the user didn't click

Aucun commentaire:

Enregistrer un commentaire