Skip to content

Commit ca1db28

Browse files
microcipcipmicrocipcip
committed
refactor: Move repetitive tests in utility functions
1 parent a9da872 commit ca1db28

File tree

16 files changed

+224
-309
lines changed

16 files changed

+224
-309
lines changed

‎src/components/useBeforeUnload/useBeforeUnload.spec.ts‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,51 @@
1-
// import { mount } from '@src/helpers/test'
2-
// import { useBeforeUnload } from '@src/vue-use-kit'
1+
import {
2+
checkElementExistenceOnMount,
3+
checkOnMountAndUnmountEvents,
4+
checkOnStartEvents,
5+
checkOnStopEvents
6+
} from '@src/helpers/test'
7+
import { ref } from '@vue/composition-api'
8+
import { useBeforeUnload } from '@src/vue-use-kit'
39

410
afterEach(() => {
511
jest.clearAllMocks()
612
})
713

14+
const testComponent = (onMount = true) => ({
15+
template: `
16+
<div>
17+
<div id="isTracking" v-if="isTracking"></div>
18+
<button id="start" @click="start"></button>
19+
<button id="stop" @click="stop"></button>
20+
</div>
21+
`,
22+
setup() {
23+
const isDirty = ref(false)
24+
const { isTracking, start, stop } = useBeforeUnload(isDirty, onMount)
25+
return { isTracking, start, stop }
26+
}
27+
})
28+
829
describe('useBeforeUnload', () => {
9-
it('should do something', () => {
10-
// Add test here
30+
const events = ['beforeunload']
31+
32+
it('should add events on mounted and remove them on unmounted', async () => {
33+
await checkOnMountAndUnmountEvents(window, events, testComponent)
34+
})
35+
36+
it('should add events again when start is called', async () => {
37+
await checkOnStartEvents(window, events, testComponent)
38+
})
39+
40+
it('should remove events when stop is called', async () => {
41+
await checkOnStopEvents(window, events, testComponent)
42+
})
43+
44+
it('should show #isTracking when runOnMount is true', async () => {
45+
await checkElementExistenceOnMount(true, testComponent)
46+
})
47+
48+
it('should not show #isTracking when runOnMount is false', async () => {
49+
await checkElementExistenceOnMount(false, testComponent)
1150
})
1251
})

‎src/components/useClickAway/useClickAway.spec.ts‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mount } from '@src/helpers/test'
1+
import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
22
import { ref } from '@vue/composition-api'
33
import { useClickAway } from '@src/vue-use-kit'
44

@@ -26,23 +26,9 @@ const testComponent = () => ({
2626
})
2727

2828
describe('useClickAway', () => {
29-
it('should call addEventListener', async () => {
30-
const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
31-
const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
32-
const wrapper = mount(testComponent())
33-
await wrapper.vm.$nextTick()
34-
expect(addEventListenerSpy).toHaveBeenCalled()
35-
expect(addEventListenerSpy).toBeCalledWith(
36-
'mousedown',
37-
expect.any(Function)
38-
)
29+
const events = ['mousedown', 'touchstart']
3930

40-
// Destroy instance to check if the remove event listener is being called
41-
wrapper.destroy()
42-
expect(removeEventListenerSpy).toHaveBeenCalled()
43-
expect(removeEventListenerSpy).toBeCalledWith(
44-
'mousedown',
45-
expect.any(Function)
46-
)
31+
it('should call addEventListener on mount and unmount', async () => {
32+
await checkOnMountAndUnmountEvents(document, events, testComponent)
4733
})
4834
})

‎src/components/useGeolocation/useGeolocation.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ const testComponent = () => ({
4444
})
4545

4646
describe('useGeolocation', () => {
47-
it('should call getCurrentPosition and watchPosition onMounted', () => {
47+
it('should call getCurrentPosition and watchPosition on mounted', () => {
4848
expect(getCurrentPosition).toHaveBeenCalledTimes(0)
4949
expect(watchPosition).toHaveBeenCalledTimes(0)
5050
mount(testComponent())
5151
expect(getCurrentPosition).toHaveBeenCalledTimes(1)
5252
expect(watchPosition).toHaveBeenCalledTimes(1)
5353
})
5454

55-
it('should call clearWatch onUnmounted', () => {
55+
it('should call clearWatch on unmounted', () => {
5656
expect(clearWatch).toHaveBeenCalledTimes(0)
5757
const wrapper = mount(testComponent())
5858
wrapper.vm.$destroy()

‎src/components/useHover/useHover.spec.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mount } from '@src/helpers/test'
1+
import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
22
import { ref } from '@vue/composition-api'
33
import { useHover } from '@src/vue-use-kit'
44

@@ -18,25 +18,10 @@ const testComponent = () => ({
1818
})
1919

2020
describe('useHover', () => {
21-
it('should call document.body hover events', () => {
22-
const addEventListenerSpy = jest.spyOn(document.body, 'addEventListener')
23-
const removeEventListenerSpy = jest.spyOn(
24-
document.body,
25-
'removeEventListener'
26-
)
27-
const wrapper = mount(testComponent())
28-
expect(addEventListenerSpy).toHaveBeenCalled()
29-
expect(addEventListenerSpy).toBeCalledWith(
30-
'mouseenter',
31-
expect.any(Function)
32-
)
33-
expect(removeEventListenerSpy).not.toHaveBeenCalled()
34-
wrapper.destroy()
35-
expect(removeEventListenerSpy).toHaveBeenCalled()
36-
expect(removeEventListenerSpy).toBeCalledWith(
37-
'mouseenter',
38-
expect.any(Function)
39-
)
21+
const events = ['mouseenter', 'mouseleave']
22+
23+
it('should add events on mounted and remove them on unmounted', async () => {
24+
await checkOnMountAndUnmountEvents(document.body, events, testComponent)
4025
})
4126

4227
it('should return isHovered false by default', () => {

‎src/components/useIdle/useIdle.spec.ts‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { mount } from '@src/helpers/test'
1+
import {
2+
checkOnMountAndUnmountEvents,
3+
checkOnStartEvents,
4+
checkOnStopEvents,
5+
mount
6+
} from '@src/helpers/test'
27
import { useIdle, idleEventsList } from '@src/vue-use-kit'
38

49
afterEach(() => {
@@ -20,48 +25,21 @@ const testComponent = () => ({
2025
})
2126

2227
describe('useIdle', () => {
23-
// the total of the events is idleEventsList + visibilitychange
24-
const totEvents = idleEventsList.length + 1
28+
const events = [...idleEventsList, 'visibilitychange']
2529

26-
it('should call addEventListener', async () => {
27-
const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
28-
const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
29-
const wrapper = mount(testComponent())
30-
await wrapper.vm.$nextTick()
31-
expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents)
32-
expect(addEventListenerSpy).toBeCalledWith(
33-
'mousemove',
34-
expect.any(Function)
35-
)
36-
37-
// Destroy instance to check if the remove event listener is being called
38-
wrapper.destroy()
39-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(totEvents)
40-
expect(removeEventListenerSpy).toBeCalledWith(
41-
'mousemove',
42-
expect.any(Function)
43-
)
30+
it('should add events on mounted and remove them on unmounted', async () => {
31+
await checkOnMountAndUnmountEvents(document, events, testComponent)
4432
})
4533

46-
it('should call addEventListener again when start is called', async () => {
47-
const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
48-
const wrapper = mount(testComponent())
49-
expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents)
50-
wrapper.find('#stop').trigger('click')
51-
52-
// Wait for Vue to append #start in the DOM
53-
await wrapper.vm.$nextTick()
54-
wrapper.find('#start').trigger('click')
55-
expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents * 2)
34+
it('should add events on mounted and remove them on unmounted', async () => {
35+
await checkOnMountAndUnmountEvents(document, events, testComponent)
5636
})
5737

58-
it('should call removeEventListener when stop is called', async () => {
59-
const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
60-
const wrapper = mount(testComponent())
61-
wrapper.find('#stop').trigger('click')
38+
it('should add events again when start is called', async () => {
39+
await checkOnStartEvents(document, events, testComponent)
40+
})
6241

63-
// Wait for Vue to append #start in the DOM
64-
await wrapper.vm.$nextTick()
65-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(totEvents)
42+
it('should remove events when stop is called', async () => {
43+
await checkOnStopEvents(document, events, testComponent)
6644
})
6745
})

‎src/components/useIntersection/useIntersection.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const testComponent = (onMount = true) => ({
3535
})
3636

3737
describe('useIntersection', () => {
38-
it('should call IntersectionObserver onMounted', () => {
38+
it('should call IntersectionObserver on mounted', () => {
3939
expect(observe).toHaveBeenCalledTimes(0)
4040
mount(testComponent())
4141
expect(observe).toHaveBeenCalledTimes(1)

‎src/components/useLocation/useLocation.spec.ts‎

Lines changed: 18 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { mount } from '@src/helpers/test'
1+
import {
2+
checkElementExistenceOnMount,
3+
checkOnMountAndUnmountEvents,
4+
checkOnStartEvents,
5+
checkOnStopEvents,
6+
mount
7+
} from '@src/helpers/test'
28
import { useLocation } from '@src/vue-use-kit'
39

410
afterEach(() => {
@@ -35,58 +41,27 @@ describe('useLocation', () => {
3541
'protocol',
3642
'search'
3743
]
38-
const events = ['popstate', 'pushstate', 'replacestate']
3944

40-
it('should call popstate, pushstate and replacestate onMounted', async () => {
41-
const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
42-
const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
43-
const wrapper = mount(testComponent())
44-
await wrapper.vm.$nextTick()
45-
expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
46-
events.forEach(event => {
47-
expect(addEventListenerSpy).toBeCalledWith(event, expect.any(Function))
48-
})
45+
const events = ['popstate', 'pushstate', 'replacestate']
4946

50-
// Destroy instance to check if the remove event listener is being called
51-
wrapper.destroy()
52-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(events.length)
53-
events.forEach(event => {
54-
expect(removeEventListenerSpy).toBeCalledWith(event, expect.any(Function))
55-
})
47+
it('should add events on mounted and remove them on unmounted', async () => {
48+
await checkOnMountAndUnmountEvents(window, events, testComponent)
5649
})
5750

58-
it('should call addEventListener again when start is called', async () => {
59-
const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
60-
const wrapper = mount(testComponent())
61-
expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
62-
wrapper.find('#stop').trigger('click')
63-
64-
// Wait for Vue to append #start in the DOM
65-
await wrapper.vm.$nextTick()
66-
wrapper.find('#start').trigger('click')
67-
expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length * 2)
51+
it('should add events again when start is called', async () => {
52+
await checkOnStartEvents(window, events, testComponent)
6853
})
6954

70-
it('should call removeEventListener when stop is called', async () => {
71-
const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
72-
const wrapper = mount(testComponent())
73-
wrapper.find('#stop').trigger('click')
74-
75-
// Wait for Vue to append #start in the DOM
76-
await wrapper.vm.$nextTick()
77-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(events.length)
55+
it('should remove events when stop is called', async () => {
56+
await checkOnStopEvents(window, events, testComponent)
7857
})
7958

80-
it('should show #isTracking when onMount is true', async () => {
81-
const wrapper = mount(testComponent(true))
82-
await wrapper.vm.$nextTick()
83-
expect(wrapper.find('#isTracking').exists()).toBe(true)
59+
it('should show #isTracking when runOnMount is true', async () => {
60+
await checkElementExistenceOnMount(true, testComponent)
8461
})
8562

86-
it('should not show #isTracking when onMount is false', async () => {
87-
const wrapper = mount(testComponent(false))
88-
await wrapper.vm.$nextTick()
89-
expect(wrapper.find('#isTracking').exists()).toBe(false)
63+
it('should not show #isTracking when runOnMount is false', async () => {
64+
await checkElementExistenceOnMount(false, testComponent)
9065
})
9166

9267
it('should display the locationState object', async () => {

‎src/components/useMediaDevices/useMediaDevices.spec.ts‎

Lines changed: 21 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { mount } from '@src/helpers/test'
1+
import {
2+
checkElementExistenceOnMount,
3+
checkOnMountAndUnmountEvents,
4+
checkOnStartEvents,
5+
checkOnStopEvents,
6+
mount
7+
} from '@src/helpers/test'
28
import { useMediaDevices } from '@src/vue-use-kit'
39

410
const mediaDeviceInfo = {
@@ -38,64 +44,29 @@ const testComponent = (onMount = true) => ({
3844
})
3945

4046
describe('useMediaDevices', () => {
41-
const event = 'devicechange'
42-
it('should call devicechange onMounted', async () => {
43-
const addEventListenerSpy = jest.spyOn(
44-
navigator.mediaDevices,
45-
'addEventListener'
46-
)
47-
const removeEventListenerSpy = jest.spyOn(
48-
navigator.mediaDevices,
49-
'removeEventListener'
50-
)
51-
const wrapper = mount(testComponent())
52-
await wrapper.vm.$nextTick()
53-
expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
54-
expect(addEventListenerSpy).toBeCalledWith(event, expect.any(Function))
55-
56-
// Destroy instance to check if the remove event listener is being called
57-
wrapper.destroy()
58-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(1)
59-
expect(removeEventListenerSpy).toBeCalledWith(event, expect.any(Function))
60-
})
47+
const events = ['devicechange']
6148

62-
it('should call addEventListener again when start is called', async () => {
63-
const addEventListenerSpy = jest.spyOn(
49+
it('should add events on mounted and remove them on unmounted', async () => {
50+
await checkOnMountAndUnmountEvents(
6451
navigator.mediaDevices,
65-
'addEventListener'
52+
events,
53+
testComponent
6654
)
67-
const wrapper = mount(testComponent())
68-
expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
69-
wrapper.find('#stop').trigger('click')
70-
71-
// Wait for Vue to append #start in the DOM
72-
await wrapper.vm.$nextTick()
73-
wrapper.find('#start').trigger('click')
74-
expect(addEventListenerSpy).toHaveBeenCalledTimes(1 * 2)
7555
})
7656

77-
it('should call removeEventListener when stop is called', async () => {
78-
const removeEventListenerSpy = jest.spyOn(
79-
navigator.mediaDevices,
80-
'removeEventListener'
81-
)
82-
const wrapper = mount(testComponent())
83-
wrapper.find('#stop').trigger('click')
57+
it('should add events again when start is called', async () => {
58+
await checkOnStartEvents(navigator.mediaDevices, events, testComponent)
59+
})
8460

85-
// Wait for Vue to append #start in the DOM
86-
await wrapper.vm.$nextTick()
87-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(1)
61+
it('should remove events when stop is called', async () => {
62+
await checkOnStopEvents(navigator.mediaDevices, events, testComponent)
8863
})
8964

90-
it('should show #isTracking when onMount is true', async () => {
91-
const wrapper = mount(testComponent(true))
92-
await wrapper.vm.$nextTick()
93-
expect(wrapper.find('#isTracking').exists()).toBe(true)
65+
it('should show #isTracking when runOnMount is true', async () => {
66+
await checkElementExistenceOnMount(true, testComponent)
9467
})
9568

96-
it('should not show #isTracking when onMount is false', async () => {
97-
const wrapper = mount(testComponent(false))
98-
await wrapper.vm.$nextTick()
99-
expect(wrapper.find('#isTracking').exists()).toBe(false)
69+
it('should not show #isTracking when runOnMount is false', async () => {
70+
await checkElementExistenceOnMount(false, testComponent)
10071
})
10172
})

0 commit comments

Comments
 (0)