tests: refactored to namespaced tests

meliorence · Jul 14, 2020 · d76f99d · d76f99d
1 parent 05da781
commit d76f99d
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 1 deletion.
diff --git a/src/__tests__/HTML-test.js → __tests__/HTML-test.js b/src/__tests__/HTML-test.js → __tests__/HTML-test.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Text } from "react-native";
-import HTML from "../HTML";
+import HTML from "../index";
 import renderer from "react-test-renderer";
 
 function extractTextFromInstance(instance) {

diff --git a/...__tests__/__snapshots__/HTML-test.js.snap → __tests__/__snapshots__/HTML-test.js.snap b/...__tests__/__snapshots__/HTML-test.js.snap → __tests__/__snapshots__/HTML-test.js.snap
diff --git a/src/__tests__/README.MD b/src/__tests__/README.MD
@@ -0,0 +1,12 @@
+# Tests
+
+## Naming rules
+
+- Test file names end with _test.js_
+- Test file names are prefixed by domains:
+
+| domain     | description                                                                      |
+| ---------- | -------------------------------------------------------------------------------- |
+| w3         | related to w3 standard specifications, such as the CSS and HTML standards        |
+| custom     | related to HTML component customization behavior                                 |
+| regression | related to regressions &mdash; the name should be the issue identifier on Github |
diff --git a/src/__tests__/regression.118.test.js b/src/__tests__/regression.118.test.js
@@ -0,0 +1,14 @@
+import React from "react";
+import HTML from "../index";
+import renderer from "react-test-renderer";
+import { extractTextFromInstance } from "./utils";
+
+describe("HTML component", () => {
+  it("should pass regression #118", () => {
+    const testRenderer = renderer.create(
+      <HTML html="  <div>  foo\n\nbar  baz  </div>" />
+    );
+    const renderedText = extractTextFromInstance(testRenderer.root);
+    expect(renderedText).toEqual("foo bar baz");
+  });
+});
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
@@ -0,0 +1,12 @@
+import { Text } from "react-native";
+
+export 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("");
+}
diff --git a/src/__tests__/w3c.pre.test.js b/src/__tests__/w3c.pre.test.js
@@ -0,0 +1,12 @@
+import React from "react";
+import HTML from "../index";
+import renderer from "react-test-renderer";
+import { extractTextFromInstance } from "./utils";
+
+describe("HTML component regarding <pre> tags behaviors", () => {
+  it("preserves tabs, spaces and line returns", () => {
+    const testRenderer = renderer.create(<HTML html="<pre>\t\n  </pre>" />);
+    const renderedText = extractTextFromInstance(testRenderer.root);
+    expect(renderedText).toEqual("\t\n  ");
+  });
+});
diff --git a/src/__tests__/w3c.whitespace.test.js b/src/__tests__/w3c.whitespace.test.js
@@ -0,0 +1,52 @@
+import React from "react";
+import HTML from "../index";
+import renderer from "react-test-renderer";
+import { extractTextFromInstance } from "./utils";
+
+function testCollapseRuleForCharacter(character, name) {
+    const action = character === ' ' ? 'preserves a space' : `replaces ${name} with a space`
+    it(`collapses whitespaces when first text tag has a trailing ${name} and the second starts with a ${name}`, () => {
+      const testRenderer = renderer.create(
+        <HTML html={`<span>foo${character}</span><span>${character}bar</span>`} />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toEqual("foo bar");
+    });
+    it(`${action} when the first text tag has a trailing ${name} and the second doesn't contain any`, () => {
+      const testRenderer = renderer.create(
+        <HTML html={`<b>bold${character}</b><span>text</span>`} />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toEqual("bold text");
+    });
+    it(`${action} between two inline elements which don't contain ${name}s and are separated with a ${name}`, () => {
+      const testRenderer = renderer.create(
+        <HTML html={`<b>bold</b>${character}<span>text</span>`} />
+      );
+      const renderedText = extractTextFromInstance(testRenderer.root);
+      expect(renderedText).toEqual("bold text");
+    });
+};
+
+/**
+ * This test covers white-space CSS rule, and more precisely, the
+ * normal behavior, i.e.  
+ * 
+ *     white-space: normal;
+ * 
+ * CSS rule, as documented here: https://www.w3.org/TR/css-text-3
+ */  
+describe("HTML component regarding CSS white-space: normal rule", () => {
+  describe("involving spaces", () => {
+    testCollapseRuleForCharacter(' ', 'space');
+  });
+  describe("involving line feeds", () => {
+    testCollapseRuleForCharacter("\n", 'line feed');
+  });
+  describe("involving tabs", () => {
+    testCollapseRuleForCharacter("\t", 'tab');
+  });
+  describe("involving form feeds", () => {
+    testCollapseRuleForCharacter("\f", 'form feed');
+  });
+});