|
|
@ -18,7 +18,24 @@ const tc = defineComponent({ |
|
|
|
}); |
|
|
|
|
|
|
|
describe("自定义指令", async () => { |
|
|
|
// vue-test-utils 的 mount api, 将组件实例化
|
|
|
|
it("快照测试", async () => { |
|
|
|
const wrapper = mount(tc, { |
|
|
|
global: { |
|
|
|
directives: { |
|
|
|
debounce: vDebounce, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
const interval = setInterval(async () => { |
|
|
|
await wrapper.find("button").trigger("click"); |
|
|
|
}, 200); |
|
|
|
await new Promise((resolve) => setTimeout(resolve, 1000)); |
|
|
|
clearInterval(interval); |
|
|
|
await new Promise((resolve) => setTimeout(resolve, 700)); |
|
|
|
await nextTick(); |
|
|
|
const btn = wrapper.get("button"); |
|
|
|
expect(btn.text()).toMatchSnapshot(); |
|
|
|
}); |
|
|
|
it("防抖提交", async () => { |
|
|
|
const wrapper = mount(tc, { |
|
|
|
global: { |
|
|
@ -27,24 +44,14 @@ describe("自定义指令", async () => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
// 每过 200 毫秒点击一次 button
|
|
|
|
const interval = setInterval(async () => { |
|
|
|
// find api 查找目标元素
|
|
|
|
await wrapper.find("button").trigger("click"); |
|
|
|
}, 200); |
|
|
|
// 阻塞 1000 秒, 让点击事件在 1 秒内执行 4 次
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 1000)); |
|
|
|
|
|
|
|
clearInterval(interval); |
|
|
|
|
|
|
|
// 阻塞 700 秒, 等待函数执行
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 700)); |
|
|
|
// 确保组件重新渲染
|
|
|
|
await nextTick(); |
|
|
|
// 获取目标元素
|
|
|
|
const btn = wrapper.get("button"); |
|
|
|
// 对目标元素的文本进行断言
|
|
|
|
expect(btn.text()).toBe("num: 1"); |
|
|
|
}); |
|
|
|
}); |
|
|
|