fix(eventStack): make subscription logic to be always async (#391)

* make subscription logic async

* fix unit tests

* update changelog

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384))
 - Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402))
 - Add Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408))
+- Make `eventStack` subscription logic to be always async @kuzhelov ([#391](https://github.com/stardust-ui/react/pull/391))
 
 ### Features
 - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))

src/lib/eventStack/eventStack.tsx

@@ -34,10 +34,12 @@ class EventStack {
   sub = (name, handlers, options: any = {}) => {
     if (!isBrowser()) return
 
-    const { target = document, pool = 'default', useCapture = false } = options
-    const eventTarget = this._find(target)
+    setTimeout(() => {
+      const { target = document, pool = 'default', useCapture = false } = options
+      const eventTarget = this._find(target)
 
-    eventTarget.sub(name, handlers, pool, useCapture)
+      eventTarget.sub(name, handlers, pool, useCapture)
+    })
   }
 
   unsub = (name, handlers, options: any = {}) => {

test/specs/components/Portal/Portal-test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import _ from 'lodash'
 import { mount } from 'enzyme'
-import { domEvent, withProvider } from 'test/utils'
+import { domEvent, nextFrame, withProvider } from 'test/utils'
 
 import Portal, { PortalProps } from 'src/components/Portal/Portal'
 import PortalInner from 'src/components/Portal/PortalInner'
@@ -58,10 +58,12 @@ describe('Portal', () => {
   })
 
   describe('document click', () => {
-    it('closes the portal', () => {
+    it('closes the portal', async () => {
       const { wrapper } = mountPortal({ defaultOpen: true })
       testPortalInnerIsOpen(wrapper, true)
 
+      await nextFrame()
+
       domEvent.click(document)
       wrapper.update()
       testPortalInnerIsOpen(wrapper, false)

test/specs/lib/eventStack/eventStack-test.ts

@@ -1,37 +1,43 @@
 import { eventStack } from 'src/lib'
-import { domEvent } from 'test/utils'
+import { domEvent, nextFrame } from 'test/utils'
 
 describe('eventStack', () => {
   afterEach(() => {
     eventStack._targets = new Map()
   })
 
   describe('sub', () => {
-    test('subscribes for single target', () => {
+    test('subscribes for single target', async () => {
       const handler = jest.fn()
 
       eventStack.sub('click', handler)
+      await nextFrame()
+
       domEvent.click(document)
 
       expect(handler).toHaveBeenCalledTimes(1)
     })
 
-    test('subscribes for custom target', () => {
+    test('subscribes for custom target', async () => {
       const handler = jest.fn()
       const target = document.createElement('div')
 
       eventStack.sub('click', handler, { target })
+      await nextFrame()
+
       domEvent.click(target)
 
       expect(handler).toHaveBeenCalledTimes(1)
     })
 
-    test('subscribes for multiple targets', () => {
+    test('subscribes for multiple targets', async () => {
       const documentHandler = jest.fn()
       const windowHandler = jest.fn()
 
       eventStack.sub('click', documentHandler)
       eventStack.sub('scroll', windowHandler, { target: window })
+      await nextFrame()
+
       domEvent.click(document)
       domEvent.scroll(window)
 
@@ -41,10 +47,12 @@ describe('eventStack', () => {
   })
 
   describe('unsub', () => {
-    test('unsubscribes and destroys eventTarget if it is empty', () => {
+    test('unsubscribes and destroys eventTarget if it is empty', async () => {
       const handler = jest.fn()
 
       eventStack.sub('click', handler)
+      await nextFrame()
+
       domEvent.click(document)
 
       eventStack.unsub('click', handler)
@@ -53,12 +61,14 @@ describe('eventStack', () => {
       expect(handler).toHaveBeenCalledTimes(1)
     })
 
-    test('unsubscribes but leaves eventTarget if it contains handlers', () => {
+    test('unsubscribes but leaves eventTarget if it contains handlers', async () => {
       const clickHandler = jest.fn()
       const keyHandler = jest.fn()
 
       eventStack.sub('click', clickHandler)
       eventStack.sub('keyDown', keyHandler)
+      await nextFrame()
+
       domEvent.click(document)
 
       eventStack.unsub('click', clickHandler)
@@ -68,10 +78,12 @@ describe('eventStack', () => {
       expect(keyHandler).not.toHaveBeenCalled()
     })
 
-    test('unsubscribes from same event multiple times', () => {
+    test('unsubscribes from same event multiple times', async () => {
       const handler = jest.fn()
 
       eventStack.sub('click', handler)
+      await nextFrame()
+
       domEvent.click(document)
 
       eventStack.unsub('click', handler)

test/utils/index.ts

@@ -4,4 +4,5 @@ export { default as assertWithTimeout } from './assertWithTimeout'
 export { default as consoleUtil } from './consoleUtil'
 export { default as domEvent } from './domEvent'
 export { default as syntheticEvent } from './syntheticEvent'
+export { default as nextFrame } from './nextFrame'
 export { withProvider, mountWithProvider, mountWithProviderAndGetComponent } from './withProvider'

test/utils/nextFrame.ts

@@ -0,0 +1,6 @@
+export default () =>
+  new Promise(resolve =>
+    setTimeout(() => {
+      resolve()
+    }),
+  )