Skip to content

Commit ef2943d

Browse files
zacharydfreemanzacharydfreeman
committed
testing progress
1 parent 7096df5 commit ef2943d

File tree

4 files changed

+62
-62
lines changed

4 files changed

+62
-62
lines changed

‎demo-nextjs

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/backend/__tests__/linkFiber.test.tsx

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Tree from '../models/tree';
44
import { DevTools } from '../types/linkFiberTypes';
55
import updateAndSendSnapShotTree from '../routers/snapShot';
66
import throttle from '../controllers/throttle';
7+
import createTree from '../controllers/createTree/createTree';
8+
import routes from '../models/routes';
79

810
describe('linkFiber', () => {
911
let snapShot: Snapshot;
@@ -49,9 +51,7 @@ describe('linkFiber', () => {
4951
renderers: new Map<1, { version: string }>([[1, { version: '16' }]]),
5052
inject: jest.fn(),
5153
supportsFiber: true,
52-
onCommitFiberRoot: jest.fn((...args) => {
53-
console.log(...args);
54-
}),
54+
onCommitFiberRoot: () => console.log('test'),
5555
onCommitFiberUnmount: jest.fn(),
5656
rendererInterfaces: {},
5757
getFiberRoots: jest.fn(() => [{ current: { tag: 3 } }]),
@@ -74,7 +74,13 @@ describe('linkFiber', () => {
7474
});
7575

7676
describe('React dev tools and react app check', () => {
77-
it('should send message to front end that React DevTools is installed', () => {
77+
it('should not do anything if React Devtools is not installed', () => {
78+
delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
79+
expect(() => linkFiber()).not.toThrowError();
80+
expect(mockPostMessage).not.toHaveBeenCalled();
81+
});
82+
83+
it('should post a message to front end that React DevTools is installed', () => {
7884
linkFiber();
7985
expect(mockPostMessage).toHaveBeenCalled();
8086
expect(mockPostMessage).toHaveBeenCalledWith(
@@ -86,15 +92,9 @@ describe('linkFiber', () => {
8692
);
8793
});
8894

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', () => {
95+
it('should post a message to the front end if the target application is a React App', () => {
9696
linkFiber();
97-
// the third call is from the onCommitFiberRoot() function
97+
// the third call is from the onCommitFiberRoot() function to send snapshot to front end
9898
expect(mockPostMessage).toHaveBeenCalledTimes(3);
9999
expect(mockPostMessage).toHaveBeenCalledWith(
100100
{
@@ -115,6 +115,7 @@ describe('linkFiber', () => {
115115
it('should not do anything if the target application is not a React App', () => {
116116
(window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers = new Map();
117117
linkFiber();
118+
expect(mockPostMessage).toHaveBeenCalledTimes(1);
118119
expect(mockPostMessage).not.toHaveBeenCalledTimes(3);
119120
});
120121
});
@@ -127,56 +128,56 @@ describe('linkFiber', () => {
127128
});
128129
});
129130

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);
131+
describe('addOneMoreStep', () => {
132+
it('should monkey patch on onCommitFiberRoot', () => {
133+
const mockOnCommitFiberRoot =
134+
window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.onCommitFiberRoot.toString();
135+
linkFiber();
136+
const onCommitFiberRoot = window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.onCommitFiberRoot.toString();
137+
expect(mockOnCommitFiberRoot).not.toEqual(onCommitFiberRoot);
160138
});
161139

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();
140+
it('should send a snapshot when new fiberRoot is committed', () => {
141+
linkFiber();
142+
const payload = createTree(fiberRoot.current);
143+
payload.route = routes.addRoute(window.location.href);
144+
expect(mockPostMessage).toHaveBeenCalled();
145+
expect(mockPostMessage).toHaveBeenCalledTimes(3);
146+
expect(mockPostMessage).toHaveBeenCalledWith(
147+
{
148+
action: 'recordSnap',
149+
payload,
150+
},
151+
'*',
152+
);
168153
});
169154
});
170155

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();
156+
describe('mode unit tests', () => {
157+
it('should update react fiber tree based on the payload from frontend when mode is navigating', () => {
158+
const newRoot: FiberRoot = {
159+
current: {
160+
tag: 1,
161+
key: null,
162+
elementType: 'div',
163+
type: 'div',
164+
stateNode: {
165+
state: { count: 2 },
166+
setState: function (newState) {
167+
this.state = newState;
168+
},
169+
},
170+
child: null,
171+
sibling: null,
172+
index: 0,
173+
memoizedState: null,
174+
memoizedProps: {},
175+
dependencies: null,
176+
_debugHookTypes: [],
177+
},
178+
};
179+
const payload = createTree(newRoot.current);
180+
payload.route = routes.addRoute(window.location.href);
180181
});
181182
});
182183
});

‎src/backend/routers/linkFiber.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import updateAndSendSnapShotTree from './snapShot';
66
// getHooksNames - helper function to grab the getters/setters from `elementType`
77
import throttle from '../controllers/throttle';
88
import componentActionsRecord from '../models/masterState';
9-
import _createComponentActionsRecord from '../controllers/createTree/createComponentActionsRecord';
9+
import createComponentActionsRecord from '../controllers/createTree/createComponentActionsRecord';
1010

1111
// Set global variables to use in exported module and helper functions
1212
declare global {
@@ -62,7 +62,7 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
6262
componentActionsRecord.clear();
6363
// Obtain new update methods for the current route:
6464
const { current } = fiberRoot;
65-
_createComponentActionsRecord(current);
65+
createComponentActionsRecord(current);
6666
// Invoke timeJump, which is stored in mode.navigating, to update React Application FiberTree based on the snapshotTree
6767
await mode.navigating();
6868
}

‎src/backend/routers/snapShot.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Snapshot, Status, FiberRoot } from '../types/backendTypes';
22
// passes the data down to its components
33
import componentActionsRecord from '../models/masterState';
44
import routes from '../models/routes';
5-
import _createTree from '../controllers/createTree/createTree';
5+
import createTree from '../controllers/createTree/createTree';
66

77
// -------------------------UPDATE & SEND TREE SNAP SHOT------------------------
88
/**
@@ -19,7 +19,7 @@ export default function updateAndSendSnapShotTree(snapshot: Snapshot, fiberRoot:
1919
// Clear all of the legacy actions from old fiber tree becuase we are about to create a new one
2020
componentActionsRecord.clear();
2121
// Calls the createTree function which creates the new Fiber tree and adds it to tree property on the snapShot object
22-
snapshot.tree = _createTree(current);
22+
snapshot.tree = createTree(current);
2323
// Make a deep copy of the tree:
2424
const payload = snapshot.tree;
2525
// Save the current window url to route

0 commit comments

Comments
 (0)