Skip to content

Commit

Permalink
Minor tweaks to DevTools test data
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Sep 14, 2020
1 parent dbf29c3 commit 6b06f41
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 37 deletions.
29 changes: 21 additions & 8 deletions fixtures/devtools/standalone/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,54 +209,67 @@ <h1>List</h1>
}

const baseInheritedKeys = Object.create(Object.prototype, {
value1: {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value1')]: {
[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, {
value2: {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
value3: {
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
3: {
123: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value2')]: {
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('value3')]: {
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

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

const object = {
Expand Down
10 changes: 5 additions & 5 deletions ...es/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -623,11 +623,11 @@ exports[`InspectedElementContext should support objects with with inherited keys
"hooks": null,
"props": {
"object": {
"3": 3,
"value2": 2,
"Symbol(value3)": 3,
"value1": 1,
"Symbol(value1)": 1
"123": 3,
"enumerableString": 2,
"Symbol(enumerableSymbol)": 3,
"enumerableStringBase": 1,
"Symbol(enumerableSymbolBase)": 1
}
},
"state": null
Expand Down
37 changes: 25 additions & 12 deletions packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -945,52 +945,65 @@ describe('InspectedElementContext', () => {
const Example = () => null;

const base = Object.create(Object.prototype, {
value1: {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value1')]: {
[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, {
value2: {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
value3: {
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
3: {
[123]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value2')]: {
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('value3')]: {
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example object={object} />, container),
Expand Down Expand Up @@ -1023,11 +1036,11 @@ describe('InspectedElementContext', () => {
expect(inspectedElement).not.toBeNull();
expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
expect(inspectedElement.props.object).toEqual({
'3': 3,
'Symbol(value1)': 1,
'Symbol(value3)': 3,
value1: 1,
value2: 2,
123: 3,
'Symbol(enumerableSymbol)': 3,
'Symbol(enumerableSymbolBase)': 1,
enumerableString: 2,
enumerableStringBase: 1,
});

done();
Expand Down
10 changes: 5 additions & 5 deletions ...ages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,11 +247,11 @@ Object {
"hooks": null,
"props": {
"data": {
"3": 3,
"value2": 2,
"Symbol(value3)": 3,
"value1": 1,
"Symbol(value1)": 1
"123": 3,
"enumerableString": 2,
"Symbol(enumerableSymbol)": 3,
"enumerableStringBase": 1,
"Symbol(enumerableSymbolBase)": 1
}
},
"state": null
Expand Down
27 changes: 20 additions & 7 deletions packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,52 +436,65 @@ describe('InspectedElementContext', () => {
const Example = () => null;

const base = Object.create(Object.prototype, {
value1: {
enumerableStringBase: {
value: 1,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value1')]: {
[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, {
value2: {
enumerableString: {
value: 2,
writable: true,
enumerable: true,
configurable: true,
},
value3: {
nonEnumerableString: {
value: 3,
writable: true,
enumerable: false,
configurable: true,
},
3: {
[123]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
[Symbol('value2')]: {
[Symbol('nonEnumerableSymbol')]: {
value: 2,
writable: true,
enumerable: false,
configurable: true,
},
[Symbol('value3')]: {
[Symbol('enumerableSymbol')]: {
value: 3,
writable: true,
enumerable: true,
configurable: true,
},
});

act(() =>
ReactDOM.render(<Example data={object} />, document.createElement('div')),
);
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import CustomObject from './CustomObject';
import EdgeCaseObjects from './EdgeCaseObjects.js';
import NestedProps from './NestedProps';
import SimpleValues from './SimpleValues';
import SymbolKeys from './SymbolKeys';

// TODO Add Immutable JS example

Expand All @@ -32,6 +33,7 @@ export default function InspectableElements() {
<CustomObject />
<EdgeCaseObjects />
<CircularReferences />
<SymbolKeys />
</Fragment>
);
}
78 changes: 78 additions & 0 deletions packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import * as React from 'react';

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 data = 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,
},
});

export default function SymbolKeys() {
return <ChildComponent data={data} />;
}

function ChildComponent(props: any) {
return null;
}

0 comments on commit 6b06f41

Please sign in to comment.