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.

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

React DevTools: Show symbols used as keys in state #19786

Merged
merged 9 commits into from
Sep 14, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions fixtures/devtools/standalone/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,70 @@ <h1>List</h1>
return <ChildComponent customObject={new Custom()} />;
}

const baseInheritedKeys = Object.create(Object.prototype, {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('enumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableStringBase: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('nonEnumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
});

const inheritedKeys = Object.create(baseInheritedKeys, {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
123: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

function InheritedKeys() {
return <ChildComponent data={inheritedKeys} />;
}

const object = {
string: "abc",
longString: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890",
Expand Down Expand Up @@ -294,6 +358,7 @@ <h1>List</h1>
<ObjectProps />
<UnserializableProps />
<CustomObject />
<InheritedKeys />
</Fragment>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,9 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
"object_of_objects": {
"inner": {}
},
"object_with_symbol": {
"Symbol(name)": "hello"
},
"proxy": {},
"react_element": {},
"regexp": {},
Expand Down Expand Up @@ -612,6 +615,25 @@ exports[`InspectedElementContext should support objects with overridden hasOwnPr
}
`;

exports[`InspectedElementContext should support objects with with inherited keys: 1: Inspected element 2 1`] = `
{
"id": 2,
"owners": null,
"context": null,
"hooks": null,
"props": {
"object": {
"123": 3,
"enumerableString": 2,
"Symbol(enumerableSymbol)": 3,
"enumerableStringBase": 1,
"Symbol(enumerableSymbolBase)": 1
}
},
"state": null
}
`;

exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
{
"id": 2,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,9 @@ describe('InspectedElementContext', () => {
const objectOfObjects = {
inner: {string: 'abc', number: 123, boolean: true},
};
const objectWithSymbol = {
[Symbol('name')]: 'hello',
};
const typedArray = Int8Array.from([100, -100, 0]);
const arrayBuffer = typedArray.buffer;
const dataView = new DataView(arrayBuffer);
Expand Down Expand Up @@ -575,6 +578,7 @@ describe('InspectedElementContext', () => {
map={mapShallow}
map_of_maps={mapOfMaps}
object_of_objects={objectOfObjects}
object_with_symbol={objectWithSymbol}
proxy={proxyInstance}
react_element={<span />}
regexp={/abc/giu}
Expand Down Expand Up @@ -628,6 +632,7 @@ describe('InspectedElementContext', () => {
map,
map_of_maps,
object_of_objects,
object_with_symbol,
proxy,
react_element,
regexp,
Expand Down Expand Up @@ -732,6 +737,8 @@ describe('InspectedElementContext', () => {
);
expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');

expect(object_with_symbol['Symbol(name)']).toBe('hello');
bvaughn marked this conversation as resolved.
Show resolved Hide resolved

expect(proxy[meta.inspectable]).toBe(false);
expect(proxy[meta.name]).toBe('function');
expect(proxy[meta.type]).toBe('function');
Expand Down Expand Up @@ -934,6 +941,111 @@ describe('InspectedElementContext', () => {
done();
});

it('should support objects with with inherited keys', async done => {
const Example = () => null;

const base = Object.create(Object.prototype, {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('enumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableStringBase: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('nonEnumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
});

const object = Object.create(base, {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
[123]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example object={object} />, container),
);

const id = ((store.getElementIDAtIndex(0): any): number);

let inspectedElement = null;

function Suspender({target}) {
const {getInspectedElement} = React.useContext(InspectedElementContext);
inspectedElement = getInspectedElement(id);
return null;
}

await utils.actAsync(
() =>
TestRenderer.create(
<Contexts
defaultSelectedElementID={id}
defaultSelectedElementIndex={0}>
<React.Suspense fallback={null}>
<Suspender target={id} />
</React.Suspense>
</Contexts>,
),
false,
);

expect(inspectedElement).not.toBeNull();
expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
expect(inspectedElement.props.object).toEqual({
123: 3,
'Symbol(enumerableSymbol)': 3,
'Symbol(enumerableSymbolBase)': 1,
enumerableString: 2,
enumerableStringBase: 1,
});

done();
});

it('should not dehydrate nested values until explicitly requested', async done => {
const Example = () => {
const [state] = React.useState({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,29 @@ Object {
}
`;

exports[`InspectedElementContext should support objects with with inherited keys: 1: Initial inspection 1`] = `
Object {
"id": 2,
"type": "full-data",
"value": {
"id": 2,
"owners": null,
"context": {},
"hooks": null,
"props": {
"data": {
"123": 3,
"enumerableString": 2,
"Symbol(enumerableSymbol)": 3,
"enumerableStringBase": 1,
"Symbol(enumerableSymbolBase)": 1
}
},
"state": null
},
}
`;

exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
Object {
"id": 2,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,81 @@ describe('InspectedElementContext', () => {
done();
});

it('should support objects with with inherited keys', async done => {
const Example = () => null;

const base = Object.create(Object.prototype, {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('enumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableStringBase: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('nonEnumerableSymbolBase')]: {
value: 1,
writable: true,
enumerable: false,
configurable: true,
},
});

const object = Object.create(base, {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
[123]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

act(() =>
ReactDOM.render(<Example data={object} />, document.createElement('div')),
);

const id = ((store.getElementIDAtIndex(0): any): number);
const inspectedElement = await read(id);

expect(inspectedElement).toMatchSnapshot('1: Initial inspection');

done();
});

it('should not dehydrate nested values until explicitly requested', async done => {
const Example = () => null;

Expand Down
Loading