Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Fixed file attachments component in IE11 #1179

Merged
merged 3 commits into from
Oct 6, 2017
Merged

Fixed file attachments component in IE11 #1179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
435f7c9
Fixed file drop component in ie11
Blackbaud-SteveBrush Oct 6, 2017
41bb180
Fixed linting error
Blackbaud-SteveBrush Oct 6, 2017
ac2616b
Merge branch 'master' into fix-ie11-filedrop
Blackbaud-SteveBrush Oct 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 113 additions & 80 deletions src/modules/fileattachments/file-drop.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,10 @@ describe('File drop component', () => {

if (fileReaderSpy.loadCallbacks[0]) {
fileReaderSpy.loadCallbacks[0]({
target: {
result: 'url'
}
});
target: {
result: 'url'
}
});
}

if (fileReaderSpy.loadCallbacks[1]) {
Expand Down Expand Up @@ -363,7 +363,7 @@ describe('File drop component', () => {

componentInstance.validateFn = function(file: any) {
if (file.file.name.indexOf('w') === 0) {
return errorMessage;
return errorMessage;
}
};

Expand Down Expand Up @@ -407,7 +407,7 @@ describe('File drop component', () => {
expect(filesChangedActual.files[0].file.size).toBe(1000);
});

it('should reject a file with no type when accepted types are defined', () => {
it('should reject a file with no type when accepted types are defined', () => {
let filesChangedActual: SkyFileDropChange;

componentInstance.filesChanged.subscribe(
Expand All @@ -418,16 +418,16 @@ describe('File drop component', () => {
fixture.detectChanges();

let files = [
{
name: 'foo.txt',
size: 1000
},
{
name: 'woo.txt',
size: 2000,
type: 'image/jpeg'
}
];
{
name: 'foo.txt',
size: 1000
},
{
name: 'woo.txt',
size: 2000,
type: 'image/jpeg'
}
];

setupStandardFileChangeEvent(files);

Expand Down Expand Up @@ -493,6 +493,7 @@ describe('File drop component', () => {

let dragOverEvent = {
dataTransfer: {
files: {} as any,
items: files
},
stopPropagation: function () {
Expand All @@ -516,14 +517,13 @@ describe('File drop component', () => {

let dropEvent = {
dataTransfer: {
files:
{
length: fileLength,
item: function (index: number) {
return files[index];
}
},
items: files
files: {
length: fileLength,
item: function (index: number) {
return files[index];
}
},
items: files
},
stopPropagation: function () {
dropPropStopped = true;
Expand Down Expand Up @@ -564,20 +564,20 @@ describe('File drop component', () => {
let dropDebugEl = getDropDebugEl();

let files = [
{
name: 'foo.txt',
size: 1000,
type: 'image/png'
}
];
{
name: 'foo.txt',
size: 1000,
type: 'image/png'
}
];

let invalidFiles = [
{
name: 'foo.txt',
size: 1000,
type: 'image/jpeg'
}
];
{
name: 'foo.txt',
size: 1000,
type: 'image/jpeg'
}
];

triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(files, dropDebugEl);
Expand All @@ -588,6 +588,7 @@ describe('File drop component', () => {
triggerDrop(files, dropDebugEl);

validateDropClasses(false, false, dropElWrapper);

fileReaderSpy.loadCallbacks[0]({
target: {
result: 'url'
Expand All @@ -597,7 +598,6 @@ describe('File drop component', () => {
fixture.detectChanges();

expect(filesChangedActual.rejectedFiles.length).toBe(0);

expect(filesChangedActual.files.length).toBe(1);
expect(filesChangedActual.files[0].url).toBe('url');
expect(filesChangedActual.files[0].file.name).toBe('foo.txt');
Expand All @@ -618,7 +618,7 @@ describe('File drop component', () => {
validateDropClasses(false, false, dropElWrapper);

let emptyEvent = {
stopPropagation: function (){},
stopPropagation: function () {},
preventDefault: function () {}
};

Expand All @@ -635,66 +635,99 @@ describe('File drop component', () => {

});

it([
'should accept a file of rejected type on drag (but not on drop)',
'if the browser does not support dataTransfer.items'
].join(' '), () => {
let filesChangedActual: SkyFileDropChange;

componentInstance.filesChanged.subscribe(
(filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );

componentInstance.acceptedTypes = 'image/png, image/tiff';

fixture.detectChanges();

let dropDebugEl = getDropDebugEl();

let invalidFiles = [
{
name: 'foo.txt',
size: 1000,
type: 'image/jpeg'
}
];

let dropElWrapper = getDropElWrapper();

triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(undefined, dropDebugEl);
validateDropClasses(true, false, dropElWrapper);

triggerDrop(invalidFiles, dropDebugEl);
validateDropClasses(false, false, dropElWrapper);
});

it('should prevent loading multiple files on drag and drop when multiple is false', () => {
let files = [
{
name: 'foo.txt',
size: 1000,
type: 'image/png'
},
{
name: 'goo.txt',
size: 1000,
type: 'image/png'
}
];
{
name: 'foo.txt',
size: 1000,
type: 'image/png'
},
{
name: 'goo.txt',
size: 1000,
type: 'image/png'
}
];

let filesChangedActual: SkyFileDropChange;
let filesChangedActual: SkyFileDropChange;

componentInstance.filesChanged.subscribe(
(filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );
componentInstance.filesChanged.subscribe(
(filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );

let fileReaderSpy = setupFileReaderSpy();
let fileReaderSpy = setupFileReaderSpy();

componentInstance.multiple = false;
fixture.detectChanges();
componentInstance.multiple = false;
fixture.detectChanges();

let dropDebugEl = getDropDebugEl();
let dropDebugEl = getDropDebugEl();

triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(files, dropDebugEl);
triggerDrop(files, dropDebugEl);
expect(fileReaderSpy.loadCallbacks.length).toBe(0);
triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(files, dropDebugEl);
triggerDrop(files, dropDebugEl);
expect(fileReaderSpy.loadCallbacks.length).toBe(0);
});

it('should prevent loading directories on drag and drop', () => {
let files = [
{
name: 'foo.txt',
size: 1000,
type: 'image/png',
webkitGetAsEntry: function () {
return {
isDirectory: true
};
}
{
name: 'foo.txt',
size: 1000,
type: 'image/png',
webkitGetAsEntry: function () {
return {
isDirectory: true
};
}
];
}
];

let filesChangedActual: SkyFileDropChange;
let filesChangedActual: SkyFileDropChange;

componentInstance.filesChanged.subscribe(
(filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );
componentInstance.filesChanged.subscribe(
(filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );

let fileReaderSpy = setupFileReaderSpy();
fixture.detectChanges();
let fileReaderSpy = setupFileReaderSpy();
fixture.detectChanges();

let dropDebugEl = getDropDebugEl();
let dropDebugEl = getDropDebugEl();

triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(files, dropDebugEl);
triggerDrop(files, dropDebugEl);
expect(fileReaderSpy.loadCallbacks.length).toBe(0);
triggerDragEnter('sky-drop', dropDebugEl);
triggerDragOver(files, dropDebugEl);
triggerDrop(files, dropDebugEl);
expect(fileReaderSpy.loadCallbacks.length).toBe(0);
});

it('should show link section when allowLinks is true', () => {
Expand Down
Loading