@samitouri / QOS-React / commits / 804c680f06

Report dangerouslySetInnerHTML as no children

Dan Abramov committed Apr 20, 2016 at 18:01 UTC 804c680f061c7cf055bf56c12a995308dc150f4b
2 files changed +169
src/isomorphic/__tests__/ReactDebugTool-test.js
+166
@@ -552,6 +552,16 @@ describe('ReactDebugTool', () => {
552 };
553 assertTreeMatches([element, tree]);
554 });
555 +
556 + it('reports html content as no children', () => {
557 + var element = <div dangerouslySetInnerHTML={{__html: 'Bye.'}} />;
558 + var tree = {
559 + isComposite: false,
560 + displayName: 'div',
561 + children: [],
562 + };
563 + assertTreeMatches([element, tree]);
564 + });
565 });
566
567 describe('update', () => {
@@ -639,6 +649,58 @@ describe('ReactDebugTool', () => {
649 ]);
650 });
651
652 + it('updates from html content to a single text child', () => {
653 + var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
654 + var treeBefore = {
655 + isComposite: false,
656 + displayName: 'div',
657 + children: [],
658 + };
659 +
660 + var elementAfter = <div>Hi.</div>;
661 + var treeAfter = {
662 + isComposite: false,
663 + displayName: 'div',
664 + children: [{
665 + isComposite: false,
666 + displayName: '#text',
667 + text: 'Hi.',
668 + children: [],
669 + }],
670 + };
671 +
672 + assertTreeMatches([
673 + [elementBefore, treeBefore],
674 + [elementAfter, treeAfter],
675 + ]);
676 + });
677 +
678 + it('updates from a single text child to html content', () => {
679 + var elementBefore = <div>Hi.</div>;
680 + var treeBefore = {
681 + isComposite: false,
682 + displayName: 'div',
683 + children: [{
684 + isComposite: false,
685 + displayName: '#text',
686 + text: 'Hi.',
687 + children: [],
688 + }],
689 + };
690 +
691 + var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
692 + var treeAfter = {
693 + isComposite: false,
694 + displayName: 'div',
695 + children: [],
696 + };
697 +
698 + assertTreeMatches([
699 + [elementBefore, treeBefore],
700 + [elementAfter, treeAfter],
701 + ]);
702 + });
703 +
704 it('updates from no children to multiple text children', () => {
705 var elementBefore = <div />;
706 var treeBefore = {
@@ -701,6 +763,110 @@ describe('ReactDebugTool', () => {
763 ]);
764 });
765
766 + it('updates from html content to multiple text children', () => {
767 + var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
768 + var treeBefore = {
769 + isComposite: false,
770 + displayName: 'div',
771 + children: [],
772 + };
773 +
774 + var elementAfter = <div>{'Hi.'}{'Bye.'}</div>;
775 + var treeAfter = {
776 + isComposite: false,
777 + displayName: 'div',
778 + children: [{
779 + isComposite: false,
780 + displayName: '#text',
781 + text: 'Hi.',
782 + children: [],
783 + }, {
784 + isComposite: false,
785 + displayName: '#text',
786 + text: 'Bye.',
787 + children: [],
788 + }],
789 + };
790 +
791 + assertTreeMatches([
792 + [elementBefore, treeBefore],
793 + [elementAfter, treeAfter],
794 + ]);
795 + });
796 +
797 + it('updates from multiple text children to html content', () => {
798 + var elementBefore = <div>{'Hi.'}{'Bye.'}</div>;
799 + var treeBefore = {
800 + isComposite: false,
801 + displayName: 'div',
802 + children: [{
803 + isComposite: false,
804 + displayName: '#text',
805 + text: 'Hi.',
806 + children: [],
807 + }, {
808 + isComposite: false,
809 + displayName: '#text',
810 + text: 'Bye.',
811 + children: [],
812 + }],
813 + };
814 +
815 + var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
816 + var treeAfter = {
817 + isComposite: false,
818 + displayName: 'div',
819 + children: [],
820 + };
821 +
822 + assertTreeMatches([
823 + [elementBefore, treeBefore],
824 + [elementAfter, treeAfter],
825 + ]);
826 + });
827 +
828 + it('updates from html content to no children', () => {
829 + var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
830 + var treeBefore = {
831 + isComposite: false,
832 + displayName: 'div',
833 + children: [],
834 + };
835 +
836 + var elementAfter = <div />;
837 + var treeAfter = {
838 + isComposite: false,
839 + displayName: 'div',
840 + children: [],
841 + };
842 +
843 + assertTreeMatches([
844 + [elementBefore, treeBefore],
845 + [elementAfter, treeAfter],
846 + ]);
847 + });
848 +
849 + it('updates from no children to html content', () => {
850 + var elementBefore = <div />;
851 + var treeBefore = {
852 + isComposite: false,
853 + displayName: 'div',
854 + children: [],
855 + };
856 +
857 + var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
858 + var treeAfter = {
859 + isComposite: false,
860 + displayName: 'div',
861 + children: [],
862 + };
863 +
864 + assertTreeMatches([
865 + [elementBefore, treeBefore],
866 + [elementAfter, treeAfter],
867 + ]);
868 + });
869 +
870 it('updates from one text child to multiple text children', () => {
871 var elementBefore = <div>Hi.</div>;
872 var treeBefore = {
src/renderers/dom/shared/ReactDOMComponent.js
+3
@@ -1033,6 +1033,9 @@ ReactDOMComponent.Mixin = {
1033 if (lastHtml !== nextHtml) {
1034 this.updateMarkup('' + nextHtml);
1035 }
1036 + if (__DEV__) {
1037 + ReactInstrumentation.debugTool.onSetChildren(this._debugID, []);
1038 + }
1039 } else if (nextChildren != null) {
1040 this.updateChildren(nextChildren, transaction, context);
1041 }