test: add test cases for focusTrap

packages/vue-final-modal/cypress/components/App.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ModalsContainer } from '~/index'
+</script>
+
+<template>
+  <div>
+    <div v-for="i in 1000" :key="i">
+      id: {{ i }}
+    </div>
+    <slot />
+
+    <ModalsContainer />
+  </div>
+</template>

packages/vue-final-modal/cypress/components/Form.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'submit', payload: {
+    account: string
+    password: string
+  }): void
+}>()
+
+const account = ref('')
+const password = ref('')
+</script>
+
+<template>
+  <form @submit.prevent="() => emit('submit', { account, password })">
+    <label>Account:<input v-model="account" class="form-account" type="text"></label>
+    <label>Password:<input v-model="password" class="form-password" type="password"></label>
+
+    <button class="form-submit" type="submit">
+      Submit
+    </button>
+  </form>
+</template>

packages/vue-final-modal/cypress/components/focusTrap.spec.ts

@@ -0,0 +1,60 @@
+import App from './App.vue'
+import Form from './Form.vue'
+import { VueFinalModal, createVfm, useModal } from '~/index'
+
+describe('Test focusTrap', () => {
+  it('Props: focusTrap', () => {
+    const vfm = createVfm()
+
+    const firstModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { contentClass: 'first-modal-content' },
+      slots: {
+        default: Form,
+      },
+    })
+
+    const secondModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { contentClass: 'second-modal-content' },
+      slots: {
+        default: '<p>Hello world!</p>',
+      },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    })
+      .then(async () => {
+        await firstModal.open()
+        cy.focused().as('firstModalFocus')
+        cy.get('@firstModalFocus').should('have.class', 'first-modal-content')
+      })
+      .then(async () => {
+        cy.get('.form-submit').focus()
+        cy.focused().as('formSubmitFocus')
+        cy.get('@formSubmitFocus').should('have.class', 'form-submit')
+      })
+      .then(async () => {
+        await secondModal.open()
+        cy.focused().as('secondModalFocus')
+        cy.get('@secondModalFocus').should('have.class', 'second-modal-content')
+      })
+      .then(async () => {
+        await secondModal.close()
+        cy.focused().as('formSubmitFocus')
+        cy.get('@formSubmitFocus').should('have.class', 'form-submit')
+      })
+      .then(async () => {
+        await firstModal.close()
+        await firstModal.open()
+        cy.focused().as('firstModalFocus')
+        cy.get('@firstModalFocus').should('have.class', 'first-modal-content')
+      })
+  })
+})

packages/vue-final-modal/cypress/components/useModal.spec.ts

@@ -1,4 +1,5 @@
-import { ModalsContainer, createVfm, useModal } from '~/index'
+import App from './App.vue'
+import { createVfm, useModal } from '~/index'
 
 describe('Test useModal()', () => {
   it('Should be closed by default', () => {
@@ -11,8 +12,11 @@ describe('Test useModal()', () => {
       },
     })
 
-    cy.mount(ModalsContainer, {
-      global: { plugins: [vfm] },
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
     })
       .then(() => {
         cy.contains('Hello World!').should('not.exist')
@@ -34,8 +38,11 @@ describe('Test useModal()', () => {
       },
     })
 
-    cy.mount(ModalsContainer, {
-      global: { plugins: [vfm] },
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
     })
       .then(() => {
         cy.contains('Hello World!')

packages/vue-final-modal/cypress/components/useZIndex.spec.ts

@@ -1,4 +1,5 @@
-import { ModalsContainer, VueFinalModal, createVfm, useModal } from '~/index'
+import App from './App.vue'
+import { VueFinalModal, createVfm, useModal } from '~/index'
 
 describe('Test useZIndex()', () => {
   it('Props: zIndexFn()', () => {
@@ -21,8 +22,11 @@ describe('Test useZIndex()', () => {
       attrs: { class: 'third-modal' },
     })
 
-    cy.mount(ModalsContainer, {
-      global: { plugins: [vfm] },
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
     })
       .then(() => {
         firstModal.open()

packages/vue-final-modal/src/components/ModalsContainer.vue

@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
       :key="modal.id"
       v-bind="modal.attrs"
       v-model="modal.modelValue"
-      @closed="withSyncOpenDynamicModals(() => _vfm.resolvedClosed?.(index))"
+      @closed="() => withSyncOpenDynamicModals(() => _vfm.resolvedClosed?.(index))"
       @opened="() => _vfm.resolvedOpened?.(index)"
     >
       <template v-for="(slot, key) in modal.slots" #[key] :key="key">