Add DevTools tests for copying complex values (#17948)
Brian Vaughn committed
Jan 31, 2020 at 15:17 UTC
9ad35905fae96036a130d9dec24b47132dfe4076
2 files changed
+186
packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+99
@@ -1472,4 +1472,103 @@ describe('InspectedElementContext', () => {
1472
1473
done();
1474
});
1475
+
1476
+ it('should enable complex values to be copied to the clipboard', async done => {
1477
+ const Immutable = require('immutable');
1478
+
1479
+ const Example = () => null;
1480
+
1481
+ const set = new Set(['abc', 123]);
1482
+ const map = new Map([
1483
+ ['name', 'Brian'],
1484
+ ['food', 'sushi'],
1485
+ ]);
1486
+ const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
1487
+ const mapOfMaps = new Map([
1488
+ ['first', map],
1489
+ ['second', map],
1490
+ ]);
1491
+ const typedArray = Int8Array.from([100, -100, 0]);
1492
+ const arrayBuffer = typedArray.buffer;
1493
+ const dataView = new DataView(arrayBuffer);
1494
+ const immutable = Immutable.fromJS({
1495
+ a: [{hello: 'there'}, 'fixed', true],
1496
+ b: 123,
1497
+ c: {
1498
+ '1': 'xyz',
1499
+ xyz: 1,
1500
+ },
1501
+ });
1502
+ // $FlowFixMe
1503
+ const bigInt = BigInt(123); // eslint-disable-line no-undef
1504
+
1505
+ await utils.actAsync(() =>
1506
+ ReactDOM.render(
1507
+ <Example
1508
+ arrayBuffer={arrayBuffer}
1509
+ dataView={dataView}
1510
+ map={map}
1511
+ set={set}
1512
+ mapOfMaps={mapOfMaps}
1513
+ setOfSets={setOfSets}
1514
+ typedArray={typedArray}
1515
+ immutable={immutable}
1516
+ bigInt={bigInt}
1517
+ />,
1518
+ document.createElement('div'),
1519
+ ),
1520
+ );
1521
+
1522
+ const id = ((store.getElementIDAtIndex(0): any): number);
1523
+
1524
+ let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
1525
+
1526
+ function Suspender({target}) {
1527
+ const context = React.useContext(InspectedElementContext);
1528
+ copyPath = context.copyInspectedElementPath;
1529
+ return null;
1530
+ }
1531
+
1532
+ await utils.actAsync(
1533
+ () =>
1534
+ TestRenderer.create(
1535
+ <Contexts
1536
+ defaultSelectedElementID={id}
1537
+ defaultSelectedElementIndex={0}>
1538
+ <React.Suspense fallback={null}>
1539
+ <Suspender target={id} />
1540
+ </React.Suspense>
1541
+ </Contexts>,
1542
+ ),
1543
+ false,
1544
+ );
1545
+ expect(copyPath).not.toBeNull();
1546
+
1547
+ // Should copy the whole value (not just the hydrated parts)
1548
+ copyPath(id, ['props']);
1549
+ jest.runOnlyPendingTimers();
1550
+ // Should not error despite lots of unserialized values.
1551
+
1552
+ global.mockClipboardCopy.mockReset();
1553
+
1554
+ // Should copy the nested property specified (not just the outer value)
1555
+ copyPath(id, ['props', 'bigInt']);
1556
+ jest.runOnlyPendingTimers();
1557
+ expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
1558
+ expect(global.mockClipboardCopy).toHaveBeenCalledWith(
1559
+ JSON.stringify('123n'),
1560
+ );
1561
+
1562
+ global.mockClipboardCopy.mockReset();
1563
+
1564
+ // Should copy the nested property specified (not just the outer value)
1565
+ copyPath(id, ['props', 'typedArray']);
1566
+ jest.runOnlyPendingTimers();
1567
+ expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
1568
+ expect(global.mockClipboardCopy).toHaveBeenCalledWith(
1569
+ JSON.stringify({0: 100, 1: -100, 2: 0}),
1570
+ );
1571
+
1572
+ done();
1573
+ });
1574
});
packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+87
@@ -589,4 +589,91 @@ describe('InspectedElementContext', () => {
589
JSON.stringify(nestedObject.a.b),
590
);
591
});
592
+
593
+ it('should enable complex values to be copied to the clipboard', () => {
594
+ const Immutable = require('immutable');
595
+
596
+ const Example = () => null;
597
+
598
+ const set = new Set(['abc', 123]);
599
+ const map = new Map([
600
+ ['name', 'Brian'],
601
+ ['food', 'sushi'],
602
+ ]);
603
+ const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
604
+ const mapOfMaps = new Map([
605
+ ['first', map],
606
+ ['second', map],
607
+ ]);
608
+ const typedArray = Int8Array.from([100, -100, 0]);
609
+ const arrayBuffer = typedArray.buffer;
610
+ const dataView = new DataView(arrayBuffer);
611
+ const immutable = Immutable.fromJS({
612
+ a: [{hello: 'there'}, 'fixed', true],
613
+ b: 123,
614
+ c: {
615
+ '1': 'xyz',
616
+ xyz: 1,
617
+ },
618
+ });
619
+ // $FlowFixMe
620
+ const bigInt = BigInt(123); // eslint-disable-line no-undef
621
+
622
+ act(() =>
623
+ ReactDOM.render(
624
+ <Example
625
+ arrayBuffer={arrayBuffer}
626
+ dataView={dataView}
627
+ map={map}
628
+ set={set}
629
+ mapOfMaps={mapOfMaps}
630
+ setOfSets={setOfSets}
631
+ typedArray={typedArray}
632
+ immutable={immutable}
633
+ bigInt={bigInt}
634
+ />,
635
+ document.createElement('div'),
636
+ ),
637
+ );
638
+
639
+ const id = ((store.getElementIDAtIndex(0): any): number);
640
+ const rendererID = ((store.getRendererIDForElement(id): any): number);
641
+
642
+ // Should copy the whole value (not just the hydrated parts)
643
+ bridge.send('copyElementPath', {
644
+ id,
645
+ path: ['props'],
646
+ rendererID,
647
+ });
648
+ jest.runOnlyPendingTimers();
649
+ // Should not error despite lots of unserialized values.
650
+
651
+ global.mockClipboardCopy.mockReset();
652
+
653
+ // Should copy the nested property specified (not just the outer value)
654
+ bridge.send('copyElementPath', {
655
+ id,
656
+ path: ['props', 'bigInt'],
657
+ rendererID,
658
+ });
659
+ jest.runOnlyPendingTimers();
660
+ expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
661
+ expect(global.mockClipboardCopy).toHaveBeenCalledWith(
662
+ JSON.stringify('123n'),
663
+ );
664
+
665
+ global.mockClipboardCopy.mockReset();
666
+
667
+ // Should copy the nested property specified (not just the outer value)
668
+ bridge.send('copyElementPath', {
669
+ id,
670
+ path: ['props', 'typedArray'],
671
+ rendererID,
672
+ });
673
+ jest.runOnlyPendingTimers();
674
+ expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
675
+ expect(global.mockClipboardCopy).toHaveBeenCalledWith(
676
+ JSON.stringify({0: 100, 1: -100, 2: 0}),
677
+ );
678
+ });
679
});