* feat(input-file): create input-file component
* chore: improvements after review
* chore: update after review
* chore: update translations
* chore: - fixed demo with form submit, submit was not prevented
- fixed checking allowed file extensions
- fixed clicking on select file button in drag and drop area
* chore: since the input-file does not upload files itself but enables user to select files, I replaced "upload" and "upload" with "select" and "selected" where applicable
* chore: - removed unused properties allowedFileTypes and allowedFileExtensions from lion-input-file
- cleaned up docs
* chore: - changed type Array.<type> to Array<type>
- removed redundant type definition
* fix: - FocusMixin: moved registering events for from connectedCallback to firstUpdated since _focusableNode is sometimes not available yet
- SlotMixin: changed updated to update in since slots were rendered too late (related to previous fix in FocusMixin.js)
* fix: renamed lion-uploaded-file-list.js to lion-selected-file-list.js
* fix: fixed test for lion-selected-file-list
* fix: fixed typ
* wip
* fix: - fixed issue with multiple file selection where element would not select valid files after invalid ones
- added getMessage method to FileValidation that returns empty string to prevent message being shown that error message must be configured
- fixed tests
* chore: replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.
* fix: - replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.
- fixed issue where a valid file was not selected and added to the file list if it was preceded by an invalid file
* chore: removed redundant README.md
* fix: fixed failing test
* chore: added missing type annotation
* chore: annotated event param as optional
---------
Co-authored-by: Danny Moerkerke <danny.moerkerke@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
170 lines
5.5 KiB
JavaScript
170 lines
5.5 KiB
JavaScript
import { expect } from '@open-wc/testing';
|
|
import { IsAcceptedFile } from '../src/validators.js';
|
|
|
|
describe('lion-input-file: IsAcceptedFile', () => {
|
|
describe('valid file type', () => {
|
|
it('should return false for allowed file extension .csv', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ name: 'foo.csv' }], {
|
|
allowedFileExtensions: ['.csv'],
|
|
allowedFileTypes: undefined,
|
|
});
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return false for allowed file extension .csv and .pdf', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ name: 'foo.pdf' }], {
|
|
allowedFileExtensions: ['.csv', '.pdf'],
|
|
allowedFileTypes: undefined,
|
|
});
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return true for not allowed file extension .csv and .pdf', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ name: 'foo.pdf' }], {
|
|
allowedFileExtensions: ['.txt'],
|
|
allowedFileTypes: undefined,
|
|
});
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
|
|
it('should return false for valid file type for single file', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'foo' }], {
|
|
allowedFileTypes: ['foo'],
|
|
});
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return false for valid file type for multiple file', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'foo' }], {
|
|
allowedFileTypes: ['foo'],
|
|
});
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return false if no file types are defined, and has small file size', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
const returnVal = fileTypeObj.execute(
|
|
[
|
|
// @ts-ignore ignore file typing
|
|
{ type: 'foo', size: 1 },
|
|
// @ts-ignore ignore file typing
|
|
{ type: 'foo', size: 1 },
|
|
],
|
|
{
|
|
allowedFileTypes: [],
|
|
maxFileSize: 1028,
|
|
},
|
|
);
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return false for valid file type for multiple file and multiple allowed types', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'bar' }], {
|
|
allowedFileTypes: ['foo', 'bar'],
|
|
});
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
});
|
|
|
|
describe('invalid file type', () => {
|
|
it('should return true for invalid file type for single file', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'bar' }], {
|
|
allowedFileTypes: ['foo'],
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
|
|
it('should return false for invalid file type for multiple file', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'bar' }], {
|
|
allowedFileTypes: ['foo'],
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
|
|
it('should return false for invalid file type for multiple file and multiple allowed types', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'pdf' }], {
|
|
allowedFileTypes: ['foo', 'bar'],
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
|
|
it('should return true for invalid file type for empty type', async () => {
|
|
const fileTypeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileTypeObj.execute([{ type: '' }], {
|
|
allowedFileTypes: ['foo'],
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
});
|
|
|
|
describe('valid file size', () => {
|
|
it('should return false for valid file size for single file', async () => {
|
|
const fileSizeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileSizeObj.execute([{ size: 5 }], {
|
|
maxFileSize: 10,
|
|
});
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
|
|
it('should return false for valid file size for multiple file', async () => {
|
|
const fileSizeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileSizeObj.execute([{ size: 5 }, { size: 9 }], {
|
|
maxFileSize: 10,
|
|
});
|
|
|
|
expect(returnVal).to.be.false;
|
|
});
|
|
});
|
|
|
|
describe('invalid file size', () => {
|
|
it('should return true for invalid file size for single file', async () => {
|
|
const fileSizeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileSizeObj.execute([{ size: 5 }], {
|
|
maxFileSize: 3,
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
|
|
it('should return false for invalid file size for multiple file', async () => {
|
|
const fileSizeObj = new IsAcceptedFile();
|
|
// @ts-ignore ignore file typing
|
|
const returnVal = fileSizeObj.execute([{ size: 5 }, { size: 9 }], {
|
|
maxFileSize: 7,
|
|
});
|
|
|
|
expect(returnVal).to.be.true;
|
|
});
|
|
});
|
|
});
|