Skip to content

Commit 778e793

Browse files
dolfbarrdolfbarr
committed
Add previous states
1 parent ef3fd94 commit 778e793

File tree

2 files changed

+126
-31
lines changed

2 files changed

+126
-31
lines changed

‎src/index.test.tsx‎

Lines changed: 104 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
44

55
describe('useLog', () => {
66
const consoleLog = jest.spyOn(console, 'log').mockImplementation(() => {})
7+
const consoleGroup = jest.spyOn(console, 'group').mockImplementation(() => {})
78

89
beforeEach(() => {
910
jest.useFakeTimers()
@@ -23,9 +24,16 @@ describe('useLog', () => {
2324
expect(result.current.log).toBeTruthy()
2425

2526
renderHook(() => result.current.log('Test'))
26-
expect(consoleLog).toBeCalledWith('On mount: Test')
27-
expect(consoleLog).toBeCalledWith('On change: Test')
28-
expect(consoleLog).toBeCalledTimes(2)
27+
expect(consoleLog).toBeCalledWith(' On mount: Test')
28+
expect(consoleLog).toBeCalledWith(
29+
'Previous value: %cTest',
30+
'color: SlateGray; font-weight: thin;',
31+
)
32+
expect(consoleLog).toBeCalledWith(
33+
' Current value: %cTest',
34+
'color: green; font-weight: bold;',
35+
)
36+
expect(consoleLog).toBeCalledTimes(3)
2937
})
3038

3139
it('renders hook with changes', async () => {
@@ -48,33 +56,111 @@ describe('useLog', () => {
4856
}, [])
4957
})
5058

51-
// set initial values
52-
expect(consoleLog).toBeCalledWith('On mount: null')
53-
expect(consoleLog).toBeCalledWith('On change: null')
54-
55-
expect(consoleLog).toBeCalledWith('On change: onMount')
56-
57-
expect(consoleLog).toBeCalledTimes(3)
59+
/*
60+
* Set Initial Values
61+
*/
62+
expect(consoleGroup).toBeCalledWith(
63+
`Mount in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
64+
'color: DodgerBlue',
65+
'color: SlateGray; font-weight: thin;',
66+
)
67+
expect(consoleLog).toBeCalledWith(' On mount: null')
68+
69+
expect(consoleGroup).toBeCalledWith(
70+
`Change in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
71+
'color: DodgerBlue',
72+
'color: SlateGray; font-weight: thin;',
73+
)
74+
expect(consoleLog).toBeCalledWith(
75+
'Previous value: %cnull',
76+
'color: SlateGray; font-weight: thin;',
77+
)
78+
expect(consoleLog).toBeCalledWith(
79+
' Current value: %cnull',
80+
'color: green; font-weight: bold;',
81+
)
82+
expect(consoleGroup).toBeCalledWith(
83+
`Change in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
84+
'color: DodgerBlue',
85+
'color: SlateGray; font-weight: thin;',
86+
)
87+
expect(consoleLog).toBeCalledWith(
88+
'Previous value: %cnull',
89+
'color: SlateGray; font-weight: thin;',
90+
)
91+
expect(consoleLog).toBeCalledWith(
92+
' Current value: %cnull',
93+
'color: green; font-weight: bold;',
94+
)
95+
expect(consoleLog).toBeCalledTimes(5)
96+
expect(consoleGroup).toBeCalledTimes(3)
5897

98+
/*
99+
* Check first change
100+
*/
59101
await act(() => {
60102
jest.advanceTimersByTime(1000)
61103
logRerender()
62104
})
63-
expect(consoleLog).toBeCalledWith('On change: onChange 1s')
64-
expect(consoleLog).toBeCalledTimes(4)
105+
expect(consoleGroup).toBeCalledWith(
106+
`Change in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
107+
'color: DodgerBlue',
108+
'color: SlateGray; font-weight: thin;',
109+
)
110+
expect(consoleLog).toBeCalledWith(
111+
'Previous value: %cnull',
112+
'color: SlateGray; font-weight: thin;',
113+
)
114+
expect(consoleLog).toBeCalledWith(
115+
' Current value: %conChange 1s',
116+
'color: green; font-weight: bold;',
117+
)
118+
expect(consoleLog).toBeCalledTimes(7)
119+
expect(consoleGroup).toBeCalledTimes(4)
65120

121+
/*
122+
* Check second change
123+
*/
66124
await act(() => {
67125
jest.advanceTimersByTime(1000)
68126
logRerender()
69127
})
70-
expect(consoleLog).toBeCalledWith('On change: onChange 2s')
71-
expect(consoleLog).toBeCalledTimes(5)
72-
128+
expect(consoleGroup).toBeCalledWith(
129+
`Change in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
130+
'color: DodgerBlue',
131+
'color: SlateGray; font-weight: thin;',
132+
)
133+
expect(consoleLog).toBeCalledWith(
134+
'Previous value: %conChange 1s',
135+
'color: SlateGray; font-weight: thin;',
136+
)
137+
expect(consoleLog).toBeCalledWith(
138+
' Current value: %conChange 2s',
139+
'color: green; font-weight: bold;',
140+
)
141+
expect(consoleLog).toBeCalledTimes(9)
142+
expect(consoleGroup).toBeCalledTimes(5)
143+
144+
/*
145+
* Check unmount change
146+
*/
73147
await act(() => {
74148
logUnmount()
75149
})
76-
expect(consoleLog).toBeCalledWith('On unmount: null')
77-
expect(consoleLog).toBeCalledWith('Before unmount: onChange 2s')
78-
expect(consoleLog).toBeCalledTimes(7)
150+
expect(consoleGroup).toBeCalledWith(
151+
`Unmount in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
152+
'color: DodgerBlue',
153+
'color: SlateGray; font-weight: thin;',
154+
)
155+
expect(consoleLog).toBeCalledWith(
156+
'Previous value: %conChange 2s',
157+
'color: SlateGray; font-weight: thin;',
158+
)
159+
expect(consoleLog).toBeCalledWith(
160+
' Current value: %cnull',
161+
'color: green; font-weight: bold;',
162+
)
163+
expect(consoleLog).toBeCalledTimes(11)
164+
expect(consoleGroup).toBeCalledTimes(6)
79165
})
80166
})

