Added [root] indicator to Store snapshot reprensentation
Brian Vaughn committed
Apr 11, 2019 at 09:25 UTC
25e918b4d98ad915110e5ad8516cbb0b64cf2757
2 files changed
+41
-28
src/__tests__/__snapshots__/store-test.js.snap
+13
-10
@@ -1,20 +1,23 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
exports[`Store should initialize a multiple root tree 1`] = `
4
-▾ <Parent>
5
- <Child key="one">
6
- <Child key="two">
7
-▾ <Parent>
8
- <Child key="one">
9
- <Child key="two">
10
-`;
11
-
12
-exports[`Store should initialize a simple tree 1`] = `
13
-▾ <Grandparent>
4
+[root]
5
▾ <Parent>
6
<Child key="one">
7
<Child key="two">
8
+[root]
9
▾ <Parent>
10
<Child key="one">
11
<Child key="two">
12
`;
13
+
14
+exports[`Store should initialize a simple tree 1`] = `
15
+[root]
16
+ ▾ <Grandparent>
17
+ ▾ <Parent>
18
+ <Child key="one">
19
+ <Child key="two">
20
+ ▾ <Parent>
21
+ <Child key="one">
22
+ <Child key="two">
23
+`;
src/devtools/store.js
+28
-18
@@ -836,30 +836,40 @@ export default class Store extends EventEmitter {
836
this._bridge.removeListener('shutdown', this.onBridgeShutdown);
837
};
838
839
- // Jest snapshot testing
839
+ // Used for Jest snapshot testing.
840
+ // May also be useful for visually debugging the tree, so it lives on the Store.
841
__toSnapshot = () => {
841
- const snapshot = [];
842
+ const snapshotLines = [];
843
843
- // TODO Include root (ids) in the snapshot?
844
- for (let i = 0; i < this._weightAcrossRoots; i++) {
845
- const element = ((this.getElementAtIndex(i): any): Element);
844
+ let rootWeight = 0;
845
847
- let prefix = ' ';
848
- if (element.children.length > 0) {
849
- prefix = element.isCollapsed ? '▸' : '▾';
850
- }
846
+ this._roots.forEach(rootID => {
847
+ snapshotLines.push('[root]');
848
+
849
+ const { weight } = ((this.getElementByID(rootID): any): Element);
850
+
851
+ for (let i = rootWeight; i < rootWeight + weight; i++) {
852
+ const element = ((this.getElementAtIndex(i): any): Element);
853
+
854
+ let prefix = ' ';
855
+ if (element.children.length > 0) {
856
+ prefix = element.isCollapsed ? '▸' : '▾';
857
+ }
858
+
859
+ let key = '';
860
+ if (element.key !== null) {
861
+ key = ` key="${element.key}"`;
862
+ }
863
852
- let key = '';
853
- if (element.key !== null) {
854
- key = ` key="${element.key}"`;
864
+ snapshotLines.push(
865
+ `${' '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
866
+ 'null'}${key}>`
867
+ );
868
}
869
857
- snapshot.push(
858
- `${' '.repeat(element.depth)}${prefix} <${element.displayName ||
859
- 'null'}${key}>`
860
- );
861
- }
870
+ rootWeight += weight;
871
+ });
872
863
- return snapshot.join('\n');
873
+ return snapshotLines.join('\n');
874
};
875
}