diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt index 70fbfb03293b2..9c2bebbd84db3 100644 --- a/scripts/fiber/tests-failing.txt +++ b/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 diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index c5ff7cee6acb5..1ff88eb07271a 100644 --- a/scripts/fiber/tests-passing.txt +++ b/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 diff --git a/src/renderers/__tests__/ReactUpdates-test.js b/src/renderers/__tests__/ReactUpdates-test.js index 6ec60de938c63..dfaa439219010 100644 --- a/src/renderers/__tests__/ReactUpdates-test.js +++ b/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
{this.props.text}
; - } - } - - var containerA = document.createElement('div'); - var containerB = document.createElement('div'); - - // Initial renders aren't batched together yet... - ReactDOM.unstable_batchedUpdates(function() { - ReactDOM.render(, containerA); - ReactDOM.render(, 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(, containerA); - ReactDOM.render(, 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 diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 347e57c9879db..9ae945079812a 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/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(
); + } 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&ckground:<3;']); + }), ['style', 'b&ckground:<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(
); + } - 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 \n testContent \t \n \t'; + const elem =
; + + 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 \n testContent1 \t \n \t'; + const elem =
; + ReactDOM.render(elem, container); + + const html2 = '\n \t
\n testContent2 \t
\n \t'; + const elem2 =
; + ReactDOM.render(elem2, container); + + expect(container.firstChild.innerHTML).toBe(html2); + }); + }); }); diff --git a/src/renderers/dom/shared/__tests__/ReactDOMIDOperations-test.js b/src/renderers/dom/shared/__tests__/ReactDOMIDOperations-test.js deleted file mode 100644 index dffd62dae4a3d..0000000000000 --- a/src/renderers/dom/shared/__tests__/ReactDOMIDOperations-test.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @emails react-core - */ - -'use strict'; - -describe('ReactDOMIDOperations', () => { - var ReactDOMComponentTree = require('ReactDOMComponentTree'); - var ReactDOMIDOperations = require('ReactDOMIDOperations'); - - it('should update innerHTML and preserve whitespace', () => { - var stubNode = document.createElement('div'); - var stubInstance = {_debugID: 1}; - ReactDOMComponentTree.precacheNode(stubInstance, stubNode); - - var html = '\n \t \n testContent \t \n \t'; - ReactDOMIDOperations.dangerouslyProcessChildrenUpdates( - stubInstance, - [{ - type: 'SET_MARKUP', - content: html, - fromIndex: null, - toIndex: null, - }], - [] - ); - - expect(stubNode.innerHTML).toBe(html); - }); -}); diff --git a/src/renderers/dom/shared/__tests__/ReactMount-test.js b/src/renderers/dom/shared/__tests__/ReactMount-test.js index 3cba84355475b..95c11c93a1453 100644 --- a/src/renderers/dom/shared/__tests__/ReactMount-test.js +++ b/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(); - expect(Object.keys(ReactMount._instancesByReactRootID).length).toBe(1); - var container = document.createElement('div'); - ReactDOM.render(, 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');