test: add input component test case about props and v-model

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-19 14:39:38 +08:00
parent 55f23cb961
commit c4479ff1fe
3 changed files with 50 additions and 3 deletions

View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { computed } from "vue";
import type { Size } from "@/components/base/input/interface"; import type { Size } from "@/components/base/input/interface";
const props = defineProps({ const props = defineProps({

View File

@ -17,4 +17,51 @@ describe("Input", () => {
input.unmount(); input.unmount();
}); });
}); });
it("should work with disabled prop", async function () {
const input = mount(VInput);
expect(input.find("input").attributes()["disabled"]).toBeUndefined();
// set disabled prop
await input.setProps({ disabled: true });
expect(input.find("input").attributes()["disabled"]).toBeDefined();
});
it("should work with placeholder prop", async function () {
const input = mount(VInput);
expect(input.find("input").attributes()["placeholder"]).toBeUndefined();
// set placeholder prop
const placeholderText = "Please enter your name";
await input.setProps({ placeholder: placeholderText });
expect(input.find("input").attributes()["placeholder"]).toBe(
placeholderText
);
});
it("should work with v-model", async function () {
const wrapper = mount({
data() {
return {
value: "Ryan",
};
},
template: `
<v-input v-model="value"/>
`,
components: { VInput },
});
expect(wrapper.find("input").element.value).toBe("Ryan");
// change value
await wrapper.setData({
value: "Ryan Wang",
});
expect(wrapper.find("input").element.value).toBe("Ryan Wang");
// change modelValue by input element value
await wrapper.find("input").setValue("ryanwang");
expect(wrapper.vm.$data.value).toBe("ryanwang");
});
}); });

View File

@ -1,4 +1,4 @@
import { describe, expect, it, vi } from "vitest"; import { describe, expect, it } from "vitest";
import { VTextarea } from "../index"; import { VTextarea } from "../index";
import { mount } from "@vue/test-utils"; import { mount } from "@vue/test-utils";