Tests WIP

overlookmotel · Jan 25, 2019 · 05b77d1 · 05b77d1
1 parent 6c36eee
commit 05b77d1
Show file tree

Hide file tree

Showing 4 changed files with 408 additions and 24 deletions.
diff --git a/src/test/all.test.js b/src/test/all.test.js
diff --git a/src/test/noSuspense.test.js b/src/test/noSuspense.test.js
@@ -0,0 +1,98 @@
+/* --------------------
+ * react-async-ssr module
+ * Tests
+ * ------------------*/
+
+'use strict';
+/* eslint-disable react/display-name */
+
+// Modules
+const React = require('react');
+
+// Imports
+const {makeTests} = require('./utils');
+
+// Tests
+
+describe('Without Suspense', function() {
+	describe('plain', function() {
+		describe('string', makeTests(
+			() => 'text',
+			'text'
+		));
+
+		describe('div', makeTests(
+			() => <div>text</div>,
+			({openTag}) => `<div${openTag}>text</div>`
+		));
+
+		describe('nested divs', makeTests(
+			() => <div><div>text</div></div>,
+			({openTag}) => `<div${openTag}><div>text</div></div>`
+		));
+	});
+
+	describe('in function component', function() {
+		describe('string', makeTests(
+			() => {
+				const Comp = () => 'text';
+				return <Comp/>;
+			},
+			'text'
+		));
+
+		describe('div', makeTests(
+			() => {
+				const Comp = () => <div>text</div>;
+				return <Comp/>;
+			},
+			({openTag}) => `<div${openTag}>text</div>`
+		));
+
+		describe('nested divs', makeTests(
+			() => {
+				const Comp = () => <div><div>text</div></div>;
+				return <Comp/>;
+			},
+			({openTag}) => `<div${openTag}><div>text</div></div>`
+		));
+	});
+
+	describe('in class component', function() {
+		describe('string', makeTests(
+			() => {
+				class Comp extends React.Component {
+					render() {
+						return 'text';
+					}
+				}
+				return <Comp/>;
+			},
+			'text'
+		));
+
+		describe('div', makeTests(
+			() => {
+				class Comp extends React.Component {
+					render() {
+						return <div>text</div>;
+					}
+				}
+				return <Comp/>;
+			},
+			({openTag}) => `<div${openTag}>text</div>`
+		));
+
+		describe('nested divs', makeTests(
+			() => {
+				class Comp extends React.Component {
+					render() {
+						return <div><div>text</div></div>;
+					}
+				}
+				return <Comp/>;
+			},
+			({openTag}) => `<div${openTag}><div>text</div></div>`
+		));
+	});
+});
diff --git a/src/test/suspenseSpacing.test.js b/src/test/suspenseSpacing.test.js
@@ -0,0 +1,240 @@
+/* --------------------
+ * react-async-ssr module
+ * Tests
+ * ------------------*/
+
+'use strict';
+/* eslint-disable react/display-name */
+
+// Modules
+const React = require('react');
+
+// Imports
+const {makeTests} = require('./utils');
+
+// Tests
+
+describe('Suspense spaces correctly', function() {
+	describe('with string inside Suspense', function() {
+		describe('only', makeTests(
+			({Suspense}) => <Suspense>Inside</Suspense>,
+			'Inside'
+		));
+
+		describe('and string(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense>Inside</Suspense>
+					</div>
+				),
+				'<div data-reactroot="">Before<!-- -->Inside</div>',
+				'<div>BeforeInside</div>'
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense>Inside</Suspense>
+						After
+					</div>
+				),
+				'<div data-reactroot="">Inside<!-- -->After</div>',
+				'<div>InsideAfter</div>'
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense>Inside</Suspense>
+						After
+					</div>
+				),
+				'<div data-reactroot="">Before<!-- -->Inside<!-- -->After</div>',
+				'<div>BeforeInsideAfter</div>'
+			));
+		});
+
+		describe('and div(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense>Inside</Suspense>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div>Inside</div>`
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense>Inside</Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}>Inside<div>After</div></div>`
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense>Inside</Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div>Inside<div>After</div></div>`
+			));
+		});
+	});
+
+	describe('with empty inside Suspense', function() {
+		describe('only', makeTests(
+			({Suspense}) => <Suspense></Suspense>,
+			''
+		));
+
+		describe('and string(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense></Suspense>
+					</div>
+				),
+				({openTag}) => `<div${openTag}>Before</div>`
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense></Suspense>
+						After
+					</div>
+				),
+				({openTag}) => `<div${openTag}>After</div>`
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense></Suspense>
+						After
+					</div>
+				),
+				'<div data-reactroot="">Before<!-- -->After</div>',
+				'<div>BeforeAfter</div>'
+			));
+		});
+
+		describe('and div(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense></Suspense>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div></div>`
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense></Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>After</div></div>`
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense></Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div><div>After</div></div>`
+			));
+		});
+	});
+
+	describe('with div inside Suspense', function() {
+		describe('only', makeTests(
+			({Suspense}) => <Suspense><div>Inside</div></Suspense>,
+			({openTag}) => `<div${openTag}>Inside</div>`
+		));
+
+		describe('and string(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense><div>Inside</div></Suspense>
+					</div>
+				),
+				({openTag}) => `<div${openTag}>Before<div>Inside</div></div>`
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense><div>Inside</div></Suspense>
+						After
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Inside</div>After</div>`
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						Before
+						<Suspense><div>Inside</div></Suspense>
+						After
+					</div>
+				),
+				({openTag}) => `<div${openTag}>Before<div>Inside</div>After</div>`
+			));
+		});
+
+		describe('and div(s)', function() {
+			describe('before', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense><div>Inside</div></Suspense>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div><div>Inside</div></div>`
+			));
+
+			describe('after', makeTests(
+				({Suspense}) => (
+					<div>
+						<Suspense><div>Inside</div></Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Inside</div><div>After</div></div>`
+			));
+
+			describe('before and after', makeTests(
+				({Suspense}) => (
+					<div>
+						<div>Before</div>
+						<Suspense><div>Inside</div></Suspense>
+						<div>After</div>
+					</div>
+				),
+				({openTag}) => `<div${openTag}><div>Before</div><div>Inside</div><div>After</div></div>`
+			));
+		});
+	});
+});