Skip to content
Permalink
Browse files

Fix replacing child nodes with text

  • Loading branch information...
vadimdemedes committed Mar 5, 2019
1 parent 34f3bb7 commit aba6a8964620a4fa54d1f40160b98ee58509b710
Showing with 35 additions and 2 deletions.
  1. +1 −0 package.json
  2. +9 −1 src/reconciler.js
  3. +25 −1 test/components.js
@@ -71,6 +71,7 @@
"node-pty": "^0.8.1",
"p-queue": "^3.0.0",
"react": "^16.6.1",
"sinon": "^7.2.7",
"strip-ansi": "^4.0.0",
"svg-term-cli": "^2.1.1",
"xo": "^0.24.0"
@@ -85,7 +85,15 @@ export default onRender => {
if (key === 'children') {
if (typeof value === 'string' || typeof value === 'number') {
if (type === 'div') {
node.childNodes[0].textContent = String(value);
// Text node must be wrapped in another node, so that text can be aligned within container
// If there's no such node, a new one must be created
if (node.childNodes.length === 0) {
const textElement = createNode('div');
textElement.textContent = String(value);
appendChildNode(node, textElement);
} else {
node.childNodes[0].textContent = String(value);
}
}

if (type === 'span') {
@@ -1,7 +1,8 @@
import React, {useState} from 'react';
import test from 'ava';
import chalk from 'chalk';
import {Box, Color, Static} from '..';
import {spy} from 'sinon';
import {Box, Color, Static, render} from '..';
import renderToString from './helpers/render-to-string';

test('text', t => {
@@ -124,3 +125,26 @@ test('ensure wrap-ansi doesn\'t trim leading whitespace', t => {

t.is(output, chalk.red(' ERROR '));
});

test('replace child node with text', t => {
const stdout = {
write: spy(),
columns: 100
};

const Dynamic = ({replace}) => ( // eslint-disable-line react/prop-types
<Box>
{replace ? 'x' : <Color green>test</Color>}
</Box>
);

const {rerender} = render(<Dynamic/>, {
stdout,
debug: true
});

t.is(stdout.write.lastCall.args[0], chalk.green('test'));

rerender(<Dynamic replace/>);
t.is(stdout.write.lastCall.args[0], 'x');
});

0 comments on commit aba6a89

Please sign in to comment.
You can’t perform that action at this time.