Update tests

Author: msssk

src/file-upload-input/index.tsx

@@ -14,7 +14,10 @@ import * as fixedCss from './styles/file-upload-input.m.css';
 import * as labelCss from '../theme/default/label.m.css';
 
 export interface FileUploadInputChildren {
+	/** The label to be displayed above the input */
 	label?: RenderResult;
+
+	/** Content to be rendered within the widget area */
 	content?: RenderResult;
 }
 
@@ -43,7 +46,7 @@ export interface FileUploadInputProperties {
 	/** The `required` attribute of the input */
 	required?: boolean;
 
-	/** Represents if the input value is valid */
+	/** Represents if the selected files passed validation */
 	valid?: ValidationInfo | boolean;
 
 	/** The id to be applied to the input */
@@ -122,7 +125,7 @@ export const FileUploadInput = factory(function FileUploadInput({
 	} = properties();
 	const { messages } = i18n.localize(bundle);
 	const themeCss = theme.classes(css);
-	const { content = null, label = null } = children()[0] || {};
+	const [{ content, label } = { content: undefined, label: undefined }] = children();
 	let isDndActive = icache.getOrSet('isDndActive', false);
 
 	function onDragEnter(event: DragEvent) {

src/file-upload-input/tests/unit/FileUploadInput.spec.tsx

@@ -17,7 +17,9 @@ const { messages } = bundle;
 
 describe('FileUploadInput', function() {
 	const WrappedRoot = wrap('div');
+	const WrappedWrapper = wrap('div');
 	const WrappedLabel = wrap('span');
+
 	const baseRootProperties = {
 		key: 'root',
 		classes: [null, fixedCss.root, css.root, false, false],
@@ -29,7 +31,7 @@ describe('FileUploadInput', function() {
 	const baseAssertion = assertion(function() {
 		return (
 			<WrappedRoot {...baseRootProperties}>
-				<div classes={[css.wrapper]}>
+				<WrappedWrapper classes={[css.wrapper]}>
 					<input
 						key="nativeInput"
 						accept={undefined}
@@ -60,7 +62,7 @@ describe('FileUploadInput', function() {
 					</Button>
 
 					<WrappedLabel classes={[css.dndLabel]}>{messages.orDropFilesHere}</WrappedLabel>
-				</div>
+				</WrappedWrapper>
 			</WrappedRoot>
 		);
 	});
@@ -73,6 +75,22 @@ describe('FileUploadInput', function() {
 		r.expect(baseAssertion);
 	});
 
+	it('renders content', function() {
+		const content = <div>some content</div>;
+
+		const r = renderer(function() {
+			return (
+				<FileUploadInput>
+					{{
+						content
+					}}
+				</FileUploadInput>
+			);
+		});
+
+		r.expect(baseAssertion.insertAfter(WrappedWrapper, () => [content]));
+	});
+
 	it('renders label', function() {
 		const label = 'Widget label';
 
@@ -130,4 +148,39 @@ describe('FileUploadInput', function() {
 				.remove(WrappedLabel)
 		);
 	});
+
+	it('handles dragenter, dragleave, and the overlay', function() {
+		const r = renderer(function() {
+			return <FileUploadInput />;
+		});
+		const WrappedOverlay = wrap('div');
+
+		r.expect(baseAssertion);
+		r.property(WrappedRoot, 'ondragenter', { preventDefault: noop });
+
+		r.expect(
+			baseAssertion
+				.setProperty(WrappedRoot, 'classes', [
+					null,
+					fixedCss.root,
+					css.root,
+					css.dndActive,
+					false
+				])
+				.append(WrappedRoot, function() {
+					return [
+						<WrappedOverlay
+							key="overlay"
+							classes={[fixedCss.dndOverlay, css.dndOverlay, false]}
+							ondragleave={noop}
+						/>
+					];
+				})
+		);
+
+		// TODO: enable when testing bug is fixed
+		// https://github.com/dojo/framework/issues/839
+		// r.property(WrappedOverlay, 'ondragleave');
+		// r.expect(baseAssertion);
+	});
 });

src/file-uploader/index.tsx

@@ -177,15 +177,17 @@ export const FileUploader = factory(function FileUploader({
 	if (files.length) {
 		inputChild.content = (
 			<div key="fileList">
-				{renderFiles({
-					customValidator,
-					files,
-					maxSize,
-					messages: { messages },
-					remove,
-					showSize,
-					themeCss
-				})}
+				{function() {
+					return renderFiles({
+						customValidator,
+						files,
+						maxSize,
+						messages: { messages },
+						remove,
+						showSize,
+						themeCss
+					});
+				}}
 			</div>
 		);
 	}

src/theme/dojo/file-uploader.m.css.d.ts

@@ -1,5 +1,4 @@
 export const root: string;
-export const dndActive: string;
 export const disabled: string;
 export const fileItem: string;
 export const fileInfo: string;

src/theme/material/file-uploader.m.css.d.ts

@@ -1,5 +1,4 @@
 export const root: string;
-export const dndActive: string;
 export const disabled: string;
 export const fileItem: string;
 export const fileInfo: string;