feat(chore): updated version up to angular 13 and nx 13

libs/ng2-file-upload/.eslintrc.json

@@ -1,20 +1,28 @@
 {
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "extends": [
         "plugin:@nrwl/nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      "parserOptions": { "project": ["src/accordion/tsconfig.*?.json"] },
-      "rules": {
-      }
+      "rules": {}
     },
     {
-      "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nrwl/nx/angular-template"
+      ],
       "rules": {}
     }
   ]

libs/ng2-file-upload/file-upload/file-upload.module.ts

@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 
 import { FileDropDirective } from './file-drop.directive';
 import { FileSelectDirective } from './file-select.directive';
+export { FileDropDirective } from './file-drop.directive';
+export { FileSelectDirective } from './file-select.directive';
 
 @NgModule({
   imports: [ CommonModule ],

libs/ng2-file-upload/jest.config.js

@@ -5,22 +5,16 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer',
-        ]
-      }
+
     }
   },
-  transform: {
-    '^.+\\.[tj]sx?$':  'ts-jest'
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/ng2-file-upload',
   snapshotSerializers: [
-    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
-    'jest-preset-angular/build/AngularSnapshotSerializer.js',
-    'jest-preset-angular/build/HTMLCommentSerializer.js',
-  ]
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment'
+  ],
+  transform: { '^.+.(ts|mjs|js|html)$': 'jest-preset-angular' },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
+  moduleFileExtensions: ['mjs', 'ts', 'js', 'html']
 };

libs/ng2-file-upload/testing/spec/file-drop.directive.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { inject, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileUploader } from '../../file-upload/file-uploader.class';
 import { FileUploadModule } from '../../file-upload/file-upload.module';
@@ -28,7 +28,7 @@ describe('Directive: FileDropDirective', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ FileUploadModule ],
-      declarations: [ ContainerComponent ],
+      declarations: [ ContainerComponent, FileDropDirective ],
       providers: [ ContainerComponent ]
     });
   });
@@ -72,19 +72,23 @@ describe('Directive: FileDropDirective', () => {
     const filters = fileDropDirective.getFilters();
 
     // TODO: Update test once implemented
-    expect(filters).toEqual({});
+    expect(filters).toBeFalsy();
   });
 
   it('handles drop event', () => {
-    spyOn(fileDropDirective, 'onDrop');
-
+    //@ts-ignore
+    const drop = jest.spyOn(fileDropDirective, 'onDrop');
     directiveElement.triggerEventHandler('drop', getFakeEventData());
 
-    expect(fileDropDirective.onDrop).toHaveBeenCalled();
+    expect(drop).toHaveBeenCalled();
   });
 
   it('adds file to upload', () => {
-    spyOn(fileDropDirective.uploader, 'addToQueue');
+    let addToQueue;
+    if (fileDropDirective.uploader?.addToQueue) {
+      //@ts-ignore
+      addToQueue = jest.spyOn(fileDropDirective.uploader, 'addToQueue');
+    }
 
     let fileOverData;
     fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
@@ -96,13 +100,14 @@ describe('Directive: FileDropDirective', () => {
 
     const uploadedFiles = getFakeEventData().dataTransfer.files;
 
-    expect(fileDropDirective.uploader.addToQueue).toHaveBeenCalledWith(uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters());
+    expect(addToQueue).toHaveBeenCalledWith(uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters());
     expect(fileOverData).toBeFalsy();
     expect(fileDropData).toEqual(uploadedFiles);
   });
 
   it('handles dragover event', () => {
-    spyOn(fileDropDirective, 'onDragOver');
+    //@ts-ignore
+    jest.spyOn(fileDropDirective, 'onDragOver');
 
     directiveElement.triggerEventHandler('dragover', getFakeEventData());
 
@@ -119,7 +124,8 @@ describe('Directive: FileDropDirective', () => {
   });
 
   it('handles dragleave event', () => {
-    spyOn(fileDropDirective, 'onDragLeave');
+    //@ts-ignore
+    jest.spyOn(fileDropDirective, 'onDragLeave');
 
     directiveElement.triggerEventHandler('dragleave', getFakeEventData());
 

libs/ng2-file-upload/testing/spec/file-select.directive.spec.ts

@@ -72,7 +72,7 @@ describe('Directive: FileSelectDirective', () => {
     const filters = fileSelectDirective.getFilters();
 
     // TODO: Update test once implemented
-    expect(filters).toEqual({});
+    expect(filters).toEqual('');
   });
 
   it('can check if element is empty', () => {
@@ -82,18 +82,22 @@ describe('Directive: FileSelectDirective', () => {
   });
 
   it('can listed on change event', () => {
-    spyOn(fileSelectDirective, 'onChange');
+    //@ts-ignore
+    const change = jest.spyOn(fileSelectDirective, 'onChange');
 
     directiveElement.triggerEventHandler('change', {});
 
-    expect(fileSelectDirective.onChange).toHaveBeenCalled();
+    expect(change).toHaveBeenCalled();
   });
 
   it('handles change event', () => {
-    spyOn(fileSelectDirective.uploader, 'addToQueue');
-
+    let addToQueue;
+    if (fileSelectDirective.uploader?.addToQueue) {
+      //@ts-ignore
+      addToQueue = jest.spyOn(fileSelectDirective.uploader, 'addToQueue');
+    }
     fileSelectDirective.onChange();
 
-    expect(fileSelectDirective.uploader.addToQueue).toHaveBeenCalledWith(directiveElement.nativeElement.files, fileSelectDirective.getOptions(), fileSelectDirective.getFilters());
+    expect(addToQueue).toHaveBeenCalledWith(directiveElement.nativeElement.files, fileSelectDirective.getOptions(), fileSelectDirective.getFilters());
   });
 });

libs/ng2-file-upload/testing/test-setup.ts

@@ -1 +1 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';

libs/ng2-file-upload/tsconfig.json

@@ -25,4 +25,3 @@
     "fullTemplateTypeCheck": true
   }
 }
-

libs/ng2-file-upload/tsconfig.lib.json

@@ -7,7 +7,10 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": [
+      "dom",
+      "es2018"
+    ]
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
@@ -18,6 +21,7 @@
     "**/*.ts"
   ],
   "exclude": [
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "**/*.test.ts"
   ]
 }

libs/ng2-file-upload/tsconfig.lib.prod.json

@@ -1,10 +1,9 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

libs/ng2-file-upload/tsconfig.spec.json

@@ -3,10 +3,17 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node"
+    ]
   },
+  "files": [
+    "testing/test-setup.ts"
+  ],
   "include": [
     "**/*.spec.ts",
+    "**/*.test.ts",
     "**/*.d.ts"
   ]
 }