Mock与事件触发
大约 3 分钟
Mock 与事件触发
Mocks 数据及 props
仿造 prop
使用内置 propsData 选项向组件传入 prop
propsView.vue
<template>
<div>
props测试
<h1>当前用户名：{{ username }}</h1>
<h1>角色：{{ role_name }}</h1>
</div>
</template>
<script>
export default {
props: ["username", "role_name"],
data() {
return {};
}
};
</script>
props.test.js
/* props传入测试 */
import { shallowMount } from "@vue/test-utils";
import propsView from "@/src/views/propsView.vue";
describe("测试props传入", () => {
const wrapper = shallowMount(propsView, {
propsData: {
username: "sunshine",
role_name: "超级管理员"
}
});
const vm = wrapper.vm;
it("验证传入的数据", () => {
console.log(vm.username); // sunshine
console.log(vm.role_name); // 超级管理员
expect(vm.username).toBe("sunshine");
expect(vm.role_name).toBe("超级管理员");
});
});
操作组件状态
用 setData 或 setProps 方法直接操作组件状态
/* props传入测试 */
import { shallowMount } from "@vue/test-utils";
import propsView from "@/src/views/propsView.vue";
describe("测试props传入", () => {
const wrapper = shallowMount(propsView, {
propsData: {
username: "sunshine",
role_name: "超级管理员"
}
});
const vm = wrapper.vm;
it("验证传入的数据", () => {
console.log(vm.username);
console.log(vm.role_name);
expect(vm.username).toBe("sunshine");
expect(vm.role_name).toBe("超级管理员");
});
it("操作组件状态", async () => {
await wrapper.setProps({
username: "Jone"
});
console.log(vm.username); // Jone
expect(vm.username).toBe("Jone");
});
});
仿造注入
使用 mocks 选项注入 props 或$route
mocksView.vue
<template>
<div>
mocks选项
<div class="infos">
{{ $route.params.username }}
</div>
</div>
</template>
<script>
export default {
props: [],
data() {
return {};
}
};
</script>
mocks.test.js
import { shallowMount } from "@vue/test-utils";
import mocksView from "@/src/views/mocksView.vue";
describe("测试mocks注入", () => {
it("注入$route", () => {
const $route = {
path: "/",
hash: "",
params: {
username: "Jone"
},
query: {
role_name: "管理员"
}
};
const wrapper = shallowMount(mocksView, {
mocks: {
$route
}
});
// 查找class为info的元素，并获取其中内容
expect(wrapper.find(".infos").text()).toBe("Jone");
});
});
键盘、鼠标事件
触发事件
wrapper 暴露了一个 trigger 方法，可用于触发 Dom 事件，且 trigger 可接受选项，即传参
triggerTest.vue
<template>
<div>
trigger事件测试
<div class="count">当前计数：{{ count }}</div>
<button class="increment" @click="increment">调用加法函数</button>
<button class="subtraction" @click="subtraction">调用减法函数</button>
<button class="options" @click="options">调用传参函数</button>
<div class="infos">{{ infos }}</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
infos: null
};
},
methods: {
increment() {
this.count++;
},
subtraction() {
this.count--;
},
options(val) {
this.infos = val;
}
}
};
</script>
trigger.test.js
/* 方法测试 */
import { shallowMount } from "@vue/test-utils";
import triggerTest from "@/src/views/triggerTest.vue";
describe("方法测试", () => {
const wrapper = shallowMount(triggerTest);
const vm = wrapper.vm;
it("测试调用加法函数", async () => {
const button = wrapper.find(".increment");
await button.trigger("click");
console.log(vm.count);
expect(vm.count).toBe(1);
});
it("接受传参", async () => {
const button = wrapper.find(".options");
await button.trigger("click", {
username: "Jone"
});
console.log(vm.infos);
expect(vm.infos.username).toBe("Jone");
});
});
断言触发的事件
每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录.
/* 回收触发的记录 */
it("回收触发的记录", () => {
wrapper.vm.$emit("foo");
wrapper.vm.$emit("foo", 123);
console.log(wrapper.emitted()); // { foo: [ [], [ 123 ] ] }
});
从子组件触发事件
father.vue
<template>
<div>
父组件
<p v-if="emitted">Emitted!</p>
<children-component @custom="onCustom"></children-component>
</div>
</template>
<script>
import ChildrenComponent from "./children.vue";
export default {
components: {
ChildrenComponent
},
data() {
return {
emitted: false
};
},
methods: {
onCustom() {
this.emitted = true;
}
}
};
</script>
children.vue
<template>
<div>
子组件
<button @click="emitClick">调用父组件</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
emitClick() {
this.$emit("custom");
}
}
};
</script>
childrenTest.test.js
/* 子组件调用父组件方法测试 */
import { mount } from "@vue/test-utils";
import FatherComponent from "@/src/views/TranslateTest/father.vue";
import ChildrenComponent from "@/src/views/TranslateTest/children.vue";
describe("子组件调用父组件", () => {
const father_wrapper = mount(FatherComponent);
const fa_vm = father_wrapper.vm;
it("子组件中调用", async () => {
father_wrapper.findComponent(ChildrenComponent).vm.$emit("custom");
expect(fa_vm.emitted).toBe(true); // 测试通过
});
});
Demo：键盘实例
KeyboardClickDemo.vue
<template>
<input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
</template>
<script>
const KEY_DOWN = 40;
const KEY_UP = 38;
const ESCAPE = 27;
export default {
data() {
return {
quantity: 0
};
},
methods: {
increment() {
this.quantity += 1;
},
decrement() {
this.quantity -= 1;
},
clear() {
this.quantity = 0;
},
onKeydown(e) {
if (e.keyCode === ESCAPE) {
this.clear();
}
if (e.keyCode === KEY_DOWN) {
this.decrement();
}
if (e.keyCode === KEY_UP) {
this.increment();
}
if (e.key === "a") {
this.quantity = 13;
}
}
},
watch: {
quantity: function (newValue) {
this.$emit("input", newValue);
}
}
};
</script>
keyboard.test.js
import { mount } from "@vue/test-utils";
import KeyboardClickDemo from "@/src/views/KeyboardClickDemo.vue";
describe("键盘事件测试", () => {
it("验证默认值", () => {
const wrapper = mount(KeyboardClickDemo);
expect(wrapper.vm.quantity).toBe(0);
});
it("向上箭头+1", async () => {
const wrapper = mount(KeyboardClickDemo);
await wrapper.trigger("keydown.up");
expect(wrapper.vm.quantity).toBe(1);
});
it("向下箭头-1", async () => {
const wrapper = mount(KeyboardClickDemo);
wrapper.vm.quantity = 5;
await wrapper.trigger("keydown.down");
expect(wrapper.vm.quantity).toBe(4);
});
it("esc清空", async () => {
const wrapper = mount(KeyboardClickDemo);
wrapper.vm.quantity = 5;
await wrapper.trigger("keydown.esc");
expect(wrapper.vm.quantity).toBe(0);
});
it("小写a将值改为13", async () => {
const wrapper = mount(KeyboardClickDemo);
await wrapper.trigger("keydown", {
key: "a"
});
expect(wrapper.vm.quantity).toBe(13);
});
});
Loading...