Skip to content

Commit 2c7cee3

Browse files
author
Brian Vaughn
committed
Addressed PR feedback
Also fixed an incorrect boolean check for read-only vs editable hooks.
1 parent 6351d46 commit 2c7cee3

File tree

3 files changed

+51
-43
lines changed

3 files changed

+51
-43
lines changed

‎packages/react-devtools-shared/src/__tests__/editing-test.js

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,18 @@
1010
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
1111
import type Store from 'react-devtools-shared/src/devtools/store';
1212

13-
describe('editable props and state', () => {
13+
describe('editing interface', () => {
1414
let PropTypes;
1515
let React;
1616
let ReactDOM;
1717
let bridge: FrontendBridge;
1818
let store: Store;
1919
let utils;
2020

21+
const flushPendingUpdates = () => {
22+
jest.runOnlyPendingTimers();
23+
};
24+
2125
beforeEach(() => {
2226
utils = require('./utils');
2327

@@ -108,7 +112,7 @@ describe('editable props and state', () => {
108112
type: 'props',
109113
value,
110114
});
111-
jest.runOnlyPendingTimers();
115+
flushPendingUpdates();
112116
}
113117

114118
overrideProps(classID, ['shallow'], 'updated');
@@ -162,7 +166,8 @@ describe('editable props and state', () => {
162166
});
163167
});
164168

165-
it('should still support overriding props values with legacy backend methods', async () => {
169+
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
170+
it('should still support overriding prop values with legacy backend methods', async () => {
166171
await mountTestApp();
167172

168173
function overrideProps(id, path, value) {
@@ -173,7 +178,7 @@ describe('editable props and state', () => {
173178
rendererID,
174179
value,
175180
});
176-
jest.runOnlyPendingTimers();
181+
flushPendingUpdates();
177182
}
178183

179184
overrideProps(classID, ['object', 'nested'], 'updated');
@@ -207,7 +212,7 @@ describe('editable props and state', () => {
207212
rendererID,
208213
type: 'props',
209214
});
210-
jest.runOnlyPendingTimers();
215+
flushPendingUpdates();
211216
}
212217

213218
renamePath(classID, ['shallow'], ['after']);
@@ -257,7 +262,7 @@ describe('editable props and state', () => {
257262
type: 'props',
258263
value,
259264
});
260-
jest.runOnlyPendingTimers();
265+
flushPendingUpdates();
261266
}
262267

263268
overrideProps(classID, ['new'], 'value');
@@ -336,7 +341,7 @@ describe('editable props and state', () => {
336341
rendererID,
337342
type: 'props',
338343
});
339-
jest.runOnlyPendingTimers();
344+
flushPendingUpdates();
340345
}
341346

342347
deletePath(classID, ['shallow']);
@@ -432,7 +437,7 @@ describe('editable props and state', () => {
432437
type: 'state',
433438
value,
434439
});
435-
jest.runOnlyPendingTimers();
440+
flushPendingUpdates();
436441
}
437442

438443
overrideState(['shallow'], 'updated');
@@ -457,6 +462,7 @@ describe('editable props and state', () => {
457462
});
458463
});
459464

465+
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
460466
it('should still support overriding state values with legacy backend methods', async () => {
461467
await mountTestApp();
462468

@@ -468,7 +474,7 @@ describe('editable props and state', () => {
468474
rendererID,
469475
value,
470476
});
471-
jest.runOnlyPendingTimers();
477+
flushPendingUpdates();
472478
}
473479

474480
overrideState(['array', 1], 'updated');
@@ -491,7 +497,7 @@ describe('editable props and state', () => {
491497
rendererID,
492498
type: 'state',
493499
});
494-
jest.runOnlyPendingTimers();
500+
flushPendingUpdates();
495501
}
496502

497503
renamePath(['shallow'], ['after']);
@@ -525,7 +531,7 @@ describe('editable props and state', () => {
525531
type: 'state',
526532
value,
527533
});
528-
jest.runOnlyPendingTimers();
534+
flushPendingUpdates();
529535
}
530536

531537
overrideState(['new'], 'value');
@@ -572,7 +578,7 @@ describe('editable props and state', () => {
572578
rendererID,
573579
type: 'state',
574580
});
575-
jest.runOnlyPendingTimers();
581+
flushPendingUpdates();
576582
}
577583

