@@ -4,13 +4,35 @@ import Tree from '../models/tree';
44import { DevTools } from '../types/linkFiberTypes' ;
55import updateAndSendSnapShotTree from '../routers/snapShot' ;
66import throttle from '../controllers/throttle' ;
7+ import createTree from '../controllers/createTree/createTree' ;
8+ import routes from '../models/routes' ;
9+ import { JSDOM } from 'jsdom' ;
710
811describe ( 'linkFiber' , ( ) => {
912 let snapShot : Snapshot ;
1013 let mode : Status ;
1114 let linkFiber ;
1215 let fiberRoot : FiberRoot ;
1316 const mockPostMessage = jest . fn ( ) ;
17+ let dom : JSDOM ;
18+ beforeAll ( ( ) => {
19+ // Set up a fake DOM environment with JSDOM
20+ dom = new JSDOM ( '<!DOCTYPE html><html><body></body></html>' , { url : 'http://localhost' } ) ;
21+ global . window = dom . window ;
22+ global . document = dom . window . _document ;
23+ } ) ;
24+
25+ afterAll ( ( ) => {
26+ // Clean up the fake DOM environment
27+ global . window = undefined ;
28+ global . document = undefined ;
29+ dom . window . close ( ) ;
30+ } ) ;
31+ beforeEach ( ( ) => {
32+ routes = new Routes ( ) ;
33+ window . history . replaceState = jest . fn ( ) ;
34+ window . history . pushState = jest . fn ( ) ;
35+ } ) ;
1436
1537 beforeEach ( ( ) => {
1638 // Create snapshot and mode objects
@@ -49,9 +71,7 @@ describe('linkFiber', () => {
4971 renderers : new Map < 1 , { version : string } > ( [ [ 1 , { version : '16' } ] ] ) ,
5072 inject : jest . fn ( ) ,
5173 supportsFiber : true ,
52- onCommitFiberRoot : jest . fn ( ( ...args ) => {
53- console . log ( ...args ) ;
54- } ) ,
74+ onCommitFiberRoot : ( ) => console . log ( 'test' ) ,
5575 onCommitFiberUnmount : jest . fn ( ) ,
5676 rendererInterfaces : { } ,
5777 getFiberRoots : jest . fn ( ( ) => [ { current : { tag : 3 } } ] ) ,
@@ -74,7 +94,13 @@ describe('linkFiber', () => {
7494 } ) ;
7595
7696 describe ( 'React dev tools and react app check' , ( ) => {
77- it ( 'should send message to front end that React DevTools is installed' , ( ) => {
97+ it ( 'should not do anything if React Devtools is not installed' , ( ) => {
98+ delete window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ;
99+ expect ( ( ) => linkFiber ( ) ) . not . toThrowError ( ) ;
100+ expect ( mockPostMessage ) . not . toHaveBeenCalled ( ) ;
101+ } ) ;
102+
103+ it ( 'should post a message to front end that React DevTools is installed' , ( ) => {
78104 linkFiber ( ) ;
79105 expect ( mockPostMessage ) . toHaveBeenCalled ( ) ;
80106 expect ( mockPostMessage ) . toHaveBeenCalledWith (
@@ -86,15 +112,9 @@ describe('linkFiber', () => {
86112 ) ;
87113 } ) ;
88114
89- it ( 'should not do anything if React Devtools is not installed' , ( ) => {
90- delete window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ;
91- expect ( ( ) => linkFiber ( ) ) . not . toThrowError ( ) ;
92- expect ( mockPostMessage ) . not . toHaveBeenCalled ( ) ;
93- } ) ;
94-
95- it ( 'should send a message to the front end if the target application is a React App' , ( ) => {
115+ it ( 'should post a message to the front end if the target application is a React App' , ( ) => {
96116 linkFiber ( ) ;
97- // the third call is from the onCommitFiberRoot() function
117+ // the third call is from the onCommitFiberRoot() function to send snapshot to front end
98118 expect ( mockPostMessage ) . toHaveBeenCalledTimes ( 3 ) ;
99119 expect ( mockPostMessage ) . toHaveBeenCalledWith (
100120 {
@@ -115,6 +135,7 @@ describe('linkFiber', () => {
115135 it ( 'should not do anything if the target application is not a React App' , ( ) => {
116136 ( window as any ) . __REACT_DEVTOOLS_GLOBAL_HOOK__ . renderers = new Map ( ) ;
117137 linkFiber ( ) ;
138+ expect ( mockPostMessage ) . toHaveBeenCalledTimes ( 1 ) ;
118139 expect ( mockPostMessage ) . not . toHaveBeenCalledTimes ( 3 ) ;
119140 } ) ;
120141 } ) ;
@@ -127,56 +148,56 @@ describe('linkFiber', () => {
127148 } ) ;
128149 } ) ;
129150
130- describe ( 'throttledUpdateSnapshot' , ( ) => {
131- const mockUpdateAndSendSnapShotTree = jest . fn ( ) ;
132-
133- beforeEach ( ( ) => {
134- jest . useFakeTimers ( ) ;
135- mockUpdateAndSendSnapShotTree . mockClear ( ) ;
136- } ) ;
137-
138- afterEach ( ( ) => {
139- jest . runOnlyPendingTimers ( ) ;
140- jest . useRealTimers ( ) ;
141- } ) ;
142-
143- it ( 'throttled function should be called with the correct arguments' , ( ) => {
144- const throttledUpdateSnapshot = throttle ( mockUpdateAndSendSnapShotTree , 1000 ) ;
145- const onCoolDown = true ;
146- const isCallQueued = true ;
147- throttledUpdateSnapshot ( onCoolDown , isCallQueued ) ;
148-
149- expect ( mockUpdateAndSendSnapShotTree ) . toHaveBeenCalledWith ( onCoolDown , isCallQueued ) ;
150- } ) ;
151-
152- it ( 'should call updateAndSendSnapShotTree only once per 100ms' , ( ) => {
153- const throttledUpdateSnapshot = throttle ( mockUpdateAndSendSnapShotTree , 100 ) ;
154- throttledUpdateSnapshot ( ) ;
155- expect ( mockUpdateAndSendSnapShotTree ) . toHaveBeenCalledTimes ( 1 ) ;
156- throttledUpdateSnapshot ( ) ;
157- expect ( mockUpdateAndSendSnapShotTree ) . toHaveBeenCalledTimes ( 1 ) ;
158- jest . advanceTimersByTime ( 100 ) ;
159- expect ( mockUpdateAndSendSnapShotTree ) . toHaveBeenCalledTimes ( 2 ) ;
151+ describe ( 'addOneMoreStep' , ( ) => {
152+ it ( 'should monkey patch on onCommitFiberRoot' , ( ) => {
153+ const mockOnCommitFiberRoot =
154+ window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ?. onCommitFiberRoot . toString ( ) ;
155+ linkFiber ( ) ;
156+ const onCommitFiberRoot = window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ?. onCommitFiberRoot . toString ( ) ;
157+ expect ( mockOnCommitFiberRoot ) . not . toEqual ( onCommitFiberRoot ) ;
160158 } ) ;
161159
162- it ( 'should call throttle after visibility change' , ( ) => {
163- const throttledUpdateSnapshot = throttle ( mockUpdateAndSendSnapShotTree , 100 ) ;
164- // Simulate visibility change
165- const visibilityChangeEvent = new Event ( 'visibilitychange' ) ;
166- document . dispatchEvent ( visibilityChangeEvent ) ;
167- expect ( throttle ) . toHaveBeenCalled ( ) ;
160+ it ( 'should send a snapshot when new fiberRoot is committed' , ( ) => {
161+ linkFiber ( ) ;
162+ const payload = createTree ( fiberRoot . current ) ;
163+ payload . route = routes . addRoute ( window . location . href ) ;
164+ expect ( mockPostMessage ) . toHaveBeenCalled ( ) ;
165+ expect ( mockPostMessage ) . toHaveBeenCalledTimes ( 3 ) ;
166+ expect ( mockPostMessage ) . toHaveBeenCalledWith (
167+ {
168+ action : 'recordSnap' ,
169+ payload,
170+ } ,
171+ '*' ,
172+ ) ;
168173 } ) ;
169174 } ) ;
170175
171- describe ( 'addOneMoreStep' , ( ) => {
172- it ( 'should add a new step to the current path in the snapshot tree' , ( ) => { } ) ;
173- } ) ;
174-
175- describe ( 'onCommitFiberRoot' , ( ) => {
176- it ( 'should call throttledUpdateSnapshot' , ( ) => {
177- linkFiber ( ) ;
178- const onCommitFiberRoot = window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ?. onCommitFiberRoot ;
179- expect ( onCommitFiberRoot ) . toHaveBeenCalled ( ) ;
176+ describe ( 'mode unit tests' , ( ) => {
177+ it ( 'should update react fiber tree based on the payload from frontend when mode is navigating' , ( ) => {
178+ const newRoot : FiberRoot = {
179+ current : {
180+ tag : 1 ,
181+ key : null ,
182+ elementType : 'div' ,
183+ type : 'div' ,
184+ stateNode : {
185+ state : { count : 2 } ,
186+ setState : function ( newState ) {
187+ this . state = newState ;
188+ } ,
189+ } ,
190+ child : null ,
191+ sibling : null ,
192+ index : 0 ,
193+ memoizedState : null ,
194+ memoizedProps : { } ,
195+ dependencies : null ,
196+ _debugHookTypes : [ ] ,
197+ } ,
198+ } ;
199+ const payload = createTree ( newRoot . current ) ;
200+ payload . route = routes . addRoute ( window . location . href ) ;
180201 } ) ;
181202 } ) ;
182203} ) ;
0 commit comments