‎src/index.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { useEffect, useRef } from 'react'
22

33
const CSS_COMPONENT = 'color: DodgerBlue'
4-
const CSS_DATE = 'color: SlateGray;'
4+
const CSS_CHANGE = 'color: green; font-weight: bold;'
5+
const CSS_SUB_VALUE = 'color: SlateGray; font-weight: thin;'
56

67
export interface UseLogReturn {
78
log: <T>(value: T) => void
89
}
910

1011
interface PrintProps<T> {
1112
value: T
13+
prevValue?: T
1214
label: string
1315
group?: string
1416
type?: PrintTypes
@@ -17,7 +19,6 @@ interface PrintProps<T> {
1719
export enum PrintTypes {
1820
Mount = 'Mount',
1921
Unmount = 'Unmount',
20-
BeforeUnmount = 'Before unmount',
2122
Change = 'Change',
2223
}
2324

@@ -48,16 +49,28 @@ export function useLog(): UseLogReturn {
4849
function print<T>({
4950
value,
5051
label,
52+
prevValue,
5153
type = PrintTypes.Change,
5254
group = getGroupLabel(type),
5355
}: PrintProps<T>): void {
54-
console.group(group, CSS_COMPONENT, CSS_DATE)
55-
console.log(`${label}: ${String(value)}`)
56+
console.group(group, CSS_COMPONENT, CSS_SUB_VALUE)
57+
58+
if (!('prevValue' in arguments[0])) {
59+
console.log(`${label.padStart(14, ' ')}: ${String(value)}`)
60+
} else {
61+
console.log(
62+
`Previous value: %c${String(arguments[0].prevValue)}`,
63+
CSS_SUB_VALUE,
64+
)
65+
console.log(` Current value: %c${String(value)}`, CSS_CHANGE)
66+
}
67+
5668
console.groupEnd()
5769
}
5870

5971
function log<T>(value: T): void {
6072
const clonedValue = JSON.parse(JSON.stringify(value))
73+
const prevValueRef = useRef<T>()
6174

6275
return (() => {
6376
const isUnmounting = useRef(false)
@@ -74,11 +87,14 @@ export function useLog(): UseLogReturn {
7487
type: PrintTypes.Mount,
7588
})
7689

90+
prevValueRef.current = value
91+
7792
return () => {
7893
print({
7994
label: 'On unmount',
8095
value: clonedValue,
8196
type: PrintTypes.Unmount,
97+
prevValue: prevValueRef.current,
8298
})
8399
}
84100
}, [])
@@ -88,17 +104,10 @@ export function useLog(): UseLogReturn {
88104
label: 'On change',
89105
value: clonedValue,
90106
type: PrintTypes.Change,
107+
prevValue: prevValueRef.current,
91108
})
92109

93-
return () => {
94-
if (isUnmounting.current) {
95-
print({
96-
label: 'Before unmount',
97-
value: clonedValue,
98-
type: PrintTypes.BeforeUnmount,
99-
})
100-
}
101-
}
110+
prevValueRef.current = value
102111
}, [value])
103112
})()
104113
}

0 commit comments

Comments
 (0)