Merge pull request #9080 from trueadm/remove-stack-dependencies-from-…

…tests

[Fiber] Remove stack dependencies from tests

scripts/fiber/tests-failing.txt

@@ -28,7 +28,6 @@ src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
 * can reconcile text arbitrarily split into multiple nodes on some substitutions only
 
 src/renderers/dom/shared/__tests__/ReactMount-test.js
-* tracks root instances
 * marks top-level mounts
 
 src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js

scripts/fiber/tests-passing.txt

@@ -828,7 +828,6 @@ src/renderers/__tests__/ReactUpdates-test.js
 * should update children even if parent blocks updates
 * should not reconcile children passed via props
 * should flow updates correctly
-* should share reconcile transaction across different roots
 * should queue mount-ready handlers across different roots
 * should flush updates in the correct order
 * should flush updates in the correct order across roots
@@ -1088,14 +1087,13 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * gives source code refs for unknown prop warning for exact elements
 * gives source code refs for unknown prop warning for exact elements in composition
 * should suggest property name if available
+* renders innerHTML and preserves whitespace
+* render and then updates innerHTML and preserves whitespace
 
 src/renderers/dom/shared/__tests__/ReactDOMComponentTree-test.js
 * finds nodes for instances
 * finds instances for nodes
 
-src/renderers/dom/shared/__tests__/ReactDOMIDOperations-test.js
-* should update innerHTML and preserve whitespace
-
 src/renderers/dom/shared/__tests__/ReactDOMInvalidARIAHook-test.js
 * should allow valid aria-* props
 * should warn for one invalid aria-* prop

src/renderers/__tests__/ReactUpdates-test.js

@@ -14,7 +14,6 @@
 var React;
 var ReactDOM;
 var ReactTestUtils;
