I have just created a new project in VueJS and incorporated TypeScript into it.
Below is my component along with some testing methods:
<template>
<div></div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Slider extends Vue {
private slide: number = 0;
private sliding: boolean = false;
public setSlide(slide: number): void {
this.slide = slide;
}
public setSliding(sliding: boolean): void {
this.sliding = sliding;
}
private onSliderStart(slide: any): void {
this.setSliding(true);
}
private onSlideEnd(slide: any): void {
this.setSliding(false);
}
}
</script>
To run the tests:
import { shallowMount } from '@vue/test-utils';
import Slider from '@/components/Header.vue';
describe('Slider', () => {
const wrapper = shallowMount(Slider);
it('Check if Slider is an instance of Vue', () => {
expect(wrapper.isVueInstance()).toBeTruthy();
});
it('Verify that setSlide is a function', () => {
expect(typeof wrapper.vm.setSlide).toBe('function')
})
});
As I proceed to conduct the test, I notice that the methods setSlide and setSliding are not available in the wrapper.