refactor:

update modal componant and tests

src/components/ModalComponent.vue

@@ -6,23 +6,14 @@
         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
             <h2 class="font-bold mb-4">{{ title }}</h2>
             <p class="mb-4">{{ message }}</p>
-            <input
-                v-if="showInput"
-                :type="typeValue"
-                v-model="inputValue"
-                @input="$emit('update:inputValue', inputValue)"
-                class="border border-gray-300 p-2 w-full"
-                :placeholder="inputPlaceholder"
-            />
+
+            <slot name="input"></slot>
+
             <div class="flex flex-col justify-center items-center gap-3 mt-3 w-full">
-                <button
-                    v-if="showButton"
-                    :disabled="!isInputValid"
-                    @click="buttonAction && buttonAction!()"
-                    class="active-button font-bold py-2 px-4 w-1/2 hover:bg-[#f7da7c] border-2 border-[#f7da7c] disabled:border-transparent"
-                >
-                    {{ button1 }}
-                </button>
+                <slot name="buttons"></slot>
+            </div>
+
+            <div class="flex justify-center mt-4">
                 <button
                     @click="closeModal"
                     class="font-bold py-2 px-4 w-1/2 bg-white border-2 border-[#f7da7c] hover:bg-[#f7da7c]"
@@ -36,29 +27,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 
 defineProps({
     title: String,
     message: String,
-    button1: String,
     isModalOpen: Boolean,
-    buttonAction: {
-        type: Function,
-        default: () => {}
-    },
-    showButton: Boolean,
-    showInput: Boolean,
-    typeValue: String,
-    inputPlaceholder: String,
-    isInputValid: Boolean
 })
 
-const emits = defineEmits(['update:isModalOpen', 'update:inputValue'])
-const inputValue = ref('')
+const emits = defineEmits(['update:isModalOpen'])
 
 function closeModal() {
-    inputValue.value = ''
     emits('update:isModalOpen', false)
 }
 </script>

src/components/__tests__/ModalTest.spec.ts

@@ -39,30 +39,4 @@ describe('ModalComponent', () => {
             throw new Error('Close button not found')
         }
     })
-
-    it('button is shown when showButton is true', async () => {
-        expect(wrapper.props().showButton).toBe(true)
-        expect(wrapper.find('.active-button').exists()).toBe(true)
-    })
-
-    it('button is not shown when showButton is false', async () => {
-        await wrapper.setProps({ showButton: false })
-        await wrapper.vm.$nextTick()
-
-        expect(wrapper.props().showButton).toBe(false)
-        expect(wrapper.find('.active-button').exists()).toBe(false)
-    })
-
-    it('input is shown when showInput is true', async () => {
-        await wrapper.setProps({ showInput: true })
-        await wrapper.vm.$nextTick()
-
-        expect(wrapper.props().showInput).toBe(true)
-        expect(wrapper.find('input').exists()).toBe(true)
-    })
-
-    it('input is not shown when showInput is false', async () => {
-        expect(wrapper.props().showInput).toBe(false)
-        expect(wrapper.find('input').exists()).toBe(false)
-    })
 })