-var ReactUpdates;
 var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
 
 describe('ReactUpdates', () => {
@@ -23,7 +22,6 @@ describe('ReactUpdates', () => {
     ReactDOM = require('react-dom');
     ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
     ReactTestUtils = require('ReactTestUtils');
-    ReactUpdates = require('ReactUpdates');
   });
 
   it('should batch state when updating state twice', () => {
@@ -507,38 +505,6 @@ describe('ReactUpdates', () => {
     );
   });
 
-  it('should share reconcile transaction across different roots', () => {
-    if (ReactDOMFeatureFlags.useFiber) {
-      return;
-    }
-    var ReconcileTransaction = ReactUpdates.ReactReconcileTransaction;
-    spyOn(ReconcileTransaction, 'getPooled').and.callThrough();
-
-    class Component extends React.Component {
-      render() {
-        return <div>{this.props.text}</div>;
-      }
-    }
-
-    var containerA = document.createElement('div');
-    var containerB = document.createElement('div');
-
-    // Initial renders aren't batched together yet...
-    ReactDOM.unstable_batchedUpdates(function() {
-      ReactDOM.render(<Component text="A1" />, containerA);
-      ReactDOM.render(<Component text="B1" />, containerB);
-    });
-    expect(ReconcileTransaction.getPooled.calls.count()).toBe(2);
-
-    // ...but updates are! Here only one more transaction is used, which means
-    // we only have to initialize and close the wrappers once.
-    ReactDOM.unstable_batchedUpdates(function() {
-      ReactDOM.render(<Component text="A2" />, containerA);
-      ReactDOM.render(<Component text="B2" />, containerB);
-    });
-    expect(ReconcileTransaction.getPooled.calls.count()).toBe(3);
-  });
-
   it('should queue mount-ready handlers across different roots', () => {
     // We'll define two components A and B, then update both of them. When A's
     // componentDidUpdate handlers is called, B's DOM should already have been

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -692,111 +692,55 @@ describe('ReactDOMComponent', () => {
   });
 
   describe('createOpenTagMarkup', () => {
-    var genMarkup;
-
     function quoteRegexp(str) {
       return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
-    beforeEach(() => {
-      var ReactDOMInjection = require('ReactDOMInjection');
-      ReactDOMInjection.inject();
-      var ReactDOMStackInjection = require('ReactDOMStackInjection');
-      ReactDOMStackInjection.inject();
-
-      var ReactDOMComponent = require('ReactDOMComponent');
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-      var NodeStub = function(initialProps) {
-        this._currentElement = {props: initialProps};
-        this._rootNodeID = 1;
-      };
-      Object.assign(NodeStub.prototype, ReactDOMComponent.Mixin);
-
-      genMarkup = function(props) {
-        var transaction = new ReactReconcileTransaction();
-        return (new NodeStub(props))._createOpenTagMarkupAndPutListeners(
-          transaction,
-          props
-        );
-      };
+    function toHaveAttribute(actual, expected) {
+      var [attr, value] = expected;
+      var re = '(?:^|\\s)' + attr + '=[\\\'"]';
+      if (typeof value !== 'undefined') {
+        re += quoteRegexp(value) + '[\\\'"]';
+      }
+      return (new RegExp(re)).test(actual);
+    }
 
-      jasmine.addMatchers({
-        toHaveAttribute() {
-          return {
-            compare(actual, expected) {
-              var [attr, value] = expected;
-              var re = '(?:^|\\s)' + attr + '=[\\\'"]';
-              if (typeof value !== 'undefined') {
-                re += quoteRegexp(value) + '[\\\'"]';
-              }
-              return {
-                pass: (new RegExp(re)).test(actual),
-              };
-            },
-          };
-        },
-      });
-    });
+    function genMarkup(props) {
+      return ReactDOMServer.renderToString(<div {...props} />);
+    }
 
     it('should generate the correct markup with className', () => {
-      expect(genMarkup({className: 'a'})).toHaveAttribute(['class', 'a']);
-      expect(genMarkup({className: 'a b'})).toHaveAttribute(['class', 'a b']);
-      expect(genMarkup({className: ''})).toHaveAttribute(['class', '']);
+      expect(toHaveAttribute(genMarkup({className: 'a'}), ['class', 'a']));
+      expect(toHaveAttribute(genMarkup({className: 'a b'}), ['class', 'a b']));
+      expect(toHaveAttribute(genMarkup({className: ''}), ['class', '']));
     });
 
     it('should escape style names and values', () => {
-      expect(genMarkup({
+      expect(toHaveAttribute(genMarkup({
         style: {'b&ckground': '<3'},
-      })).toHaveAttribute(['style', 'b&amp;ckground:&lt;3;']);
+      }), ['style', 'b&amp;ckground:&lt;3;']));
     });
   });
 
   describe('createContentMarkup', () => {
-    var genMarkup;
-
     function quoteRegexp(str) {
       return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
-    beforeEach(() => {
-      var ReactDOMComponent = require('ReactDOMComponent');
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
+    function genMarkup(props) {
+      return ReactDOMServer.renderToString(<div {...props} />);
+    }    
 
-      var NodeStub = function(initialProps) {
-        this._currentElement = {props: initialProps};
-        this._rootNodeID = 1;
-      };
-      Object.assign(NodeStub.prototype, ReactDOMComponent.Mixin);
-
-      genMarkup = function(props) {
-        var transaction = new ReactReconcileTransaction();
-        return (new NodeStub(props))._createContentMarkup(
-          transaction,
-          props,
-          {}
-        );
-      };
-
-      jasmine.addMatchers({
-        toHaveInnerhtml() {
-          return {
-            compare(actual, expected) {
-              var re = '^' + quoteRegexp(expected) + '$';
-              return {
-                pass: (new RegExp(re)).test(actual),
-              };
-            },
-          };
-        },
-      });
-    });
+    function toHaveInnerhtml(actual, expected) {
+      var re = '^' + quoteRegexp(expected) + '$';
+      return (new RegExp(re)).test(actual);
+    }
 
     it('should handle dangerouslySetInnerHTML', () => {
       var innerHTML = {__html: 'testContent'};
       expect(
-        genMarkup({dangerouslySetInnerHTML: innerHTML})
-      ).toHaveInnerhtml('testContent');
+        toHaveInnerhtml(genMarkup({dangerouslySetInnerHTML: innerHTML}), 'testContent')
+      );
     });
   });
 
@@ -1856,4 +1800,28 @@ describe('ReactDOMComponent', () => {
       );
     });
   });
+
+  describe('whitespace', () => {
+    it('renders innerHTML and preserves whitespace', () => {
+      const container = document.createElement('div');
+      const html = '\n  \t  <span>  \n  testContent  \t  </span>  \n  \t';
+      const elem = <div dangerouslySetInnerHTML={{ __html: html }} />;
+
+      ReactDOM.render(elem, container);
+      expect(container.firstChild.innerHTML).toBe(html);
+    });
+
+    it('render and then updates innerHTML and preserves whitespace', () => {
+      const container = document.createElement('div');
+      const html = '\n  \t  <span>  \n  testContent1  \t  </span>  \n  \t';
+      const elem = <div dangerouslySetInnerHTML={{ __html: html }} />;
+      ReactDOM.render(elem, container);
+
+      const html2 = '\n  \t  <div>  \n  testContent2  \t  </div>  \n  \t';
+      const elem2 = <div dangerouslySetInnerHTML={{ __html: html2 }} />;
+      ReactDOM.render(elem2, container);
+
+      expect(container.firstChild.innerHTML).toBe(html2);
+    });
+  });
 });

src/renderers/dom/shared/__tests__/ReactMount-test.js

@@ -14,7 +14,6 @@
 var React;
 var ReactDOM;
 var ReactDOMServer;
-var ReactMount;
 var ReactTestUtils;
 var WebComponents;
 
@@ -25,7 +24,6 @@ describe('ReactMount', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
-    ReactMount = require('ReactMount');
     ReactTestUtils = require('ReactTestUtils');
 
     try {
@@ -297,18 +295,6 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('tracks root instances', () => {
-    // Used by devtools.
-    expect(Object.keys(ReactMount._instancesByReactRootID).length).toBe(0);
-    ReactTestUtils.renderIntoDocument(<span />);
-    expect(Object.keys(ReactMount._instancesByReactRootID).length).toBe(1);
-    var container = document.createElement('div');
-    ReactDOM.render(<span />, container);
-    expect(Object.keys(ReactMount._instancesByReactRootID).length).toBe(2);
-    ReactDOM.unmountComponentAtNode(container);
-    expect(Object.keys(ReactMount._instancesByReactRootID).length).toBe(1);
-  });
-
   it('marks top-level mounts', () => {
     var ReactFeatureFlags = require('ReactFeatureFlags');