CW-2824: Vue composition API tests (#14)

* vue compistion api tests * use mitt in react hooks tests * fix spelling
livechat · Jan 12, 2022 · 1ee66ee · 1ee66ee
1 parent 7388cd7
commit 1ee66ee
Show file tree

Hide file tree

Showing 25 changed files with 743 additions and 204 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,8 +41,10 @@
     "jest": "27.4.3",
     "lerna": "4.0.0",
     "lint-staged": "12.0.2",
+    "mitt": "3.0.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.4.1",
+    "regenerator-runtime": "^0.13.9",
     "rimraf": "3.0.2",
     "rollup": "2.60.0",
     "rollup-plugin-dts": "4.0.1",

diff --git a/packages/widget-react/src/hooks/__tests__/test-utils.tsx b/packages/widget-react/src/hooks/__tests__/test-utils.tsx
@@ -1,23 +1,6 @@
 import * as React from 'react'
 import { render } from 'react-dom'
 
-export function createDispatcher() {
-	const events = new Map<string, VoidFunction | ((...args: any) => void)>()
-
-	function setListener(name: Parameters<typeof events.set>['0'], callback: Parameters<typeof events.set>['1']) {
-		events.set(name, callback)
-	}
-
-	function dispatch(name: Parameters<typeof events.set>['0'], payload?: any) {
-		const callback = events.get(name)
-		if (callback) {
-			callback(payload)
-		}
-	}
-
-	return { setListener, dispatch }
-}
-
 export function createHookValueContainer(hook: () => any, root: HTMLElement | null) {
 	const resultId = 'result'
 

diff --git a/packages/widget-react/src/hooks/__tests__/useWidgetChatData.spec.ts b/packages/widget-react/src/hooks/__tests__/useWidgetChatData.spec.ts
@@ -1,22 +1,23 @@
+import mitt from 'mitt'
 import { act } from 'react-dom/test-utils'
 import { createWidget, CustomerData } from '@livechat/widget-core'
 import type { ExtendedWindow, WidgetInstance } from '@livechat/widget-core'
 
 import { useWidgetChatData } from '../useWidgetChatData'
-import { createDispatcher, createHookValueContainer } from './test-utils'
+import { createHookValueContainer } from './test-utils'
 
 declare const window: ExtendedWindow
 
 describe('React Hooks', () => {
+	const emitter = mitt()
 	let widget: WidgetInstance
 	let container: ReturnType<typeof createHookValueContainer>
-	const { setListener, dispatch } = createDispatcher()
 
 	beforeEach(() => {
 		document.body.innerHTML = '<div id="root"></div>'
 		widget = createWidget({ license: '123456' })
 		container = createHookValueContainer(useWidgetChatData, document.getElementById('root'))
-		window.LiveChatWidget.on = window.LiveChatWidget.once = setListener as typeof window.LiveChatWidget.on
+		window.LiveChatWidget.on = window.LiveChatWidget.once = emitter.on.bind(null) as typeof window.LiveChatWidget.on
 
 		act(() => {
 			container.mount()
@@ -52,8 +53,9 @@ describe('React Hooks', () => {
 		}) as typeof window.LiveChatWidget.get)
 
 		act(() => {
-			dispatch('customer_status_changed')
+			emitter.emit('customer_status_changed')
 		})
+
 		expect(getResultContent()).toMatchInlineSnapshot(`
 		"{
 		  \\"chatId\\": \\"abcdef\\",
@@ -69,7 +71,7 @@ describe('React Hooks', () => {
 		})
 
 		act(() => {
-			dispatch('customer_status_changed')
+			emitter.emit('customer_status_changed')
 		})
 
 		expect(getResultContent()).toMatchInlineSnapshot(`"null"`)

diff --git a/packages/widget-react/src/hooks/__tests__/useWidgetCustomerData.spec.ts b/packages/widget-react/src/hooks/__tests__/useWidgetCustomerData.spec.ts
@@ -1,16 +1,17 @@
+import mitt from 'mitt'
 import { act } from 'react-dom/test-utils'
 import { createWidget, CustomerData } from '@livechat/widget-core'
 import type { ExtendedWindow, WidgetInstance } from '@livechat/widget-core'
 
 import { useWidgetCustomerData } from '../useWidgetCustomerData'
-import { createDispatcher, createHookValueContainer } from './test-utils'
+import { createHookValueContainer } from './test-utils'
 
 declare const window: ExtendedWindow
 
 describe('useWidgetCustomerData', () => {
+	const emitter = mitt()
 	let widget: WidgetInstance
 	let container: ReturnType<typeof createHookValueContainer>
-	const { setListener, dispatch } = createDispatcher()
 	const customerData: CustomerData = {
 		id: 'abcdefg',
 		name: 'John Doe',
@@ -24,7 +25,7 @@ describe('useWidgetCustomerData', () => {
 		document.body.innerHTML = '<div id="root"></div>'
 		widget = createWidget({ license: '123456' })
 		container = createHookValueContainer(useWidgetCustomerData, document.getElementById('root'))
-		window.LiveChatWidget.on = window.LiveChatWidget.once = setListener as typeof window.LiveChatWidget.on
+		window.LiveChatWidget.on = window.LiveChatWidget.once = emitter.on.bind(null) as typeof window.LiveChatWidget.on
 
 		act(() => {
 			container.mount()
@@ -49,8 +50,9 @@ describe('useWidgetCustomerData', () => {
 		const { getResultContent } = container
 
 		act(() => {
-			dispatch('ready', { customerData })
+			emitter.emit('ready', { customerData })
 		})
+
 		expect(getResultContent()).toMatchInlineSnapshot(`
 		"{
 		  \\"id\\": \\"abcdefg\\",
@@ -76,8 +78,9 @@ describe('useWidgetCustomerData', () => {
 		})
 
 		act(() => {
-			dispatch('customer_status_changed')
+			emitter.emit('customer_status_changed')
 		})
+
 		expect(getResultContent()).toMatchInlineSnapshot(`
 		"{
 		  \\"id\\": \\"abcdefg\\",
@@ -98,16 +101,18 @@ describe('useWidgetCustomerData', () => {
 		act(() => {
 			widget.destroy()
 		})
+
 		expect(getResultContent()).toMatchInlineSnapshot(`"null"`)
 	})
 
 	it('should cleanup event listeners on component unmount', () => {
 		const { unmount } = container
-
 		const offSpy = jest.spyOn(window.LiveChatWidget, 'off')
+
 		act(() => {
 			unmount()
 		})
+
 		expect(offSpy).toBeCalled()
 	})
 })
diff --git a/packages/widget-react/src/hooks/__tests__/useWidgetGreeting.spec.ts b/packages/widget-react/src/hooks/__tests__/useWidgetGreeting.spec.ts
@@ -1,16 +1,17 @@
+import mitt from 'mitt'
 import { act } from 'react-dom/test-utils'
 import { createWidget, Greeting } from '@livechat/widget-core'
 import type { ExtendedWindow, WidgetInstance } from '@livechat/widget-core'
 
 import { useWidgetGreeting } from '../useWidgetGreeting'
-import { createDispatcher, createHookValueContainer } from './test-utils'
+import { createHookValueContainer } from './test-utils'
 
 declare const window: ExtendedWindow
 
 describe('useWidgetGreeting', () => {
+	const emitter = mitt()
 	let widget: WidgetInstance
 	let container: ReturnType<typeof createHookValueContainer>
-	const { setListener, dispatch } = createDispatcher()
 	const greeting: Greeting = {
 		id: 1,
 		uniqueId: 'abcdef',
@@ -20,7 +21,7 @@ describe('useWidgetGreeting', () => {
 		document.body.innerHTML = '<div id="root"></div>'
 		widget = createWidget({ license: '123456' })
 		container = createHookValueContainer(useWidgetGreeting, document.getElementById('root'))
-		window.LiveChatWidget.on = window.LiveChatWidget.once = setListener as typeof window.LiveChatWidget.on
+		window.LiveChatWidget.on = window.LiveChatWidget.once = emitter.on.bind(null) as typeof window.LiveChatWidget.on
 
 		act(() => {
 			container.mount()
@@ -45,7 +46,7 @@ describe('useWidgetGreeting', () => {
 		const { getResultContent } = container
 
 		act(() => {
-			dispatch('greeting_displayed', greeting)
+			emitter.emit('greeting_displayed', greeting)
 		})
 
 		expect(getResultContent()).toMatchInlineSnapshot(`
@@ -60,7 +61,7 @@ describe('useWidgetGreeting', () => {
 		const { getResultContent } = container
 
 		act(() => {
-			dispatch('greeting_hidden')
+			emitter.emit('greeting_hidden')
 		})
 
 		expect(getResultContent()).toMatchInlineSnapshot(`"null"`)

diff --git a/packages/widget-react/src/hooks/__tests__/useWidgetIsReady.spec.ts b/packages/widget-react/src/hooks/__tests__/useWidgetIsReady.spec.ts
@@ -1,22 +1,23 @@
+import mitt from 'mitt'
 import { act } from 'react-dom/test-utils'
 import { createWidget } from '@livechat/widget-core'
 import type { ExtendedWindow, WidgetInstance } from '@livechat/widget-core'
 
 import { useWidgetIsReady } from '../useWidgetIsReady'
-import { createDispatcher, createHookValueContainer } from './test-utils'
+import { createHookValueContainer } from './test-utils'
 
 declare const window: ExtendedWindow
 
 describe('useWidgetIsReady', () => {
+	const emitter = mitt()
 	let widget: WidgetInstance
 	let container: ReturnType<typeof createHookValueContainer>
-	const { setListener, dispatch } = createDispatcher()
 
 	beforeEach(() => {
 		document.body.innerHTML = '<div id="root"></div>'
 		widget = createWidget({ license: '123456' })
 		container = createHookValueContainer(useWidgetIsReady, document.getElementById('root'))
-		window.LiveChatWidget.on = window.LiveChatWidget.once = setListener as typeof window.LiveChatWidget.on
+		window.LiveChatWidget.on = window.LiveChatWidget.once = emitter.on.bind(null) as typeof window.LiveChatWidget.on
 
 		act(() => {
 			container.mount()
@@ -41,7 +42,7 @@ describe('useWidgetIsReady', () => {
 		const { getResultContent } = container
 
 		act(() => {
-			dispatch('ready')
+			emitter.emit('ready')
 		})
 
 		expect(getResultContent()).toMatchInlineSnapshot(`"true"`)
@@ -53,6 +54,7 @@ describe('useWidgetIsReady', () => {
 		act(() => {
 			widget?.destroy()
 		})
+
 		expect(getResultContent()).toMatchInlineSnapshot(`"false"`)
 	})