Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor ReactComponentTreeDevtool test #6787

Merged
merged 1 commit into from
May 17, 2016
Merged

Refactor ReactComponentTreeDevtool test #6787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
113 changes: 33 additions & 80 deletions src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('ReactComponentTreeDevtool', () => {
var ReactDOMServer;
var ReactInstanceMap;
var ReactComponentTreeDevtool;
var ReactComponentTreeTestUtils;

beforeEach(() => {
jest.resetModuleRegistry();
Expand All @@ -26,54 +27,10 @@ describe('ReactComponentTreeDevtool', () => {
ReactDOMServer = require('ReactDOMServer');
ReactInstanceMap = require('ReactInstanceMap');
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');
});

function getRootDisplayNames() {
return ReactComponentTreeDevtool.getRootIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
}

function getRegisteredDisplayNames() {
return ReactComponentTreeDevtool.getRegisteredIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
}

function getTree(rootID, options = {}) {
var {
includeOwnerDisplayName = false,
includeParentDisplayName = false,
expectedParentID = null,
} = options;

var result = {
displayName: ReactComponentTreeDevtool.getDisplayName(rootID),
};

var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
var parentID = ReactComponentTreeDevtool.getParentID(rootID);
expect(parentID).toBe(expectedParentID);

if (includeParentDisplayName && parentID) {
result.parentDisplayName = ReactComponentTreeDevtool.getDisplayName(parentID);
}
if (includeOwnerDisplayName && ownerID) {
result.ownerDisplayName = ReactComponentTreeDevtool.getDisplayName(ownerID);
}

var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
var text = ReactComponentTreeDevtool.getText(rootID);
if (text != null) {
result.text = text;
} else {
result.children = childIDs.map(childID =>
getTree(childID, {...options, expectedParentID: rootID })
);
}

return result;
}

function assertTreeMatches(pairs, options) {
function assertTreeMatches(pairs) {
if (!Array.isArray(pairs[0])) {
pairs = [pairs];
}
Expand All @@ -89,8 +46,15 @@ describe('ReactComponentTreeDevtool', () => {
}
}

function getActualTree() {
return getTree(rootInstance._debugID, options).children[0];
function expectWrapperTreeToEqual(expectedTree) {
ReactComponentTreeTestUtils.expectTree(rootInstance._debugID, {
displayName: 'Wrapper',
children: expectedTree ? [expectedTree] : [],
});
if (!expectedTree) {
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRegisteredDisplayNames()).toEqual([]);
}
}

// Mount once, render updates, then unmount.
Expand All @@ -100,20 +64,18 @@ describe('ReactComponentTreeDevtool', () => {

// Mount a new tree or update the existing tree.
ReactDOM.render(<Wrapper />, node);
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);

// Purging should have no effect
// on the tree we expect to see.
ReactComponentTreeDevtool.purgeUnmountedComponents();
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);
});

// Unmounting the root node should purge
// the whole subtree automatically.
ReactDOM.unmountComponentAtNode(node);
expect(getActualTree()).toBe(undefined);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expectWrapperTreeToEqual(null);

// Server render every pair.
// Ensure the tree is correct on every step.
Expand All @@ -123,23 +85,19 @@ describe('ReactComponentTreeDevtool', () => {
// Rendering to string should not produce any entries
// because ReactDebugTool purges it when the flush ends.
ReactDOMServer.renderToString(<Wrapper />);
expect(getActualTree()).toBe(undefined);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expectWrapperTreeToEqual(null);

// To test it, we tell the devtool to ignore next purge
// so the cleanup request by ReactDebugTool is ignored.
// This lets us make assertions on the actual tree.
ReactComponentTreeDevtool._preventPurging = true;
ReactDOMServer.renderToString(<Wrapper />);
ReactComponentTreeDevtool._preventPurging = false;
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);

// Purge manually since we skipped the automatic purge.
ReactComponentTreeDevtool.purgeUnmountedComponents();
expect(getActualTree()).toBe(undefined);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expectWrapperTreeToEqual(null);
});
}

Expand Down Expand Up @@ -1650,7 +1608,7 @@ describe('ReactComponentTreeDevtool', () => {
}],
}],
};
assertTreeMatches([element, tree], {includeOwnerDisplayName: true});
assertTreeMatches([element, tree]);
});

it('purges unmounted components automatically', () => {
Expand All @@ -1674,33 +1632,28 @@ describe('ReactComponentTreeDevtool', () => {
}

ReactDOM.render(<Foo />, node);
expect(
getTree(barInstance._debugID, {
includeParentDisplayName: true,
expectedParentID: fooInstance._debugID,
})
).toEqual({
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Bar',
parentDisplayName: 'Foo',
parentID: fooInstance._debugID,
children: [],
});
}, 'Foo');

renderBar = false;
ReactDOM.render(<Foo />, node);
expect(
getTree(barInstance._debugID, {expectedParentID: null})
).toEqual({
ReactDOM.render(<Foo />, node);
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Unknown',
children: [],
});
parentID: null,
}, 'Foo');

ReactDOM.unmountComponentAtNode(node);
expect(
getTree(barInstance._debugID, {expectedParentID: null})
).toEqual({
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Unknown',
children: [],
});
parentID: null,
}, 'Foo');
});

