Reorganize and add new tests

Author: developit

packages/babel-plugin-transform-jsx-to-tagged-templates/src/index.mjs

@@ -89,7 +89,8 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 			for (let i = 0; i < node.children.length; i++) {
 				let child = node.children[i];
 				if (t.isJSXText(child)) {
-					raw(child.value);
+					// @todo - expose `whitespace: true` option?
+					raw(child.value.trim());
 				}
 				else {
 					if (t.isJSXExpressionContainer(child)) {

packages/babel-plugin-transform-jsx-to-tagged-templates/test/index.test.js

@@ -1,111 +1,106 @@
 import { transform } from '@babel/core';
 import transformJsxToTaggedTemplatesPlugin from '../src/index.mjs';
 
+function compile(code, { plugins = [], ...options } = {}) {
+	return transform(code, {
+		babelrc: false,
+		plugins: [
+			...plugins,
+			[transformJsxToTaggedTemplatesPlugin, options]
+		]
+	}).code;
+}
+
 describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
-	test('basic transformation', () => {
-		expect(
-			transform('(<div />);', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('html`<div/>`;');
+	describe('elements and text', () => {
+		test('single named element', () => {
+			expect(
+				compile('(<div />);')
+			).toBe('html`<div/>`;');
+
+			expect(
+				compile('(<div>a</div>);')
+			).toBe('html`<div>a</div>`;');
+		});
 
-		expect(
-			transform('(<span>a</span>);', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('html`<span>a</span>`;');
+		test('single component element', () => {
+			expect(
+				compile('(<Foo />);')
+			).toBe('html`<${Foo}/>`;');
 
-		expect(
-			transform('(<div>hello</div>);', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('html`<div>hello</div>`;');
+			expect(
+				compile('(<Foo>a</Foo>);')
+			).toBe('html`<${Foo}>a</${Foo}>`;');
+		});
 	});
 
-	test('nested children transformation', () => {
-		expect(
-			transform('const Foo = () => <div class="foo" draggable>\n  <h1>Hello</h1>\n  <p>world.</p>\n</div>;', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('const Foo = () => html`<div class="foo" draggable>\n  <h1>Hello</h1>\n  <p>world.</p>\n</div>`;');
+	describe('options.html = true', () => {
+		test('use explicit end tags instead of self-closing', () => {
+			expect(
+				compile('(<div />);', { html: true })
+			).toBe('html`<div></div>`;');
+
+			expect(
+				compile('(<div a />);', { html: true })
+			).toBe('html`<div a></div>`;');
+
+			expect(
+				compile('(<a>b</a>);', { html: true })
+			).toBe('html`<a>b</a>`;');
+		});
 	});
 
 	describe('props', () => {
 		test('static values', () => {
 			expect(
-				transform('(<div a="a" b="bb" c d />);', {
-					babelrc: false,
-					plugins: [
-						transformJsxToTaggedTemplatesPlugin
-					]
-				}).code
+				compile('(<div a="a" b="bb" c d />);')
 			).toBe('html`<div a="a" b="bb" c d/>`;');
 		});
 
 		test('expression values', () => {
 			expect(
-				transform('const Foo = (props, a) => <div a={a} b={"b"} c={{}} d={props.d} e />;', {
-					babelrc: false,
-					plugins: [
-						transformJsxToTaggedTemplatesPlugin
-					]
-				}).code
+				compile('const Foo = (props, a) => <div a={a} b={"b"} c={{}} d={props.d} e />;')
 			).toBe('const Foo = (props, a) => html`<div a=${a} b=${"b"} c=${{}} d=${props.d} e/>`;');
 		});
 	});
 
-	test('whitespace', () => {
-		expect(
-			transform('const Foo = props => <div a b> a <em> b </em> c <strong> d </strong> e </div>;', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('const Foo = props => html`<div a b> a <em> b </em> c <strong> d </strong> e </div>`;');
-	});
+	describe('nesting', () => {
+		test('element children are merged into one template', () => {
+			expect(
+				compile('const Foo = () => <div class="foo" draggable>\n  <h1>Hello</h1>\n  <p>world.</p>\n</div>;')
+			).toBe('const Foo = () => html`<div class="foo" draggable><h1>Hello</h1><p>world.</p></div>`;');
+		});
 
-	test('nested templates', () => {
-		expect(
-			transform('const Foo = props => <ul>{props.items.map(item =>\n  <li>\n    {item}\n  </li>\n)}</ul>;', {
-				babelrc: false,
-				plugins: [
-					transformJsxToTaggedTemplatesPlugin
-				]
-			}).code
-		).toBe('const Foo = props => html`<ul>${props.items.map(item => html`<li>\n    ${item}\n  </li>`)}</ul>`;');
+		test('inter-element whitespace is collapsed', () => {
+			expect(
+				compile('const Foo = props => <div a b> a <em> b </em> c <strong> d </strong> e </div>;')
+			).toBe('const Foo = props => html`<div a b>a<em>b</em>c<strong>d</strong>e</div>`;');
+		});
+
+		test('nested JSX Expressions produce nested templates', () => {
+			expect(
+				compile('const Foo = props => <ul>{props.items.map(item =>\n  <li>\n    {item}\n  </li>\n)}</ul>;')
+			).toBe('const Foo = props => html`<ul>${props.items.map(item => html`<li>${item}</li>`)}</ul>`;');
+		});
 	});
 
-	test('integration with babel-plugin-jsx-pragmatic', () => {
-		expect(
-			transform('const Foo = props => <div>hello</div>;', {
-				babelrc: false,
-				plugins: [
-					['babel-plugin-jsx-pragmatic', {
-						// module to import:
-						module: 'lit-html',
-						// the name of the export to use:
-						export: 'html',
-						// whatever you specified for the "tag" option:
-						import: '$$html'
-					}],
-					[transformJsxToTaggedTemplatesPlugin, {
-						tag: '$$html'
-					}]
-				]
-			}).code
-		).toBe('import { html as $$html } from "lit-html";\n\nconst Foo = props => $$html`<div>hello</div>`;');
+	describe('integration with babel-plugin-jsx-pragmatic', () => {
+		test('JSX is still identified and import added', () => {
+			expect(
+				compile('const Foo = props => <div>hello</div>;', {
+					tag: '$$html',
+					plugins: [
+						['babel-plugin-jsx-pragmatic', {
+							// module to import:
+							module: 'lit-html',
+							// the name of the export to use:
+							export: 'html',
+							// whatever you specified for the "tag" option:
+							import: '$$html'
+						}]
+					]
+				})
+			).toBe('import { html as $$html } from "lit-html";\n\nconst Foo = props => $$html`<div>hello</div>`;');
+		});
 	});
 });