Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
201 lines (157 sloc) 4.88 KB
import { Wrapper, shallowMount } from '@vue/test-utils';
import HelloVue from '@/components/HelloVue.vue';
describe('HelloVue.vue', () => {
/** ラッパー変数の宣言 */
let wrapper: Wrapper<HelloVue>;
it('propsで受け取る値のテスト', () => {
// 準備
const val = 'Vue';
wrapper = shallowMount(HelloVue, {
propsData: { val },
});
// 検証
expect(wrapper.props().val).toBe(val);
expect(wrapper.text()).toMatch(`Hello VUE`);
});
it('描画されるDOMのテスト', () => {
// 準備
wrapper = shallowMount(HelloVue);
// 検証
expect(wrapper.contains('h1')).toBeTruthy();
expect(wrapper.contains('input')).toBeTruthy();
expect(wrapper.contains('button')).toBeTruthy();
});
it('ボタンの非活性のテスト', () => {
// 準備
wrapper = shallowMount(HelloVue);
const button = wrapper.find('button');
// 実行
wrapper.setData({ inputValue: '' });
// 検証
expect(button.element.getAttribute('disabled')).toBeTruthy();
});
describe('イベントのテスト', () => {
beforeEach(() => {
wrapper = shallowMount(HelloVue);
});
it('テキスト入力時にhandleInputが呼ばれるかテスト', () => {
// 準備
const spy = jest.spyOn(wrapper.vm, 'handleInput');
// 実行
wrapper.find('input').trigger('input');
// 検証
expect(spy).toHaveBeenCalled();
});
it('ボタン押下時にhandleClickが呼ばれるかテスト', () => {
// 準備
const spy = jest.spyOn(wrapper.vm, 'handleClick');
wrapper.setData({ inputValue: 'AAA' });
// 実行
wrapper.find('button').trigger('click');
// 検証
expect(spy).toHaveBeenCalled();
});
it('入力なしの状態でhandleClickが呼ばれないかテスト', () => {
// 準備
wrapper = shallowMount(HelloVue);
const spy = jest.spyOn(wrapper.vm, 'handleClick');
wrapper.setData({ inputValue: '' });
// 実行
wrapper.find('button').trigger('click');
// 検証
expect(spy).not.toHaveBeenCalled();
});
});
describe('watcherのテスト', () => {
it('valueの値が変更された時にwatchが機能するかテスト', () => {
// 準備
wrapper = shallowMount(HelloVue, {
propsData: { val: 'AAA' },
});
const spy = jest.spyOn(console, 'log');
// 実行
wrapper.setData({ value: 'BBB' });
// 検証
expect(wrapper.vm.value).toBe('BBB');
expect(spy).toHaveBeenCalledWith('watch: BBB, AAA');
spy.mockClear();
});
});
describe('Lifecycle Hookのテスト', () => {
it('マウント時に mountedが機能するかテスト', () => {
// 準備
const spy = jest.spyOn(console, 'log');
// 実行
shallowMount(HelloVue);
// 検証
expect(spy).toHaveBeenCalled();
spy.mockClear();
});
});
describe('computedのテスト', () => {
beforeEach(() => {
wrapper = shallowMount(HelloVue);
});
it('isDisabledがtrueを返すかテスト', () => {
// 実行
wrapper.setData({ inputValue: '' });
const disabled = wrapper.vm.isDisabled;
// 検証
expect(disabled).toBeTruthy();
});
it('isDisabledがfalseを返すかテスト', () => {
// 実行
wrapper.setData({ inputValue: 'AAA' });
const disabled = wrapper.vm.isDisabled;
// 検証
expect(disabled).toBeFalsy();
});
});
describe('methodのテスト', () => {
beforeEach(() => {
wrapper = shallowMount(HelloVue);
});
it('handleInputメソッドのテスト', () => {
// 準備
const event = {
target: { value: 'AAA' },
} as any;
// 実行
wrapper.vm.handleInput(event);
// 検証
expect(wrapper.vm.inputValue).toBe('AAA');
});
it('handleClickメソッドのテスト', () => {
// 準備
wrapper.setData({ inputValue: 'AAA' });
const spy = jest.spyOn(wrapper.vm, '$emit');
// 実行
wrapper.vm.handleClick();
// 検証
expect(wrapper.vm.value).toBe('AAA');
expect(wrapper.vm.inputValue).toBe('');
expect(spy).toHaveBeenCalledWith('handle-click', 'AAA');
});
});
describe('filtersのテスト', () => {
it('アッパーケースに変換されるかテスト', () => {
// 準備
wrapper = shallowMount(HelloVue, {
propsData: { val: '' },
});
wrapper.setData({ value: 'Bbb' });
// 実行
const received = wrapper.find('h1').text();
// 検証
expect(received).toBe('Hello BBB');
});
});
describe('スナップショットテスト', () => {
it('HelloVueテンプレートのスナップショット', () => {
// 準備
wrapper = shallowMount(HelloVue);
// 検証
expect(wrapper.html()).toMatchSnapshot();
});
});
});