some tests added

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/components/Modal.vue

@@ -8,6 +8,7 @@ const modal = useModal()
 <template>
   <div
     v-if="modal.isShown"
+    data-test="modal"
     class="fixed z-10 inset-0 overflow-y-auto"
     role="dialog"
   >
@@ -25,24 +26,33 @@ const modal = useModal()
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+              <h3
+                class="text-lg leading-6 font-medium text-gray-900"
+                data-test="modal-title"
+              >
                 {{ modal.title }}
               </h3>
               <div class="mt-2">
-                <p class="text-sm text-gray-500">
-                  {{ modal.text }}
+                <p class="text-sm text-gray-500" data-test="modal-body">
+                  {{ modal.body }}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 flex flex-row">
-          <BaseButton class="w-full" @click="modal.confirm">{{
-            modal.confirmText
-          }}</BaseButton>
-          <BaseButton class="w-full ml-2" @click="modal.cancel">{{
-            modal.cancelText
-          }}</BaseButton>
+          <BaseButton
+            class="w-full"
+            @click="modal.confirm"
+            data-test="modal-confirm-button"
+            >{{ modal.confirmText }}</BaseButton
+          >
+          <BaseButton
+            class="w-full ml-2"
+            @click="modal.cancel"
+            data-test="modal-cancel-button"
+            >{{ modal.cancelText }}</BaseButton
+          >
         </div>
       </div>
     </div>

src/composables/__tests__/useModal.test.ts

@@ -0,0 +1,67 @@
+import { describe, assert, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import ModalComponent from '../../components/Modal.vue'
+import { useModal } from '../index'
+
+describe('composable: useModal', () => {
+  const modal = useModal()
+  const wrapper = shallowMount(ModalComponent, {
+    global: {
+      renderStubDefaultSlot: true,
+    },
+  })
+  let modalPromise: Promise<boolean>
+
+  it('is not shown by default', () => {
+    assert.equal(modal.isShown, false)
+    assert.equal(wrapper.find('[data-test="modal"]').exists(), false)
+  })
+  it('has no "title" text defined by default', () => {
+    assert.equal(modal.title, '')
+  })
+  it('has no "body" texts defined by default', () => {
+    assert.equal(modal.body, '')
+  })
+  it('has no "confirmText" texts defined by default', () => {
+    assert.equal(modal.confirmText, '')
+  })
+  it('has no "cancelText" texts defined by default', () => {
+    assert.equal(modal.cancelText, '')
+  })
+  it('will be shown after show method is called', async () => {
+    assert.equal(modal.isShown, false)
+    modalPromise = modal.show('title', 'yes', 'no', 'body')
+    assert.equal(modal.isShown, true)
+    await nextTick()
+    assert.equal(wrapper.find('[data-test="modal"]').exists(), true)
+  })
+  it('will has defined "title" texts after show method is called', () => {
+    assert.equal(modal.title, 'title')
+    assert.equal(wrapper.get('[data-test="modal-title"]').text(), 'title')
+  })
+  it('will has defined "body" text after show method is called', () => {
+    assert.equal(modal.body, 'body')
+    assert.equal(wrapper.get('[data-test="modal-body"]').text(), 'body')
+  })
+  it('will has defined "confirmText" text after show method is called', () => {
+    assert.equal(modal.confirmText, 'yes')
+    assert.equal(
+      wrapper.get('[data-test="modal-confirm-button"]').text(),
+      'yes'
+    )
+  })
+  it('will has defined "cancelText" texts after show method is called', () => {
+    assert.equal(modal.cancelText, 'no')
+    assert.equal(wrapper.get('[data-test="modal-cancel-button"]').text(), 'no')
+  })
+  it('will hide the modal after clicking confirmButton', async () => {
+    wrapper.get('[data-test="modal-confirm-button"]').trigger('click')
+    await nextTick()
+    assert.equal(modal.isShown, false)
+    assert.equal(wrapper.find('[data-test="modal"]').exists(), false)
+  })
+  it('will got an resolved promise with value true, after clicking confirmButton', async () => {
+    await expect(modalPromise).resolves.toEqual(true)
+  })
+})

src/composables/useModal.ts

@@ -11,12 +11,12 @@ const show = (
   title: string,
   confirmText: string,
   cancelText: string,
-  text = ''
-) => {
+  body = ''
+): Promise<boolean> => {
   data.title = title
   data.confirmText = confirmText
   data.cancelText = cancelText
-  data.text = text
+  data.body = body
   data.isShown = true
   return new Promise((resolve) => {
     _resolve = resolve
@@ -27,7 +27,7 @@ const data = reactive({
   isShown: false,
   show,
   title: '',
-  text: '',
+  body: '',
   confirmText: '',
   confirm: () => callback(true),
   cancelText: '',