From c4479ff1fecf87610e861131b166710f38d60c63 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 19 Apr 2022 14:39:38 +0800
Subject: [PATCH] test: add input component test case about props and v-model

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/base/input/Input.vue           |  2 +-
 .../base/input/__tests__/Input.spec.ts        | 47 +++++++++++++++++++
 .../base/textarea/__tests__/Textarea.spec.ts  |  4 +-
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/base/input/Input.vue b/src/components/base/input/Input.vue
index b3295bde..f7b9fb5f 100644
--- a/src/components/base/input/Input.vue
+++ b/src/components/base/input/Input.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from "vue";
 import type { PropType } from "vue";
+import { computed } from "vue";
 import type { Size } from "@/components/base/input/interface";
 
 const props = defineProps({
diff --git a/src/components/base/input/__tests__/Input.spec.ts b/src/components/base/input/__tests__/Input.spec.ts
index 0f88f9ec..8eba29c2 100644
--- a/src/components/base/input/__tests__/Input.spec.ts
+++ b/src/components/base/input/__tests__/Input.spec.ts
@@ -17,4 +17,51 @@ describe("Input", () => {
       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");
+  });
 });
diff --git a/src/components/base/textarea/__tests__/Textarea.spec.ts b/src/components/base/textarea/__tests__/Textarea.spec.ts
index eadbbd12..e267401c 100644
--- a/src/components/base/textarea/__tests__/Textarea.spec.ts
+++ b/src/components/base/textarea/__tests__/Textarea.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { VTextarea } from "../index";
 import { mount } from "@vue/test-utils";
 
@@ -48,7 +48,7 @@ describe("Textarea", () => {
         };
       },
       template: `
-        <v-textarea v-model="value" />
+        <v-textarea v-model="value"/>
       `,
       components: { VTextarea },
     });