Fix boolean and property object formatting (#793)

* fix boolean and property object formatting

* fix formatting to be valid

* remove console

Author: agubler

src/testing/assertRender.ts

@@ -42,35 +42,50 @@ function getTagName(node: VNode | WNode): string {
 	return name;
 }
 
-function formatObject(obj: { [index: string]: any }, depth = 0): string {
+function formatObject(obj: { [index: string]: any }, depth = 0, style: 'prop' | 'object'): string {
 	const objectKeys = Object.keys(obj).sort();
 	if (!objectKeys) {
 		return '';
 	}
 	const tabs = getTabs(depth + 1);
+	const sep = style === 'prop' ? '=' : ': ';
+	const opening = style === 'prop' ? '{' : '';
+	const closing = style === 'prop' ? '}' : '';
 	return objectKeys.reduce((props, propKey, index) => {
 		const prop = obj[propKey];
+		propKey = style === 'object' ? `"${propKey}"` : propKey;
 
 		if (index < objectKeys.length) {
 			props = `${props}${LINE_BREAK}${tabs}`;
 		}
-		props = `${props}${propKey}=`;
+		props = `${props}${propKey}${sep}`;
+
 		switch (typeof prop) {
 			case 'function':
-				props = `${props}{function}`;
+				props = `${props}${opening}function${closing}`;
+				break;
+			case 'boolean':
+				props = `${props}${opening}${prop}${closing}`;
 				break;
 			case 'object':
 				const isArrayLike = prop instanceof Set || prop instanceof Map || Array.isArray(prop);
 				if (isArrayLike) {
-					props = `${props}{${JSON.stringify(arrayFrom(prop))}}`;
+					props = `${props}${opening}${JSON.stringify(arrayFrom(prop))}${closing}`;
 				} else {
-					props = `${props}{{${formatObject(prop, depth + 1)}${LINE_BREAK}${tabs}}}`;
+					props = `${props}${opening}{${formatObject(
+						prop,
+						depth + 1,
+						'object'
+					)}${LINE_BREAK}${tabs}}${closing}`;
 				}
 				break;
 			default:
-				props = `${props}{${JSON.stringify(prop)}}`;
+				props = `${props}${opening}${JSON.stringify(prop)}${closing}`;
 				break;
 		}
+		if (style === 'object' && index < objectKeys.length - 1) {
+			props = `${props},`;
+		}
 		return props;
 	}, '');
 }
@@ -95,7 +110,7 @@ function format(nodes: DNode | DNode[], depth = 0): string {
 
 		const propertyKeys = Object.keys(node.properties).sort();
 		if (propertyKeys.length) {
-			str = `${str}${formatObject(node.properties, depth)}`;
+			str = `${str}${formatObject(node.properties, depth, 'prop')}`;
 			str = `${str}${LINE_BREAK}${getTabs(depth)}`;
 		}
 
@@ -124,6 +139,9 @@ function format(nodes: DNode | DNode[], depth = 0): string {
 							str = `${str}${LINE_BREAK}${getTabs(depth + 3)}"child function"`;
 						}
 						str = `${str}${LINE_BREAK}${getTabs(depth + 2)})`;
+						if (j < childrenKeys.length - 1) {
+							str = `${str},`;
+						}
 					}
 					str = `${str}${LINE_BREAK}${getTabs(depth + 1)}}`;
 				}

tests/testing/unit/assertRender.tsx

@@ -15,9 +15,11 @@ class MockWidget extends Themed(WidgetBase) {
 	}
 }
 
-const WidgetWithNamedChildren = create().children<{ content: RenderResult }>()(function WidgetWithNamedChildren() {
-	return '';
-});
+const WidgetWithNamedChildren = create().children<{ content: RenderResult; other: RenderResult }>()(
+	function WidgetWithNamedChildren() {
+		return '';
+	}
+);
 
 class OtherWidget extends WidgetBase {
 	render() {
@@ -49,6 +51,7 @@ function getExpectedError() {
 	return `
 <div
 (A)	classes={["one","two","three"]}
+(A)	disabled={false}
 (E)	classes={"other"}
 	extras={"foo"}
 (A)	func={function}
@@ -65,14 +68,15 @@ function getExpectedError() {
 	</span>
 (A)	<${mockWidgetName}
 (A)		classes={{
-(A)			widget/Widget={{
-(A)				root={["class"]}
-(A)			}}
+(A)			"widget/Widget": {
+(A)				"root": ["class"]
+(A)			}
 (A)		}}
 (A)		theme={{
-(A)			widget/Widget={{
-(A)				root={"theme-class"}
-(A)			}}
+(A)			"widget/Widget": {
+(A)				"other": "root-other",
+(A)				"root": "theme-class"
+(A)			}
 (A)		}}
 (A)	>
 (A)	</${mockWidgetName}>
@@ -84,6 +88,13 @@ function getExpectedError() {
 (A)						Child
 (A)					</span>
 (A)				</div>
+(A)			),
+(A)			other: (
+(A)				<div>
+(A)					<span>
+(A)						Other
+(A)					</span>
+(A)				</div>
 (A)			)
 (A)		}
 (A)	</${widgetWithChildrenName}>
@@ -94,17 +105,23 @@ describe('new/assertRender', () => {
 	it('should create an informative error message', () => {
 		try {
 			assertRender(
-				v('div', { extras: 'foo', key: 'two', classes: ['one', 'two', 'three'], func: () => {} }, [
-					v('span', ['text node', 'other']),
-					v('span'),
-					'text node',
-					v('span'),
-					w(MockWidget, {
-						theme: { 'widget/Widget': { root: 'theme-class' } },
-						classes: { 'widget/Widget': { root: ['class'] } }
-					}),
-					w(WidgetWithNamedChildren, {}, [{ content: v('div', [v('span', ['Child'])]) }])
-				]),
+				v(
+					'div',
+					{ extras: 'foo', key: 'two', disabled: false, classes: ['one', 'two', 'three'], func: () => {} },
+					[
+						v('span', ['text node', 'other']),
+						v('span'),
+						'text node',
+						v('span'),
+						w(MockWidget, {
+							theme: { 'widget/Widget': { root: 'theme-class', other: 'root-other' } },
+							classes: { 'widget/Widget': { root: ['class'] } }
+						}),
+						w(WidgetWithNamedChildren, {}, [
+							{ content: v('div', [v('span', ['Child'])]), other: v('div', [v('span', ['Other'])]) }
+						])
+					]
+				),
 				v('div', { extras: 'foo', key: 'two', classes: 'other' }, [
 					v('span', ['text node', 'other']),
 					v('span'),