578584
deletePath(['shallow']);
@@ -647,7 +653,7 @@ describe('editable props and state', () => {
647653
type: 'hooks',
648654
value,
649655
});
650-
jest.runOnlyPendingTimers();
656+
flushPendingUpdates();
651657
}
652658

653659
overrideHookState(['shallow'], 'updated');
@@ -678,7 +684,8 @@ describe('editable props and state', () => {
678684
});
679685
});
680686

681-
it('should still support overriding hooks values with legacy backend methods', async () => {
687+
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
688+
it('should still support overriding hook values with legacy backend methods', async () => {
682689
await mountTestApp();
683690

684691
function overrideHookState(path, value) {
@@ -690,7 +697,7 @@ describe('editable props and state', () => {
690697
rendererID,
691698
value,
692699
});
693-
jest.runOnlyPendingTimers();
700+
flushPendingUpdates();
694701
}
695702

696703
overrideHookState(['shallow'], 'updated');
@@ -716,7 +723,7 @@ describe('editable props and state', () => {
716723
rendererID,
717724
type: 'hooks',
718725
});
719-
jest.runOnlyPendingTimers();
726+
flushPendingUpdates();
720727
}
721728

722729
renamePath(['shallow'], ['after']);
@@ -751,7 +758,7 @@ describe('editable props and state', () => {
751758
type: 'hooks',
752759
value,
753760
});
754-
jest.runOnlyPendingTimers();
761+
flushPendingUpdates();
755762
}
756763

757764
overrideHookState(['new'], 'value');
@@ -799,7 +806,7 @@ describe('editable props and state', () => {
799806
rendererID,
800807
type: 'hooks',
801808
});
802-
jest.runOnlyPendingTimers();
809+
flushPendingUpdates();
803810
}
804811

805812
deletePath(['shallow']);
@@ -907,7 +914,7 @@ describe('editable props and state', () => {
907914
type: 'context',
908915
value,
909916
});
910-
jest.runOnlyPendingTimers();
917+
flushPendingUpdates();
911918
}
912919

913920
overrideContext(['shallow'], 'updated');
@@ -938,6 +945,7 @@ describe('editable props and state', () => {
938945
});
939946
});
940947

948+
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
941949
it('should still support overriding context values with legacy backend methods', async () => {
942950
await mountTestApp();
943951

@@ -954,7 +962,7 @@ describe('editable props and state', () => {
954962
rendererID,
955963
value,
956964
});
957-
jest.runOnlyPendingTimers();
965+
flushPendingUpdates();
958966
}
959967

960968
overrideContext(['object', 'nested'], 'updated');
@@ -985,7 +993,7 @@ describe('editable props and state', () => {
985993
rendererID,
986994
type: 'context',
987995
});
988-
jest.runOnlyPendingTimers();
996+
flushPendingUpdates();
989997
}
990998

991999
renamePath(['shallow'], ['after']);
@@ -1024,7 +1032,7 @@ describe('editable props and state', () => {
10241032
type: 'context',
10251033
value,
10261034
});
1027-
jest.runOnlyPendingTimers();
1035+
flushPendingUpdates();
10281036
}
10291037

10301038
overrideContext(['new'], 'value');
@@ -1076,7 +1084,7 @@ describe('editable props and state', () => {
10761084
rendererID,
10771085
type: 'context',
10781086
});
1079-
jest.runOnlyPendingTimers();
1087+
flushPendingUpdates();
10801088
}
10811089

10821090
deletePath(['shallow']);

‎packages/react-devtools-shared/src/__tests__/legacy/editing-test.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
1111
import type Store from 'react-devtools-shared/src/devtools/store';
1212

