Skip to content

Commit

Permalink
Merge pull request #130 from davidcsally/hook-testing
Browse files Browse the repository at this point in the history
[Update] Bump to version 1.0.6 馃殌
  • Loading branch information
davidcsally committed Jan 23, 2018
2 parents a43a6c2 + 1494ccc commit 1bad856
Show file tree
Hide file tree
Showing 8 changed files with 152 additions and 29 deletions.
16 changes: 8 additions & 8 deletions chrome-ext/backend/react-15-hook.js
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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;
};
Expand All @@ -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;
};
Expand All @@ -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;
Expand All @@ -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 };
Expand Down
8 changes: 2 additions & 6 deletions chrome-ext/background.js
Expand Up @@ -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;
});
5 changes: 1 addition & 4 deletions chrome-ext/frontend/loader.js
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions 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": [
Expand Down
5 changes: 4 additions & 1 deletion jest.config.js
Expand Up @@ -4,7 +4,10 @@ module.exports = {
collectCoverageFrom: ['**/chrome-ext/**/*.js'],
coveragePathIgnorePatterns: [
'<rootDir>/chrome-ext/build/',
'<rootDir>/chrome-ext/backend/',
'<rootDir>/chrome-ext/backend/installHook',
'<rootDir>/chrome-ext/backend/common',
'<rootDir>/chrome-ext/backend/fiber-hook',
'<rootDir>/chrome-ext/backend/react-15-hook',
'<rootDir>/chrome-ext/asset/',
'<rootDir>/chrome-ext/backend/installHook.js',
'<rootDir>/chrome-ext/background.js',
Expand Down
18 changes: 10 additions & 8 deletions 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",
Expand Down Expand Up @@ -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": {
Expand All @@ -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"
}
}
117 changes: 117 additions & 0 deletions test/backend/react-15-hook.spec.js
@@ -0,0 +1,117 @@
// Created by Grant Kang, William He, and David Sally on 9/10/17.
// Copyright 漏 2017 React Sight. All rights reserved.

/* eslint-env jest */
/* eslint quotes: off */

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`, () => {
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 from mount order`, () => {
const _mountOrder = 5;
const component = { _mountOrder };
const result = getId(component);
const expected = { id: _mountOrder * 100, isDOM: false };
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);
});
});
8 changes: 8 additions & 0 deletions webpack.config.js
Expand Up @@ -32,8 +32,16 @@ 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',
plugins: [
new webpack.DefinePlugin({
'process.env': {
Expand Down

0 comments on commit 1bad856

Please sign in to comment.