it('reports update counts', () => {
Expand Down Expand Up @@ -1732,14 +1685,14 @@ describe('ReactComponentTreeDevtool', () => {
var node = document.createElement('div');

ReactDOM.render(<div className="a" />, node);
expect(getRootDisplayNames()).toEqual(['div']);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual(['div']);

ReactDOM.render(<div className="b" />, node);
expect(getRootDisplayNames()).toEqual(['div']);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual(['div']);

ReactDOM.unmountComponentAtNode(node);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRegisteredDisplayNames()).toEqual([]);
});

it('creates stack addenda', () => {
Expand Down
104 changes: 29 additions & 75 deletions src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ describe('ReactComponentTreeDevtool', () => {
var ReactNative;
var ReactInstanceMap;
var ReactComponentTreeDevtool;
var ReactComponentTreeTestUtils;
var createReactNativeComponentClass;
var View;
var Image;
Expand All @@ -28,6 +29,7 @@ describe('ReactComponentTreeDevtool', () => {
ReactNative = require('ReactNative');
ReactInstanceMap = require('ReactInstanceMap');
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');
View = require('View');
createReactNativeComponentClass = require('createReactNativeComponentClass');
Image = createReactNativeComponentClass({
Expand All @@ -51,51 +53,6 @@ describe('ReactComponentTreeDevtool', () => {
});
});

function getRootDisplayNames() {
return ReactComponentTreeDevtool.getRootIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
}

function getRegisteredDisplayNames() {
return ReactComponentTreeDevtool.getRegisteredIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
}

function getTree(rootID, options = {}) {
var {
includeOwnerDisplayName = false,
includeParentDisplayName = false,
expectedParentID = null,
} = options;

var result = {
displayName: ReactComponentTreeDevtool.getDisplayName(rootID),
};

var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
var parentID = ReactComponentTreeDevtool.getParentID(rootID);
expect(parentID).toBe(expectedParentID);

if (includeParentDisplayName && parentID) {
result.parentDisplayName = ReactComponentTreeDevtool.getDisplayName(parentID);
}
if (includeOwnerDisplayName && ownerID) {
result.ownerDisplayName = ReactComponentTreeDevtool.getDisplayName(ownerID);
}

var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
var text = ReactComponentTreeDevtool.getText(rootID);
if (text != null) {
result.text = text;
} else {
result.children = childIDs.map(childID =>
getTree(childID, {...options, expectedParentID: rootID })
);
}

return result;
}

function assertTreeMatches(pairs, options) {
if (!Array.isArray(pairs[0])) {
pairs = [pairs];
Expand All @@ -111,8 +68,15 @@ describe('ReactComponentTreeDevtool', () => {
}
}

function getActualTree() {
return getTree(rootInstance._debugID, options).children[0];
function expectWrapperTreeToEqual(expectedTree) {
ReactComponentTreeTestUtils.expectTree(rootInstance._debugID, {
displayName: 'Wrapper',
children: expectedTree ? [expectedTree] : [],
});
if (!expectedTree) {
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRegisteredDisplayNames()).toEqual([]);
}
}

// Mount once, render updates, then unmount.
Expand All @@ -122,20 +86,18 @@ describe('ReactComponentTreeDevtool', () => {

// Mount a new tree or update the existing tree.
ReactNative.render(<Wrapper />, 1);
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);

// Purging should have no effect
// on the tree we expect to see.
ReactComponentTreeDevtool.purgeUnmountedComponents();
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);
});

// Unmounting the root node should purge
// the whole subtree automatically.
ReactNative.unmountComponentAtNode(1);
expect(getActualTree()).toBe(undefined);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expectWrapperTreeToEqual(null);

// Mount and unmount for every pair.
// Ensure the tree is correct on every step.
Expand All @@ -144,13 +106,11 @@ describe('ReactComponentTreeDevtool', () => {

// Mount a new tree.
ReactNative.render(<Wrapper />, 1);
expect(getActualTree()).toEqual(expectedTree);
expectWrapperTreeToEqual(expectedTree);

// Unmounting should clean it up.
ReactNative.unmountComponentAtNode(1);
expect(getActualTree()).toBe(undefined);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expectWrapperTreeToEqual(null);
});
}

Expand Down Expand Up @@ -1650,33 +1610,27 @@ describe('ReactComponentTreeDevtool', () => {
}

ReactNative.render(<Foo />, 1);
expect(
getTree(barInstance._debugID, {
includeParentDisplayName: true,
expectedParentID: fooInstance._debugID,
})
).toEqual({
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Bar',
parentDisplayName: 'Foo',
parentID: fooInstance._debugID,
children: [],
});
}, 'Foo');

renderBar = false;
ReactNative.render(<Foo />, 1);
expect(
getTree(barInstance._debugID, {expectedParentID: null})
).toEqual({
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Unknown',
children: [],
});
parentID: null,
}, 'Foo');

ReactNative.unmountComponentAtNode(1);
expect(
getTree(barInstance._debugID, {expectedParentID: null})
).toEqual({
ReactComponentTreeTestUtils.expectTree(barInstance._debugID, {
displayName: 'Unknown',
children: [],
});
parentID: null,
}, 'Foo');
});

it('reports update counts', () => {
Expand Down Expand Up @@ -1704,13 +1658,13 @@ describe('ReactComponentTreeDevtool', () => {

it('does not report top-level wrapper as a root', () => {
ReactNative.render(<View><Image /></View>, 1);
expect(getRootDisplayNames()).toEqual(['View']);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual(['View']);

ReactNative.render(<View><Text /></View>, 1);
expect(getRootDisplayNames()).toEqual(['View']);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual(['View']);

ReactNative.unmountComponentAtNode(1);
expect(getRootDisplayNames()).toEqual([]);
expect(getRegisteredDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRootDisplayNames()).toEqual([]);
expect(ReactComponentTreeTestUtils.getRegisteredDisplayNames()).toEqual([]);
});
});