test: add test case for button loading state

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/button/Button.vue

@@ -1,17 +1,21 @@
 <template>
   <button
-    class="btn"
     :class="classes"
     :disabled="disabled"
+    class="btn"
     @click="handleClick"
   >
-    <span v-if="$slots.icon || loading" class="btn-icon self-center mr-3">
+    <span
+      v-if="$slots.icon || loading"
+      :class="{ 'mr-3': !!$slots.default }"
+      class="btn-icon"
+    >
       <svg
         v-if="loading"
         class="animate-spin h-5 w-5 text-white"
-        xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <circle
           class="opacity-25"
@@ -23,21 +27,21 @@
         ></circle>
         <path
           class="opacity-75"
-          fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          fill="currentColor"
         ></path>
       </svg>
       <slot v-else name="icon" />
     </span>
-    <span class="btn-content self-center">
+    <span class="btn-content">
       <slot />
     </span>
   </button>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import type { Size, Type } from "@/components/base/button/interface";
 import { computed } from "vue";
+import type { Size, Type } from "@/components/base/button/interface";
 
 const props = defineProps({
   type: {
@@ -118,6 +122,10 @@ function handleClick() {
   }
 }
 
+.btn-default {
+  border: 1px solid #d9d9d9;
+}
+
 .btn-primary {
   background: #4ccba0;
   @apply text-white;

src/components/base/button/__tests__/Button.spec.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { VButton } from "../index";
 import { mount } from "@vue/test-utils";
+import { IconSettings } from "../../../../core/icons";
 
 describe("Button", () => {
   it("should render", () => {
@@ -80,4 +81,60 @@ describe("Button", () => {
     expect(button.html()).toMatchSnapshot();
     expect(onClick).not.toHaveBeenCalled();
   });
+
+  it("should work with loading prop", async function () {
+    const wrapper = mount({
+      data() {
+        return {
+          loading: true,
+        };
+      },
+      template: `
+        <v-button :loading="loading" >
+          Hello
+        </v-button>
+      `,
+      components: {
+        VButton,
+      },
+    });
+
+    expect(wrapper.find(".btn").classes()).toContain("btn-loading");
+    expect(wrapper.find(".btn-icon").exists()).toBe(true);
+
+    // set loading = false
+    await wrapper.setData({ loading: false });
+    expect(wrapper.find(".btn").classes()).not.toContain("btn-loading");
+    expect(wrapper.find(".btn-icon").exists()).toBe(false);
+  });
+
+  it("should work with loading prop and icon slot", async function () {
+    const wrapper = mount({
+      data() {
+        return {
+          loading: false,
+        };
+      },
+      template: `
+        <v-button :loading="loading">
+        <template #icon>
+          IconSettings
+        </template>
+        Hello
+        </v-button>
+      `,
+      components: {
+        VButton,
+        IconSettings,
+      },
+    });
+
+    expect(wrapper.find(".btn-icon").exists()).toBe(true);
+    expect(wrapper.find(".btn").classes()).not.toContain("btn-loading");
+
+    await wrapper.setData({ loading: true });
+
+    expect(wrapper.find(".btn-icon").exists()).toBe(true);
+    expect(wrapper.find(".btn").classes()).toContain("btn-loading");
+  });
 });

src/components/base/button/__tests__/__snapshots__/Button.spec.ts.snap

@@ -1,61 +1,61 @@
 // Vitest Snapshot v1
 
 exports[`Button > should render 1`] = `
-"<button class=\\"btn btn-md btn-default\\">
+"<button class=\\"btn-md btn-default btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with block prop 1`] = `
-"<button class=\\"btn btn-md btn-default btn-block\\">
+"<button class=\\"btn-md btn-default btn-block btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with circle prop 1`] = `
-"<button class=\\"btn btn-md btn-default btn-circle\\">
+"<button class=\\"btn-md btn-default btn-circle btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with disabled prop 1`] = `
-"<button class=\\"btn btn-md btn-default\\" disabled=\\"\\">
+"<button class=\\"btn-md btn-default btn\\" disabled=\\"\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 1`] = `
-"<button class=\\"btn btn-lg btn-default\\">
+"<button class=\\"btn-lg btn-default btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 2`] = `
-"<button class=\\"btn btn-sm btn-default\\">
+"<button class=\\"btn-sm btn-default btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 3`] = `
-"<button class=\\"btn btn-xs btn-default\\">
+"<button class=\\"btn-xs btn-default btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 1`] = `
-"<button class=\\"btn btn-md btn-primary\\">
+"<button class=\\"btn-md btn-primary btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 2`] = `
-"<button class=\\"btn btn-md btn-secondary\\">
+"<button class=\\"btn-md btn-secondary btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 3`] = `
-"<button class=\\"btn btn-md btn-danger\\">
+"<button class=\\"btn-md btn-danger btn\\">
-  <!--v-if--><span class=\\"btn-content self-center\\"></span>
+  <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;