feat(VsButton): add loading state & test code (#33)

pubg · Dec 20, 2023 · 74babf2 · 74babf2
1 parent cbabf95
commit 74babf2
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 18 deletions.
diff --git a/packages/vlossom/src/assets/icons/rotate-right.ts b/packages/vlossom/src/assets/icons/rotate-right.ts
@@ -0,0 +1,6 @@
+export default {
+    template: `
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path fill="currentColor" d="M522-80v-82q34-5 66.5-18t61.5-34l56 58q-42 32-88 51.5T522-80Zm-80 0Q304-98 213-199.5T122-438q0-75 28.5-140.5t77-114q48.5-48.5 114-77T482-798h6l-62-62 56-58 160 160-160 160-56-56 64-64h-8q-117 0-198.5 81.5T202-438q0 104 68 182.5T442-162v82Zm322-134-58-56q21-29 34-61.5t18-66.5h82q-5 50-24.5 96T764-214Zm76-264h-82q-5-34-18-66.5T706-606l58-56q32 39 51 86t25 98Z" />
+        </svg>`,
+};
diff --git a/packages/vlossom/src/components/vs-button/VsButton/VsButton.scss b/packages/vlossom/src/components/vs-button/VsButton/VsButton.scss
@@ -45,15 +45,15 @@
     }
 }
 
-// Primary {
+// primary {
 .vs-button {
     &.primary {
         background-color: var(--vs-button-backgroundColor, var(--vs-comp-backgroundColor-primary));
         color: var(--vs-button-color, var(--vs-comp-color-primary));
     }
 }
 
-// Size
+// size
 .vs-button {
     &.dense {
         padding: var(--vs-button-padding, 0.3rem 1.2rem);
@@ -70,7 +70,7 @@
     }
 }
 
-// Outline
+// outline
 .vs-button {
     &.outline {
         background: none;
@@ -84,31 +84,40 @@
     }
 }
 
-.rotate-ani {
-    animation: rotate 2s linear infinite;
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg);
+// loading
+.vs-button {
+    @keyframes rotate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
     }
-    100% {
-        transform: rotate(360deg);
+
+    &.loading {
+        pointer-events: none;
+
+        .loading-icon {
+            width: 1.5rem;
+            height: 1.5rem;
+            animation: rotate 2s linear infinite;
+        }
     }
 }
 
 .vs-button + .vs-button {
-    margin-left: 6px;
+    margin-left: 0.3rem;
 }
 
 @media screen and (max-width: 768px) {
-    .vs-button.mobile-full + .vs-button.mobile-full {
-        margin-top: 5px;
-    }
-
     .vs-button.mobile-full {
         width: 100%;
         margin-left: 0;
         margin-right: 0;
     }
+
+    .vs-button.mobile-full + .vs-button.mobile-full {
+        margin-top: 0.3rem;
+    }
 }
diff --git a/packages/vlossom/src/components/vs-button/VsButton/VsButton.vue b/packages/vlossom/src/components/vs-button/VsButton/VsButton.vue
@@ -9,14 +9,15 @@
             <slot />
         </span>
 
-        <span v-if="loading" class="loading-content"> rotate icon </span>
+        <rotate-right v-if="loading" aria-label="loading" class="loading-icon" />
     </button>
 </template>
 
 <script lang="ts">
 import { PropType, computed, defineComponent, toRefs } from 'vue';
 import { useColorScheme, useCustomStyle } from '@/composables';
 import { ColorScheme, VsComponent } from '@/declaration/types';
+import RotateRight from '@/assets/icons/rotate-right';
 
 interface ButtonStyleSet {
     backgroundColor: string;
@@ -35,6 +36,9 @@ const name = VsComponent.VsButton;
 
 const VsButton = defineComponent({
     name,
+    components: {
+        RotateRight,
+    },
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsButtonStyleSet>, default: '' },

diff --git a/packages/vlossom/src/components/vs-button/VsButton/__tests__/vs-button.test.ts b/packages/vlossom/src/components/vs-button/VsButton/__tests__/vs-button.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsButton from '../VsButton.vue';
+
+describe('vs-button', () => {
+    describe('disabled', () => {
+        it('disabled를 설정할 수 있다.', () => {
+            // given
+            const wrapper = mount(VsButton, {
+                props: {
+                    disabled: true,
+                },
+            });
+
+            // then
+            expect(wrapper.props('disabled')).toBe(true);
+            expect(wrapper.attributes()).toHaveProperty('disabled');
+        });
+    });
+
+    describe('loading', () => {
+        it('loading인 경우에 rotate right 아이콘이 나타난다', () => {
+            // given
+            const wrapper = mount(VsButton, {
+                props: {
+                    loading: true,
+                },
+            });
+
+            // then
+            expect(wrapper.props('loading')).toBe(true);
+            expect(wrapper.findComponent({ name: 'rotate-right' }).exists()).toBe(true);
+        });
+    });
+});