Skip to content
Permalink
Browse files

fix(modal, tooltips, popovers): remove no longer needed `nextTick` de…

…lay when updating content in transporter portal (closes #4589) (#4604)

* chore: remove nextTick delay in BootstrapVue transporter portal

* Update transporter.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update modal.spec.js

* Update transporter.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
tmorehouse and jackmu95 committed Jan 13, 2020
1 parent 4f33e16 commit 0e3e7e03370685367ac69949e596c9fff5c68163
Showing with 18 additions and 30 deletions.
  1. +9 −23 src/components/modal/modal.spec.js
  2. +7 −5 src/utils/transporter.js
  3. +2 −2 src/utils/transporter.spec.js
@@ -86,6 +86,7 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)

await waitNT(wrapper.vm)

expect(wrapper.isEmpty()).toBe(true)
@@ -103,6 +104,7 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)

await waitNT(wrapper.vm)

expect(wrapper.isEmpty()).toBe(true)
@@ -127,9 +129,6 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

// Main outer wrapper (has z-index, etc)... The stacker <div>
@@ -186,11 +185,6 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

expect(wrapper.isEmpty()).toBe(true)
@@ -208,10 +202,6 @@ describe('modal', () => {
// Destroy modal
wrapper.destroy()

await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

@@ -235,10 +225,7 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

await waitNT(wrapper.vm)
await waitRAF()

@@ -268,8 +255,6 @@ describe('modal', () => {
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

expect($modal.attributes('aria-hidden')).toBeDefined()
expect($modal.attributes('aria-hidden')).toEqual('true')
@@ -293,7 +278,6 @@ describe('modal', () => {
})

expect(wrapper.isVueInstance()).toBe(true)
await waitNT(wrapper.vm)

// Modal title
const $title = wrapper.find('.modal-title')
@@ -441,6 +425,7 @@ describe('modal', () => {

// Try and close modal (but we prevent it)
$close.trigger('click')
await waitNT(wrapper.vm)
expect(trigger).toEqual('headerclose')
expect(evt).toBeInstanceOf(BvModalEvent)

@@ -457,6 +442,7 @@ describe('modal', () => {
trigger = null
evt = null
$close.trigger('click')
await waitNT(wrapper.vm)
expect(trigger).toEqual('headerclose')
expect(evt).toBeInstanceOf(BvModalEvent)

@@ -522,6 +508,7 @@ describe('modal', () => {

// Try and close modal (but we prevent it)
$ok.trigger('click')
await waitNT(wrapper.vm)
expect(trigger).toEqual('ok')

await waitNT(wrapper.vm)
@@ -536,6 +523,7 @@ describe('modal', () => {
cancelHide = false
trigger = null
$cancel.trigger('click')
await waitNT(wrapper.vm)
expect(trigger).toEqual('cancel')

await waitNT(wrapper.vm)
@@ -593,6 +581,7 @@ describe('modal', () => {

// Try and close modal via ESC
$modal.trigger('keydown.esc')
await waitNT(wrapper.vm)
expect(trigger).toEqual('esc')

await waitNT(wrapper.vm)
@@ -651,6 +640,7 @@ describe('modal', () => {

// Try and close modal via click out
$modal.trigger('click')
await waitNT(wrapper.vm)
expect(trigger).toEqual('backdrop')

await waitNT(wrapper.vm)
@@ -1211,14 +1201,12 @@ describe('modal', () => {
// Try and set focusin on external button
$button.trigger('focusin')
await waitNT(wrapper.vm)
await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($button.element)
expect(document.activeElement).toBe($content.element)

// Try and set focusin on external button
$button.trigger('focus')
await waitNT(wrapper.vm)
await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($button.element)
expect(document.activeElement).toBe($content.element)

@@ -1235,7 +1223,6 @@ describe('modal', () => {
$bottomTrap.trigger('focusin')
$bottomTrap.trigger('focus')
await waitNT(wrapper.vm)
await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($bottomTrap.element)
expect(document.activeElement).not.toBe($content.element)
// The close (x) button (first tabable in modal) should be focused
@@ -1254,7 +1241,6 @@ describe('modal', () => {
$topTrap.trigger('focusin')
$topTrap.trigger('focus')
await waitNT(wrapper.vm)
await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($topTrap.element)
expect(document.activeElement).not.toBe($bottomTrap.element)
expect(document.activeElement).not.toBe($content.element)
@@ -95,11 +95,13 @@ export const BTransporterSingle = /*#__PURE__*/ Vue.extend({
this.mountTarget()
},
updated() {
// Placed in a nextTick to ensure that children have completed
// updating before rendering in the target
this.$nextTick(() => {
this.updateTarget()
})
// We need to make sure that all children have completed updating
// before rendering in the target
// `vue-simple-portal` has the this in a `$nextTick()`,
// while `portal-vue` doesn't
// Just trying to see if the `$nextTick()` delay is required or not
// Since all slots in Vue 2.6.x are always functions
this.updateTarget()
},
beforeDestroy() {
this.unmountTarget()
@@ -39,7 +39,7 @@ describe('utils/transporter component', () => {
})

expect(wrapper.isVueInstance()).toBe(true)
await waitNT(wrapper.vm)

await waitNT(wrapper.vm)

expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
@@ -54,7 +54,7 @@ describe('utils/transporter component', () => {
expect(target.parentElement).toBe(document.body)

wrapper.destroy()
await waitNT(wrapper.vm)

await waitNT(wrapper.vm)

expect(target.parentElement).toEqual(null)

0 comments on commit 0e3e7e0

Please sign in to comment.
You can’t perform that action at this time.