FileUploader: update tests

Author: msssk

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

@@ -119,30 +119,32 @@ describe('FileUploadInput', function() {
 		});
 
 		r.expect(
-			baseAssertion.prepend(WrappedRoot, () => [
-				<Label
-					disabled={false}
-					forId={'file-upload-input-test'}
-					hidden={false}
-					required={false}
-					theme={{
-						'@dojo/widgets/label': {
-							active: labelCss.active,
-							disabled: labelCss.disabled,
-							focused: labelCss.focused,
-							invalid: labelCss.invalid,
-							readonly: labelCss.readonly,
-							required: labelCss.required,
-							root: labelCss.root,
-							secondary: labelCss.secondary,
-							valid: labelCss.valid
-						}
-					}}
-					valid={true}
-				>
-					{label}
-				</Label>
-			])
+			baseAssertion.prepend(WrappedRoot, function() {
+				return [
+					<Label
+						disabled={false}
+						forId="file-upload-input-test"
+						hidden={false}
+						required={false}
+						theme={{
+							'@dojo/widgets/label': {
+								active: labelCss.active,
+								disabled: labelCss.disabled,
+								focused: labelCss.focused,
+								invalid: labelCss.invalid,
+								readonly: labelCss.readonly,
+								required: labelCss.required,
+								root: labelCss.root,
+								secondary: labelCss.secondary,
+								valid: labelCss.valid
+							}
+						}}
+						valid={true}
+					>
+						{label}
+					</Label>
+				];
+			})
 		);
 	});
 

src/file-uploader/tests/unit/FileUploader.spec.tsx

@@ -3,6 +3,7 @@ import { assertion, renderer, wrap } from '@dojo/framework/testing/renderer';
 import { noop } from '@dojo/widgets/common/tests/support/test-helpers';
 import FileUploader from '../../index';
 import FileUploadInput from '../../../file-upload-input';
+import Icon from '../../../icon';
 
 import * as css from '../../../theme/default/file-uploader.m.css';
 import * as fileUploadInputCss from '../../../theme/default/file-upload-input.m.css';
@@ -57,4 +58,104 @@ describe('FileUploader', function() {
 
 		r.expect(baseAssertion);
 	});
+
+	it('sets props on FileUploadInput', function() {
+		const passthruProps = {
+			accept: 'accept',
+			allowDnd: false,
+			disabled: true,
+			multiple: true,
+			name: 'name',
+			required: true
+		};
+		const expectedRootClasses = [...baseRootProperties.classes];
+		expectedRootClasses.splice(3, 1, css.disabled);
+
+		const r = renderer(function() {
+			return <FileUploader {...passthruProps} onValue={noop} />;
+		});
+
+		r.expect(
+			baseAssertion
+				.setProperty(WrappedRoot, 'classes', expectedRootClasses)
+				.setProperties(WrappedFileUploadInput, {
+					...baseInputProperties,
+					...passthruProps,
+					onValue: noop
+				})
+		);
+	});
+
+	it('renders label', function() {
+		const label = 'Widget label';
+
+		const r = renderer(function() {
+			return (
+				<FileUploader onValue={noop}>
+					{{
+						label
+					}}
+				</FileUploader>
+			);
+		});
+
+		r.expect(baseAssertion.setChildren(WrappedFileUploadInput, () => [{ label, content: '' }]));
+	});
+
+	it('renders files', function() {
+		const files = [
+			{
+				name: 'file1.jpg',
+				size: 55383,
+				formattedSize: '54.08 KB',
+				type: 'image/jpeg'
+			},
+			{
+				name: 'file2.png',
+				size: 180240,
+				formattedSize: '176.02 KB',
+				type: 'image/png',
+				valid: false,
+				message: 'File is too big'
+			},
+			{
+				name: 'file3.png',
+				size: 4001220,
+				formattedSize: '3.82 MB',
+				type: 'image/png',
+				valid: true,
+				message: 'File is great'
+			}
+		];
+
+		const r = renderer(function() {
+			return <FileUploader files={files as any} onValue={noop} />;
+		});
+
+		const content = (
+			<div key="fileList">
+				{files.map(function(file) {
+					return (
+						<div
+							classes={[css.fileItem, file.valid === false ? css.invalid : false]}
+							key={file.name}
+						>
+							<div classes={[css.fileInfo]}>
+								<div classes={[css.fileItemName]}>{file.name}</div>
+								<div classes={[css.fileItemSize]}>{file.formattedSize}</div>
+								<button onclick={noop} classes={[css.closeButton]}>
+									<Icon altText="Remove" type="closeIcon" />
+								</button>
+							</div>
+							{file.message && (
+								<div classes={[css.validationMessage]}>{file.message}</div>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		);
+
+		r.expect(baseAssertion.setChildren(WrappedFileUploadInput, () => [{ content }]));
+	});
 });

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

@@ -5,3 +5,4 @@ export const fileInfo: string;
 export const fileItemName: string;
 export const closeButton: string;
 export const validationMessage: string;
+export const invalid: string;

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

@@ -5,3 +5,4 @@ export const fileInfo: string;
 export const fileItemName: string;
 export const closeButton: string;
 export const validationMessage: string;
+export const invalid: string;