github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

test: add test case for button loading state 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-21 10:53:29 +08:00
parent 3222f3449f
commit 19c74b3cde
3 changed files with 91 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/base/button/Button.vue
View File

@ -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;

57
src/components/base/button/__tests__/Button.spec.ts
View File

@ -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");
});
});

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

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