LogBox - Clean up and test message substitutions

Summary:
This diff cleans up some of the message substitution logic and adds unit tests

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18056241

fbshipit-source-id: 6173961c049071ab8aeff6cd273bd3590ee21e60

Libraries/LogBox/UI/LogBoxMessage.js

@@ -21,6 +21,8 @@ type Props = {
   style: TextStyleProp,
 };
 
+const cleanContent = content => content.replace(/Warning: /g, '');
+
 function LogBoxMessage(props: Props): React.Node {
   const {content, substitutions}: Message = props.message;
   const substitutionStyle: TextStyleProp = props.style;
@@ -30,18 +32,21 @@ function LogBoxMessage(props: Props): React.Node {
     const key = String(index);
 
     if (substitution.offset > prevOffset) {
-      const prevPart = content
-        .substr(prevOffset, substitution.offset - prevOffset)
-        .replace('Warning: ', '');
-      elements.push(<Text key={key}>{prevPart}</Text>);
+      const prevPart = content.substr(
+        prevOffset,
+        substitution.offset - prevOffset,
+      );
+
+      elements.push(<Text key={key}>{cleanContent(prevPart)}</Text>);
     }
 
-    const substititionPart = content
-      .substr(substitution.offset, substitution.length)
-      .replace('Warning: ', '');
+    const substititionPart = content.substr(
+      substitution.offset,
+      substitution.length,
+    );
     elements.push(
       <Text key={key + '.5'} style={substitutionStyle}>
-        {substititionPart}
+        {cleanContent(substititionPart)}
       </Text>,
     );
 
@@ -49,8 +54,8 @@ function LogBoxMessage(props: Props): React.Node {
   }, 0);
 
   if (lastOffset < content.length) {
-    const lastPart = content.substr(lastOffset).replace('Warning: ', '');
-    elements.push(<Text key="-1">{lastPart}</Text>);
+    const lastPart = content.substr(lastOffset);
+    elements.push(<Text key="-1">{cleanContent(lastPart)}</Text>);
   }
 
   return <>{elements}</>;

Libraries/LogBox/UI/__tests__/LogBoxMessage-test.js

@@ -30,5 +30,45 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  // TODO: Add tests for text substitutions
+  it('should render message with substitution', () => {
+    const output = render.shallowRender(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'normal substitution normal',
+          substitutions: [{length: 12, offset: 7}],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should strip "Warning: " without breaking substitution', () => {
+    const output = render.shallowRender(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'Warning: normal substitution normal',
+          substitutions: [{length: 12, offset: 16}],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should strip "Warning: Warning: " without breaking substitution', () => {
+    const output = render.shallowRender(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'Warning: Warning: normal substitution normal',
+          substitutions: [{length: 12, offset: 25}],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
 });

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxMessage-test.js.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`LogBoxMessage Should strip "Warning: " without breaking substitution 1`] = `
+<React.Fragment>
+  <Text>
+    normal 
+  </Text>
+  <Text
+    style={Object {}}
+  >
+    substitution
+  </Text>
+  <Text>
+     normal
+  </Text>
+</React.Fragment>
+`;
+
+exports[`LogBoxMessage Should strip "Warning: Warning: " without breaking substitution 1`] = `
+<React.Fragment>
+  <Text>
+    normal 
+  </Text>
+  <Text
+    style={Object {}}
+  >
+    substitution
+  </Text>
+  <Text>
+     normal
+  </Text>
+</React.Fragment>
+`;
+
 exports[`LogBoxMessage should render message 1`] = `
 <React.Fragment>
   <Text>
@@ -7,3 +39,19 @@ exports[`LogBoxMessage should render message 1`] = `
   </Text>
 </React.Fragment>
 `;
+
+exports[`LogBoxMessage should render message with substitution 1`] = `
+<React.Fragment>
+  <Text>
+    normal 
+  </Text>
+  <Text
+    style={Object {}}
+  >
+    substitution
+  </Text>
+  <Text>
+     normal
+  </Text>
+</React.Fragment>
+`;