如何在 vuejs 中为上下文发出事件编写测试用例

时间:2021-04-11 01:08:08

标签: vue.js unit-testing

我已经使用 CBtn 创建了组件,并编写了单击、模糊、聚焦、按键按下的测试用例。我在为上下文发出的事件编写测试用例时卡住了 需要为 context.emit("focus", e)} 编写测试用例 对于组件


export default SingleComponent({
  name:  "c-btn",
    props: {
    presentationComponent: {
      type: String,
      default: "t-btn"
    },
    isFocused: Boolean,
    cBtn: {
      type: Object,
      default: () => {
        return {
          id: "",
          type: "",
          actionId: "",
        };
      }
    },
  },
  emits: {
    "blur": (value: Event)=> true,
    "focus": (value: Event)=> true,
    "keydown": (value: Event)=> true
  },
  setup(props, context) {
    const cBtn= useCBtn(props, context);
    const {isDisabledRef, isRestrictedRef} = cBtn;

    const dynamicComponentNameRef = computed(()=> "t-btn");

    return () => {
      const dynamicComponent = resolveDynamicComponent(dynamicComponentNameRef.value);
      return (
          <dynamicComponent
            class={dynamicComponentNameRef.value + " " + props.cBtn.actionId}
            id={props.cBtn.actionId}
            isDisabled={isDisabledRef.value}
            isRestricted={isRestrictedRef.value}
            label={props.cBtn.text}
            isFocused={props.isFocused}
            onFocus={(e:any)=> context.emit("focus", e)}
            onBlur={(e:any)=> context.emit("blur", e)}
            onKeydown={(e:any)=> context.emit("keydown", e)}
            icon={props.cBtn.icon || {}}
            onClick={cBtn.click}
          />
      );
    };
  }
});

Doe events 我写了这样的测试用例

describe("CBtn button click", () => {
  test("props data", () =>
    {const wrapper = shallowMount(CBtn, {
      props: {
        cBtn: buttonObj
      } as any,
      global: {
        provide: reqProvides
      }
    });
    wrapper.findComponent(CBtn).vm.$emit("click");
    expect(wrapper.emitted("click")).toHaveLength(1);
  });
});

我如何为 {(e:any)=> context.emit("focus", e)}

编写测试用例

有任何想法,请帮忙

0 个答案:

没有答案
相关问题