From d26276c9e4594d9900e4a7a51405c092b8580410 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 01:28:14 -0800 Subject: [PATCH 01/10] [Add] first tests for hook functions --- chrome-ext/backend/react-15-hook.js | 8 ++-- jest.config.js | 4 +- test/backend/react-15-hook.spec.js | 60 +++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 test/backend/react-15-hook.spec.js diff --git a/chrome-ext/backend/react-15-hook.js b/chrome-ext/backend/react-15-hook.js index 57164bd..5d7bac3 100644 --- a/chrome-ext/backend/react-15-hook.js +++ b/chrome-ext/backend/react-15-hook.js @@ -13,7 +13,7 @@ let __ReactSightStore; * * @param {object} props - Object representing a component's props */ -export const parseProps = (props, i = 0) => { +const parseProps = (props, i = 0) => { if (!props) return null; if (props.hasOwnProperty(window) || props.hasOwnProperty('prevObject') || props.hasOwnProperty(Window)) return null; // window was causing infinite loops if (typeof props !== 'object') return props; @@ -180,8 +180,8 @@ const getRef = (component) => { * Returns a React component's name, if any * @param {React Element} component */ -const getName = (component) => { - if (component._currentElement.type) { +export const getName = (component) => { + if (component && component._currentElement && component._currentElement.type) { if (component._currentElement.type.displayName) return component._currentElement.type.displayName; else if (component._currentElement.type.name) return component._currentElement.type.name; return component._currentElement.type; @@ -193,7 +193,7 @@ const getName = (component) => { * Returns a React component's id, if any * @param {React Element} component */ -const getId = (component) => { +export const getId = (component) => { if (component._debugID) return { id: component._debugID, isDOM: true }; if (component._domID) return { id: component._domID, isDOM: true }; return { id: component._mountOrder * 100, isDOM: false }; diff --git a/jest.config.js b/jest.config.js index 2fdb199..b494ae8 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,9 @@ module.exports = { collectCoverageFrom: ['**/chrome-ext/**/*.js'], coveragePathIgnorePatterns: [ '/chrome-ext/build/', - '/chrome-ext/backend/', + '/chrome-ext/backend/installHook', + '/chrome-ext/backend/common', + '/chrome-ext/backend/fiber-hook', '/chrome-ext/asset/', '/chrome-ext/backend/installHook.js', '/chrome-ext/background.js', diff --git a/test/backend/react-15-hook.spec.js b/test/backend/react-15-hook.spec.js new file mode 100644 index 0000000..7a880fc --- /dev/null +++ b/test/backend/react-15-hook.spec.js @@ -0,0 +1,60 @@ +// Created by Grant Kang, William He, and David Sally on 9/10/17. +// Copyright © 2017 React Sight. All rights reserved. + +/* eslint-env jest */ +import { getName, getId } from '../../chrome-ext/backend/react-15-hook'; + +describe('[react-15-hook.js]: getName', () => { + it('should get a node\'s dispayName', () => { + const NAME = 'div'; + const component = { _currentElement: { type: { displayName: NAME } } }; + const result = getName(component); + expect(result).toEqual(NAME); + }); + + it('should get a node\'s name', () => { + const NAME = 'div'; + const component = { _currentElement: { type: { name: NAME } } }; + const result = getName(component); + expect(result).toEqual(NAME); + }); + + it('should get a node\'s type', () => { + const NAME = 'div'; + const component = { _currentElement: { type: NAME } }; + const result = getName(component); + expect(result).toEqual(NAME); + }); + + it('should default if no data present', () => { + const component = {}; + const result = getName(component); + expect(result).toEqual('default'); + }); +}); + +describe('[react-15-hook.js]: getId', () => { + it('should get a node\'s debug id', () => { + const ID = 10; + const component = { _debugID: ID }; + const result = getId(component); + const expected = { id: ID, isDOM: true }; + expect(result).toEqual(expected); + }); + + it('should get a node\'s dom id', () => { + const ID = 10; + const component = { _domID: ID }; + const result = getId(component); + const expected = { id: ID, isDOM: true }; + expect(result).toEqual(expected); + }); + + it('should get a node\'s dom id', () => { + const _mountOrder = 5; + const component = { _mountOrder }; + const result = getId(component); + const expected = { id: _mountOrder * 100, isDOM: false }; + expect(result).toEqual(expected); + }); +}); From 9eaef35395e99f4defa7656e79ce8fc6ffccf7fc Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 22:36:56 -0800 Subject: [PATCH 02/10] [Update] add full source map to webpack --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index 5c6335e..ec89d2e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -34,6 +34,7 @@ module.exports = { }, ], }, + devtool: 'source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': { From c393568de5222e6683c8dfbca3f212350038c815 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 22:37:10 -0800 Subject: [PATCH 03/10] [Update] brace style --- chrome-ext/background.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/chrome-ext/background.js b/chrome-ext/background.js index 2c9ce2e..a18d655 100644 --- a/chrome-ext/background.js +++ b/chrome-ext/background.js @@ -54,11 +54,7 @@ chrome.extension.onMessage.addListener(function (req, sender, res) { let tabId = sender.tab.id; if (tabId in connections) { connections[tabId].postMessage(req); - } else { - console.log('WARNING:: Tab not found in connection list'); - } - } else { - console.log('WARNING:: sender.tab not defined'); - } + } else console.log('WARNING:: Tab not found in connection list'); + } else console.log('WARNING:: sender.tab not defined'); return true; }); From 94d71071f2dcc6c532194f845b7efbf3367f611b Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 22:37:33 -0800 Subject: [PATCH 04/10] [Update] export functions to make testing simpler --- chrome-ext/backend/react-15-hook.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/chrome-ext/backend/react-15-hook.js b/chrome-ext/backend/react-15-hook.js index 5d7bac3..df200a2 100644 --- a/chrome-ext/backend/react-15-hook.js +++ b/chrome-ext/backend/react-15-hook.js @@ -145,12 +145,12 @@ const getProps = (component) => { * Return's a React component's state, if any * @param {React Element} component */ -const getState = (component) => { +export const getState = (component) => { if (component._instance && component._instance.state) return component._instance.state; return null; }; -const getStore = (component) => { +export const getStore = (component) => { // call getState() on react-redux.connect() if (component._currentElement.type && component._currentElement.type.propTypes && component._currentElement.type.propTypes.hasOwnProperty('store')) { return component._instance.store.getState(); @@ -162,7 +162,7 @@ const getStore = (component) => { * Returns a React component's key, if any * @param {React Element} component */ -const getKey = (component) => { +export const getKey = (component) => { if (component._currentElement && component._currentElement.key) return component._currentElement.key; return null; }; @@ -171,7 +171,7 @@ const getKey = (component) => { * Returns a React component's ref, if any * @param {React Element} component */ -const getRef = (component) => { +export const getRef = (component) => { if (component._currentElement && component._currentElement.ref) return component._currentElement.ref; return null; }; From 8133a43bd7a45a8d6e4e7dd759c9ea2f47e25eb4 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 22:37:54 -0800 Subject: [PATCH 05/10] [Update] begin test file for react-15-hook --- test/backend/react-15-hook.spec.js | 77 ++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 10 deletions(-) diff --git a/test/backend/react-15-hook.spec.js b/test/backend/react-15-hook.spec.js index 7a880fc..85d3063 100644 --- a/test/backend/react-15-hook.spec.js +++ b/test/backend/react-15-hook.spec.js @@ -2,39 +2,41 @@ // Copyright © 2017 React Sight. All rights reserved. /* eslint-env jest */ -import { getName, getId } from '../../chrome-ext/backend/react-15-hook'; +/* eslint quotes: off */ -describe('[react-15-hook.js]: getName', () => { - it('should get a node\'s dispayName', () => { +import { getName, getId, getRef, getKey, getState, getStore } from '../../chrome-ext/backend/react-15-hook'; + +describe(`[react-15-hook.js]: getName`, () => { + it(`should get a node's dispayName`, () => { const NAME = 'div'; const component = { _currentElement: { type: { displayName: NAME } } }; const result = getName(component); expect(result).toEqual(NAME); }); - it('should get a node\'s name', () => { + it(`should get a node's name`, () => { const NAME = 'div'; const component = { _currentElement: { type: { name: NAME } } }; const result = getName(component); expect(result).toEqual(NAME); }); - it('should get a node\'s type', () => { + it(`should get a node's type`, () => { const NAME = 'div'; const component = { _currentElement: { type: NAME } }; const result = getName(component); expect(result).toEqual(NAME); }); - it('should default if no data present', () => { + it(`should default if no data present`, () => { const component = {}; const result = getName(component); expect(result).toEqual('default'); }); }); -describe('[react-15-hook.js]: getId', () => { - it('should get a node\'s debug id', () => { +describe(`[react-15-hook.js]: getId`, () => { + it(`should get a node's debug id`, () => { const ID = 10; const component = { _debugID: ID }; const result = getId(component); @@ -42,7 +44,7 @@ describe('[react-15-hook.js]: getId', () => { expect(result).toEqual(expected); }); - it('should get a node\'s dom id', () => { + it(`should get a node's dom id`, () => { const ID = 10; const component = { _domID: ID }; const result = getId(component); @@ -50,7 +52,7 @@ describe('[react-15-hook.js]: getId', () => { expect(result).toEqual(expected); }); - it('should get a node\'s dom id', () => { + it(`should get a node's dom id from mount order`, () => { const _mountOrder = 5; const component = { _mountOrder }; const result = getId(component); @@ -58,3 +60,58 @@ describe('[react-15-hook.js]: getId', () => { expect(result).toEqual(expected); }); }); + +describe(`[react-15-hook.js]: getRef`, () => { + it(`should get a node's ref`, () => { + const ref = 20; // check the type of this var + const component = { _currentElement: { ref } }; + const result = getRef(component); + const expected = ref; + expect(result).toEqual(expected); + }); + + it(`should return null if component does not have a ref`, () => { + const component = { _currentElement: {} }; + const res = getRef(component); + expect(res).toEqual(null); + }); +}); + +describe(`[react-15-hook.js]: getKey`, () => { + it(`should get a component's key`, () => { + const key = 20; // check the type of this var + const component = { _currentElement: { key } }; + const result = getKey(component); + const expected = key; + expect(result).toEqual(expected); + }); + + it(`should return null if component does not have a key`, () => { + const component = { _currentElement: {} }; + const res = getKey(component); + expect(res).toEqual(null); + }); +}); + +describe(`[react-15-hook.js] getState`, () => { + it(`should get a component's state`, () => { + const state = { a: 'a', b: 'b' }; + const component = { _instance: { state } }; + const res = getState(component); + expect(res).toEqual(state); + }); + + it(`should return null if component is stateless`, () => { + const component = { _instance: {} }; + const res = getState(component); + expect(res).toEqual(null); + }); +}); + +describe(`[react-15-hook.js] getStore`, () => { + it(`should return null if component does not have a store`, () => { + const component = { _currentElement: { type: { propTypes: { } } } }; + const res = getStore(component); + expect(res).toEqual(null); + }); +}); From e0b313b2ae3bd30b7d93b9d9fd9b56431fac216d Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 23:04:24 -0800 Subject: [PATCH 06/10] [Update] testing directories --- jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jest.config.js b/jest.config.js index b494ae8..1ed0e83 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,6 +7,7 @@ module.exports = { '/chrome-ext/backend/installHook', '/chrome-ext/backend/common', '/chrome-ext/backend/fiber-hook', + '/chrome-ext/backend/react-15-hook', '/chrome-ext/asset/', '/chrome-ext/backend/installHook.js', '/chrome-ext/background.js', From 931ecfe05334fa9d757f8a27bb626246bd2a40e6 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 23:13:37 -0800 Subject: [PATCH 07/10] [Update] dependancies --- package.json | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 5cdddcd..9d73def 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ }, "homepage": "https://github.com/React-Sight/React-Sight#readme", "dependencies": { - "d3": "^4.10.2", + "d3": "^4.12.2", "json-formatter-js": "^2.2.0" }, "devDependencies": { @@ -39,20 +39,22 @@ "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "coveralls": "^3.0.0", - "css-loader": "^0.28.7", - "eslint": "^4.8.0", + "css-loader": "^0.28.9", + "eslint": "^4.16.0", "eslint-config-airbnb": "^16.0.0", - "eslint-config-airbnb-base": "^12.0.2", + "eslint-config-airbnb-base": "^12.1.0", "eslint-plugin-import": "^2.7.0", - "eslint-plugin-jsx-a11y": "^6.0.2", + "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.4.0", + "file-loader": "^1.1.6", "html-webpack-plugin": "^2.30.1", - "jest": "^22.0.4", + "image-webpack-loader": "^3.4.2", + "jest": "^22.1.4", "node-sass": "^4.7.2", "npm-run-all": "^4.1.1", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", - "webpack": "^3.6.0", + "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1" } } From 37007c836b8509ca862829e9b18cb99ef24f6c32 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 23:24:23 -0800 Subject: [PATCH 08/10] [Add] place statement on one line --- chrome-ext/frontend/loader.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/chrome-ext/frontend/loader.js b/chrome-ext/frontend/loader.js index 4bc5f1a..e106e13 100644 --- a/chrome-ext/frontend/loader.js +++ b/chrome-ext/frontend/loader.js @@ -36,10 +36,7 @@ const processLoader = () => { // If React isn't found, notify the user setTimeout(() => { - if (document.getElementById('loader-header')) { - header.innerHTML = ''; - } - + if (document.getElementById('loader-header')) header.innerHTML = ''; if (document.getElementById('loader-sub-header')) { const subHeader = document.getElementById('loader-sub-header'); subHeader.innerHTML = errorMessage; From 22bcc16112ad42a3dc65917059d70ef929bb37f1 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 23:25:12 -0800 Subject: [PATCH 09/10] =?UTF-8?q?[Update]=20bump=20to=20version=201.0.6=20?= =?UTF-8?q?=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chrome-ext/manifest.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/chrome-ext/manifest.json b/chrome-ext/manifest.json index f0c03c2..bbc4cc4 100644 --- a/chrome-ext/manifest.json +++ b/chrome-ext/manifest.json @@ -1,9 +1,9 @@ { "name": "React-Sight", "short_name": "React-Sight", - "version": "1.0.5", + "version": "1.0.6", "description": "Extends the Developer Tools, adding a sidebar that displays React Component Hierarchy.", - "devtools_page": "devtools.html", + "devtools_page": "build/devtools.html", "manifest_version": 2, "background": { "scripts": [ diff --git a/package.json b/package.json index 9d73def..855cdad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-sight", - "version": "1.0.5", + "version": "1.0.6", "description": "Visualization tool for React Applications", "keywords": [ "react", From fe00156d25be2ff48f20fe0845691ae574bde5c9 Mon Sep 17 00:00:00 2001 From: David Sally Date: Mon, 22 Jan 2018 23:25:37 -0800 Subject: [PATCH 10/10] [Update] add support for bundling images, may use in future --- webpack.config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index ec89d2e..73488c1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,6 +32,13 @@ module.exports = { test: /\.sass$|\.scss$|\.css$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }, + { + test: /\.(gif|png|jpe?g|svg|webp)$/i, + loaders: [ + 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', + 'image-webpack-loader', + ], + }, ], }, devtool: 'source-map',