test: implement tests covering whitespaces handling

A few tests fail, confirming that the current behavior is not compliant with HTML specs. covers #118
meliorence · Jul 14, 2020 · 53b8679 · 53b8679
1 parent bce5216
commit 53b8679
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 6 deletions.
diff --git a/src/__tests__/HTML-test.js b/src/__tests__/HTML-test.js
@@ -1,8 +1,64 @@
-import React from 'react';
-import HTML from '../HTML';
-import renderer from 'react-test-renderer';
+import React from "react";
+import { Text } from "react-native";
+import HTML from "../HTML";
+import renderer from "react-test-renderer";
 
-test('renders correctly', () => {
-    const tree = renderer.create(<HTML html="<span>Hello world</span>" />).toJSON();
+function extractTextFromInstance(instance) {
+  const textChunks = [];
+  const texts = instance.findAllByType(Text);
+  for (const text of texts) {
+    if (typeof text.props.children === "string") {
+      textChunks.push(text.props.children);
+    }
+  }
+  return textChunks.join("");
+}
+
+describe("HTML component", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<HTML html="<span>Hello world</span>" />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
+  });
+  describe("regarding text space behavior", () => {
+    it("collapses spaces when first text tag has a trailing space and the second starts with a space", () => {
+      const testRenderer = renderer.create(
+        <HTML html="<span>random </span> <span>text</span>" />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toBe("random text");
+    });
+    it("preserves spaces when the first text tag has a trailing space and the current one doesn't start with a space", () => {
+      const testRenderer = renderer.create(
+        <HTML html="<b>bold </b><span>text</span>" />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toBe("bold text");
+    });
+    it("preserves a space between two tags which don't contain spaces", () => {
+      const testRenderer = renderer.create(
+        <HTML html="<b>bold</b> <span>text</span>" />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toBe("bold text");
+    });
+  });
+  describe("regarding text line returns behavior", () => {
+     it("replaces newlines with spaces when neither in-between text chunks contain spaces", () => {
+      const testRenderer = renderer.create(
+        <HTML html="foo\nbar" />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toBe("foo bar");
+    });
+
+  });
+  describe("regarding <pre> tags behavior", () => {
+    it("preserves tabs, spaces and line returns", () => {
+      const testRenderer = renderer.create(<HTML html="<pre>\t\n  </pre>" />);
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toBe("\t\n  ");
+    });
+  });
 });
diff --git a/src/__tests__/__snapshots__/HTML-test.js.snap b/src/__tests__/__snapshots__/HTML-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`HTML component renders correctly 1`] = `
 <View
   style={Object {}}
 >