Skip to content

Commit

Permalink
Update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@msssk
msssk committed Sep 9, 2020
1 parent 0ec6973 commit 234b08c
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 10 deletions.
10 changes: 9 additions & 1 deletion src/file-upload-input/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import i18n from '@dojo/framework/core/middleware/i18n';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { create, tsx } from '@dojo/framework/core/vdom';
import { Button } from '../button';
import { formatAriaProperties } from '../common/util';
import { Label } from '../label';
import theme from '../middleware/theme';
import bundle from './nls/FileUploadInput';
Expand All @@ -28,6 +29,9 @@ export interface FileUploadInputProperties {
/** If `true` file drag-n-drop is allowed. Default is `true` */
allowDnd?: boolean;

/** Custom aria attributes */
aria?: { [key: string]: string | null };

/** The `disabled` attribute of the input */
disabled?: boolean;

Expand Down Expand Up @@ -114,6 +118,7 @@ export const FileUploadInput = factory(function FileUploadInput({
const {
accept,
allowDnd = true,
aria = {},
disabled = false,
labelHidden = false,
multiple = false,
Expand Down Expand Up @@ -160,6 +165,7 @@ export const FileUploadInput = factory(function FileUploadInput({
}

function onChange(event: DojoEvent<HTMLInputElement>) {
console.log('onChange', event);
if (onValue && event.target.files && event.target.files.length) {
onValue(Array.from(event.target.files));
}
Expand All @@ -168,6 +174,8 @@ export const FileUploadInput = factory(function FileUploadInput({
return (
<div
key="root"
{...formatAriaProperties(aria)}
aria-disabled={disabled}
classes={[
theme.variant(),
fixedCss.root,
Expand Down Expand Up @@ -200,7 +208,7 @@ export const FileUploadInput = factory(function FileUploadInput({
<input
key="nativeInput"
accept={accept}
aria="hidden"
aria-hidden={true}
classes={[baseCss.hidden]}
click={function() {
const shouldClick = Boolean(icache.getOrSet('shouldClick', false));
Expand Down
121 changes: 112 additions & 9 deletions src/file-upload-input/tests/unit/FileUploadInput.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { assertion, renderer, wrap } from '@dojo/framework/testing/renderer';
import { Button } from '../../../button';
import { FileUploadInput } from '../../index';
import { Label } from '../../../label';
import { noop } from '../../../common/tests/support/test-helpers';
import { noop, stubEvent } from '../../../common/tests/support/test-helpers';

import bundle from '../../nls/FileUploadInput';
import * as baseCss from '../../../theme/default/base.m.css';
Expand All @@ -13,15 +13,19 @@ import * as fixedCss from '../../styles/file-upload-input.m.css';
import * as labelCss from '../../../theme/default/label.m.css';

const { it, describe } = intern.getInterface('bdd');
const { assert } = intern.getPlugin('chai');
const { messages } = bundle;

describe('FileUploadInput', function() {
const WrappedRoot = wrap('div');
const WrappedWrapper = wrap('div');
const WrappedInput = wrap('input');
const WrappedButton = wrap(Button);
const WrappedLabel = wrap('span');

const baseRootProperties = {
key: 'root',
'aria-disabled': false,
classes: [null, fixedCss.root, css.root, false, false],
ondragenter: noop,
ondragover: noop,
Expand All @@ -32,10 +36,10 @@ describe('FileUploadInput', function() {
return (
<WrappedRoot {...baseRootProperties}>
<WrappedWrapper classes={[css.wrapper]}>
<input
<WrappedInput
key="nativeInput"
accept={undefined}
aria="hidden"
aria-hidden={true}
classes={[baseCss.hidden]}
click={noop}
disabled={false}
Expand All @@ -45,7 +49,7 @@ describe('FileUploadInput', function() {
required={false}
type="file"
/>
<Button
<WrappedButton
disabled={false}
onClick={noop}
theme={{
Expand All @@ -59,7 +63,7 @@ describe('FileUploadInput', function() {
}}
>
{messages.chooseFiles}
</Button>
</WrappedButton>

<WrappedLabel classes={[css.dndLabel]}>{messages.orDropFilesHere}</WrappedLabel>
</WrappedWrapper>
Expand Down Expand Up @@ -149,14 +153,34 @@ describe('FileUploadInput', function() {
);
});

it('renders disabled', function() {
const r = renderer(function() {
return <FileUploadInput disabled={true} />;
});

r.expect(
baseAssertion
.setProperty(WrappedRoot, 'aria-disabled', true)
.setProperty(WrappedRoot, 'classes', [
null,
fixedCss.root,
css.root,
false,
css.disabled
])
.setProperty(WrappedInput, 'disabled', true)
.setProperty(WrappedButton, 'disabled', true)
);
});

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.property(WrappedRoot, 'ondragenter', stubEvent);

r.expect(
baseAssertion
Expand All @@ -178,9 +202,88 @@ describe('FileUploadInput', function() {
})
);

// TODO: enable when testing bug is fixed
// https://github.com/dojo/framework/issues/839
// r.property(WrappedOverlay, 'ondragleave');
// TODO: enable when https://github.com/dojo/framework/pull/840 is merged
// r.property(WrappedOverlay, 'ondragleave', stubEvent);
// r.expect(baseAssertion);
});

it('handles file drop event', function() {
const testValues = [1, 2, 3];
let receivedFiles: number[] = [];

function onValue(value: any[]) {
receivedFiles = value;
}

const r = renderer(function() {
return <FileUploadInput onValue={onValue} />;
});

r.expect(baseAssertion);
r.property(WrappedRoot, 'ondrop', {
preventDefault: noop,
dataTransfer: {
files: testValues
}
});
r.expect(baseAssertion);

assert.sameOrderedMembers(receivedFiles, testValues);
});

it('validates files based on "accept"', function() {
const accept = 'image/jpeg,image/*,.gif';
const testFiles = [
{ name: 'file1.jpg', type: 'image/jpeg' }, // test direct match: image/jpeg
{ name: 'file2.png', type: 'image/png' }, // test wildcard match: image/*
{ name: 'file3.gif', type: 'bad/type' }, // test extension match: .gif
{ name: 'file4.doc', type: 'application/word' } // test match failure
];
const validFiles = testFiles.slice(0, 3);
let receivedFiles: Array<typeof testFiles[0]> = [];

function onValue(value: any[]) {
receivedFiles = value;
}

const r = renderer(function() {
return <FileUploadInput onValue={onValue} accept={accept} />;
});
const acceptAssertion = baseAssertion.setProperty(WrappedInput, 'accept', accept);

r.expect(acceptAssertion);
r.property(WrappedRoot, 'ondrop', {
preventDefault: noop,
dataTransfer: {
files: testFiles
}
});
r.expect(acceptAssertion);

assert.sameOrderedMembers(receivedFiles, validFiles);
});

it('calls onValue when files are selected from input', function() {
const testValues = [1, 2, 3];
let receivedFiles: number[] = [];

function onValue(value: any[]) {
receivedFiles = value;
}

const r = renderer(function() {
return <FileUploadInput onValue={onValue} />;
});

r.expect(baseAssertion);
r.property(WrappedInput, 'onchange', {
target: {
files: testValues
}
});
// TODO: the queued onchange is not triggering because it is for a node with a different id than expected
r.expect(baseAssertion);

assert.sameOrderedMembers(receivedFiles, testValues);
});
});

0 comments on commit 234b08c

Please sign in to comment.