Как проверить этот компонент? - PullRequest
Новая
       8

Как проверить этот компонент?

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

У меня есть компонент уровня страницы, который реализует компонент BookingInformation со слотами. В компоненте Page есть еще один компонент BookingInformationHeader со слотами. заголовок и по умолчанию .

У меня вопрос, как мне настроить тест, чтобы я мог проверить, что GoogleConversionTrackingImage виден, когда @Reservation.State wasBookingJustMade меняется на true? 

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Reservation } from "@/store/vuex-decorators";
import { BookingInformation, BookingInformationHeader } from "@/components";
import GoogleConversionTrackingImage from './components/GoogleConversionTrackingImage.vue';

@Component({
  components: {
    BookingInformation,
    BookingInformationHeader,
    GoogleConversionTrackingImage
  }
})
export default class ConfirmationPage extends Vue {
  renderTrackingImage: boolean = false;

  @Reservation.State wasBookingJustMade: boolean;
}
</script>

<template>
  <booking-information page-type="confirmation-page" class="confirmation-page">
    <template slot="header" slot-scope="bookingInfo">
      <booking-information-header>
        <template slot="buttons">
          // some buttons
        </template>
      </booking-information-header>
      <google-conversion-tracking-image v-if="wasBookingJustMade" />
    </template>
  </booking-information>
</template>

1 Ответ

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

С помощью утилиты vue test https://vue -test-utils.vuejs.org / и chai https://www.chaijs.com/ в вашем тестовом файле вы можете сделать что-то вроде: 

    import mount from "@vue/test-utils";
    import expect from "chai";

    const wrapper = mount(BookingInformation,<inner components you want to test>);
    expect(googleImage.exists()).to.be.true;
    wrapper.setData({
        wasBookingJustMade: true,
    });
    const googleImage = wrapper.find("google-conversion-tracking-image");
    expect(googleImage.exists()).to.be.false;

Возможно, вам также потребуется импортировать компонент уровня страницы. Вы можете дать идентификатор компоненту, который хотите найти, а затем выполнить поиск по идентификатору.

...