0

I have a Page level component which implements a component BookingInformation with slots. In the Page component, it's got another component BookingInformationHeader with slots. header and default.

My question is, how should I set up my test so that I can test that the GoogleConversionTrackingImage is visible when @Reservation.State wasBookingJustMade changes to 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>
skyboyer
  • 22,209
  • 7
  • 57
  • 64
John Fu
  • 1,812
  • 2
  • 15
  • 20

1 Answers1

0

By using vue test utils https://vue-test-utils.vuejs.org/ and chai https://www.chaijs.com/ in your test file you can do something like:

    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;

You'll probably need to import the page level component as well. You can give an id to the component you want to find and then search by id.

Doron
  • 168
  • 2
  • 12
  • I've tried doing something similar. However, the mount will only mount the Page Level component and stub the children. The tracking image component is sort of like 3 levels deep. Arguably, I could rewrite the page, but I don't have the time to do that right now. – John Fu Jun 07 '19 at 06:20
  • When you mount, try mounting inner component as well(I've editted my answer): `const wrapper = mount(BookingInformation, BookingInformationHeader, GoogleConversionTrackingImage);` – Doron Jun 10 '19 at 14:12