13-
describe('editable props and state', () => {
13+
describe('editing interface', () => {
1414
let PropTypes;
1515
let React;
1616
let ReactDOM;
@@ -23,6 +23,10 @@ describe('editable props and state', () => {
2323
jest.runAllTimers(); // Flush Bridge operations
2424
};
2525

26+
const flushPendingUpdates = () => {
27+
jest.runOnlyPendingTimers();
28+
};
29+
2630
beforeEach(() => {
2731
bridge = global.bridge;
2832
store = global.store;
@@ -92,7 +96,7 @@ describe('editable props and state', () => {
9296
type: 'props',
9397
value,
9498
});
95-
jest.runOnlyPendingTimers();
99+
flushPendingUpdates();
96100
}
97101

98102
overrideProps(['shallow'], 'updated');
@@ -133,7 +137,7 @@ describe('editable props and state', () => {
133137
rendererID,
134138
type: 'props',
135139
});
136-
jest.runOnlyPendingTimers();
140+
flushPendingUpdates();
137141
}
138142

139143
renamePath(['shallow'], ['after']);
@@ -166,7 +170,7 @@ describe('editable props and state', () => {
166170
type: 'props',
167171
value,
168172
});
169-
jest.runOnlyPendingTimers();
173+
flushPendingUpdates();
170174
}
171175

172176
overrideProps(['new'], 'value');
@@ -213,7 +217,7 @@ describe('editable props and state', () => {
213217
rendererID,
214218
type: 'props',
215219
});
216-
jest.runOnlyPendingTimers();
220+
flushPendingUpdates();
217221
}
218222

219223
deletePath(['shallow']);
@@ -290,7 +294,7 @@ describe('editable props and state', () => {
290294
type: 'state',
291295
value,
292296
});
293-
jest.runOnlyPendingTimers();
297+
flushPendingUpdates();
294298
}
295299

296300
overrideState(['shallow'], 'updated');
@@ -327,7 +331,7 @@ describe('editable props and state', () => {
327331
rendererID,
328332
type: 'state',
329333
});
330-
jest.runOnlyPendingTimers();
334+
flushPendingUpdates();
331335
}
332336

333337
renamePath(['shallow'], ['after']);
@@ -361,7 +365,7 @@ describe('editable props and state', () => {
361365
type: 'state',
362366
value,
363367
});
364-
jest.runOnlyPendingTimers();
368+
flushPendingUpdates();
365369
}
366370

367371
overrideState(['new'], 'value');
@@ -408,7 +412,7 @@ describe('editable props and state', () => {
408412
rendererID,
409413
type: 'state',
410414
});
411-
jest.runOnlyPendingTimers();
415+
flushPendingUpdates();
412416
}
413417

414418
deletePath(['shallow']);
@@ -511,7 +515,7 @@ describe('editable props and state', () => {
511515
type: 'context',
512516
value,
513517
});
514-
jest.runOnlyPendingTimers();
518+
flushPendingUpdates();
515519
}
516520

517521
overrideContext(['shallow'], 'updated');
@@ -555,7 +559,7 @@ describe('editable props and state', () => {
555559
rendererID,
556560
type: 'context',
557561
});
558-
jest.runOnlyPendingTimers();
562+
flushPendingUpdates();
559563
}
560564

561565
renamePath(['shallow'], ['after']);
@@ -590,7 +594,7 @@ describe('editable props and state', () => {
590594
type: 'context',
591595
value,
592596
});
593-
jest.runOnlyPendingTimers();
597+
flushPendingUpdates();
594598
}
595599

596600
overrideContext(['new'], 'value');
@@ -638,7 +642,7 @@ describe('editable props and state', () => {
638642
rendererID,
639643
type: 'context',
640644
});
641-
jest.runOnlyPendingTimers();
645+
flushPendingUpdates();
642646
}
643647

644648
deletePath(['shallow']);

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -134,16 +134,12 @@ function HookView({
134134
path,
135135
}: HookViewProps) {
136136
const {name, id: hookID, isStateEditable, subHooks, value} = hook;
137-
const {
138-
canEditFunctionPropsDeletePaths,
139-
canEditFunctionPropsRenamePaths,
140-
} = inspectedElement;
141137

142138
const isReadOnly = hookID == null || !isStateEditable;
143139

144-
const canDeletePaths = !isReadOnly && canEditFunctionPropsDeletePaths;
145-
const canEditValues = !isReadOnly;
146-
const canRenamePaths = !isReadOnly && canEditFunctionPropsRenamePaths;
140+
const canDeletePaths = !isReadOnly && canEditHooksAndDeletePaths;
141+
const canEditValues = !isReadOnly && canEditHooks;
142+
const canRenamePaths = !isReadOnly && canEditHooksAndRenamePaths;
147143

148144
const bridge = useContext(BridgeContext);
149145
const store = useContext(StoreContext);

0 commit comments

Comments
 (0)