Блог

Я пытаюсь протестировать аккордеон.

хотелось бы проверить, разрушается ли аккордеон после щелчка.

  <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">
            {{title}}
          </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;
    }
  },

...
  

Тест

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

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

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

    })
  

Я пытался шпионить за своей функцией. Он работает, но он обесценился.
Итак, я предполагаю, что моя функция вызвана, но результат теста неверен

   Expected: true
    Received: false

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

Как вы можете видеть, значение равно false, пользователь нажимает, запускает метод переключения, поэтому ожидаемое значение должно быть true. Однако полученное значение по-прежнему равно false, как если бы пользователь не нажимал

Попробуйте использовать nextTick after trigger.click , потому что щелчок обрабатывается не сразу, и только при следующем тике вы увидите изменения.