From dd46bb0b9d4abc35540f4ae87694db8923310160 Mon Sep 17 00:00:00 2001 From: David Chai Date: Wed, 2 Oct 2019 19:49:47 -0400 Subject: [PATCH] Integration test began --- package.json | 1 + package/__tests__/integration.test.js | 142 ++++++++++++++++++++++++++ package/astParser.js | 5 +- package/linkFiber.js | 17 ++- 4 files changed, 159 insertions(+), 6 deletions(-) create mode 100644 package/__tests__/integration.test.js diff --git a/package.json b/package.json index 6857b6f5f..366388836 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "build": "webpack --mode production", "dev": "webpack --mode development --watch", "test": "jest --verbose --coverage --watchAll", + "test-integration": "MODE='test' jest package/__tests__/integration.test.js", "lint": "eslint --ext .js --ext .jsx src", "docker-build": "docker build -t reacttt/test-lint .", "docker-check": "docker-compose up --abort-on-container-exit", diff --git a/package/__tests__/integration.test.js b/package/__tests__/integration.test.js new file mode 100644 index 000000000..eb1c8f99f --- /dev/null +++ b/package/__tests__/integration.test.js @@ -0,0 +1,142 @@ +import React, { Component, useState, useReducer } from 'react'; +import ReactDOM from 'react-dom'; + +// importing our package entry point +const reactime = require('../index'); +// Integration test + // mocks + // dummy react components and stuff + +// Test topmost React component, which renders a Stateful component +const MockApp = () => { + return ( +
+ + {/* */} +
+ ) +} + +// Test Stateful component contains a mock state. It also renders two child components - ChildStateful and Hook (temporarily disabled) +class Stateful extends Component { + constructor () { + super(); + this.state = { + number: 0, + }; + } + render() { + return (
+ + {this.state.number} + {/* */} +
) + } +} + +class ChildStateful extends Component { + constructor () { + super(); + this.state = { + foo: 'bar', + }; + } + render() { + return (
+ {this.state.foo} +
) + } +} + + +const Hook = () => { + const [letter, addLetter] = useState('a'); + return ( +
+ {letter} +
+ ) +} + +describe('NPM Package integration test', () => { + // Storage for all the snapshots + let snaps = [], + // variable to be used to be fiber tree location of the test Stateful component + stateful, + // same but for ChildStateful + childstateful, + // for Hook (not currently in use) + hook; + + describe('Link fiber', () => { + beforeAll((done) => { + // Listening for snapshots from linkFiber + window.addEventListener('message', msg => { + const { action } = msg.data; + switch (action) { + case 'recordSnap': + snaps.push(msg.data.payload); + // Once received, this part is done + done(); + break; + default: + break; + } + }) + + // Create the DOM node for our root div + const testDiv = document.createElement('div'); + // Inject + ReactDOM.render(, testDiv); + // Run the root div through reactime (imported earlier) + reactime(testDiv); + + // Assigning the locations of the test components on the fiber tree to variables + stateful = testDiv._reactRootContainer._internalRoot.current.child.child.child; + childstateful = stateful.child.child; + + // Make linkFiber send the first processed screenshot + window.postMessage({ action: 'contentScriptStarted' }, '*'); + }) + + test ('should send the snapshot via message', () => { + console.log('snaps arr', snaps); + expect(snaps.length).toBeGreaterThanOrEqual(1); + }) + + test ('Should be able to retract the state from stateful components', () => { + console.log('state of the first component', JSON.stringify(snaps[0].children[0].state)); + // Check if the tree returned by the first snapshot (snaps[0]) contains the correct states + expect(JSON.stringify(snaps[0].children[0].state)).toBe(JSON.stringify(stateful.memoizedState)); + expect(JSON.stringify(snaps[0].children[0].children[0].state)).toBe(JSON.stringify(childstateful.memoizedState)); + }); + + xtest ('Should be able to retract the state from hook components', () => { + + }) + + xtest ('Should be able to detect when an user uses setState', () => { + + }); + }) + describe('Time jump', () => { + xtest('Should be able to perform time jump for stateful components', () => { + window.postMessage() + }) + xtest('App should reflect the desired state snapshot after jumping', () => { + + }) + }) +}) + // Upon invoking reactime on the root container, the app should + // should send the snapshot via message + // Should modify setState if the component is stateful + // Should modify useState if the component uses hooks + // Should not invoke changeUseState if component doesn't use hooks + // Upon receiving a request to time jump, the app should + // invoke timejump function + // mode.jumping should be switched to true while jumping + // setState should not be modified while jumping + // useState should not be modified while jumping + // the app should reflect the desired state snapshot after jumping + // mode.jumping should be switched back to false after jumping \ No newline at end of file diff --git a/package/astParser.js b/package/astParser.js index cc9986e9d..3fc2aeb18 100644 --- a/package/astParser.js +++ b/package/astParser.js @@ -14,8 +14,10 @@ module.exports = elementType => { ast = ast.body; // Iterate through AST of every function declaration // Check within each function declaration if there are hook declarations + console.log('problem with ast', ast) ast.forEach(functionDec => { - const { body } = functionDec.body; + console.log('functionDec', functionDec.expression.body) + const { body } = functionDec.expression.body; const statements = []; // Traverse through the function's funcDecs and Expression Statements body.forEach(program => { @@ -23,6 +25,7 @@ module.exports = elementType => { if (program.type === 'VariableDeclaration') { program.declarations.forEach(dec => { statements.push(dec.id.name); + console.log('statements array', statements); }); } }); diff --git a/package/linkFiber.js b/package/linkFiber.js index 237117da6..daf21813b 100644 --- a/package/linkFiber.js +++ b/package/linkFiber.js @@ -17,11 +17,18 @@ module.exports = (snap, mode) => { // wouldn't think we want to create new snapshots if (mode.jumping || mode.paused) return; const payload = snap.tree.getCopy(); - // console.log('payload', payload); - window.postMessage({ - action: 'recordSnap', - payload, - }); + + if (process.env.MODE === 'test') { + window.postMessage({ + action: 'recordSnap', + payload, + }, '*'); + } else { + window.postMessage({ + action: 'recordSnap', + payload, + }); + } } function changeSetState(component) {