upgrade dependencies (migrate to Angular 10)

7 files changed, 74 insertions, 9 deletions

diff --git a/ui/src/app/app.component.spec.ts b/ui/src/app/app.component.spec.ts
new file mode 100644
index 0000000..20b0ed6
--- /dev/null
+++ b/ui/src/app/app.component.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'metube'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('metube');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('metube app is running!');
+  });
+});
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 7a18d28..8202b4d 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -21,12 +21,12 @@ export class AppComponent implements AfterViewInit {
   quality: string = "best";
   addInProgress = false;
   
-  @ViewChild('queueMasterCheckbox', {static: false}) queueMasterCheckbox: MasterCheckboxComponent;
-  @ViewChild('queueDelSelected', {static: false}) queueDelSelected: ElementRef;
-  @ViewChild('doneMasterCheckbox', {static: false}) doneMasterCheckbox: MasterCheckboxComponent;
-  @ViewChild('doneDelSelected', {static: false}) doneDelSelected: ElementRef;
-  @ViewChild('doneClearCompleted', {static: false}) doneClearCompleted: ElementRef;
-  @ViewChild('doneClearFailed', {static: false}) doneClearFailed: ElementRef;
+  @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
+  @ViewChild('queueDelSelected') queueDelSelected: ElementRef;
+  @ViewChild('doneMasterCheckbox') doneMasterCheckbox: MasterCheckboxComponent;
+  @ViewChild('doneDelSelected') doneDelSelected: ElementRef;
+  @ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
+  @ViewChild('doneClearFailed') doneClearFailed: ElementRef;
 
   faTrashAlt = faTrashAlt;
   faCheckCircle = faCheckCircle;
diff --git a/ui/src/app/master-checkbox.component.ts b/ui/src/app/master-checkbox.component.ts
index 683ea71..8c8208a 100644
--- a/ui/src/app/master-checkbox.component.ts
+++ b/ui/src/app/master-checkbox.component.ts
@@ -18,7 +18,7 @@ export class MasterCheckboxComponent {
   @Input() list: Map<String, Checkable>;
   @Output() changed = new EventEmitter<number>();
 
-  @ViewChild('masterCheckbox', {static: false}) masterCheckbox: ElementRef;
+  @ViewChild('masterCheckbox') masterCheckbox: ElementRef;
   selected: boolean;
 
   clicked() {
diff --git a/ui/src/favicon.ico b/ui/src/favicon.ico
new file mode 100644
index 0000000..997406a
--- /dev/null
+++ b/ui/src/favicon.ico
diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts
index aa665d6..5366a93 100644
--- a/ui/src/polyfills.ts
+++ b/ui/src/polyfills.ts
@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -18,7 +22,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
@@ -35,7 +41,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index 90d4ee0..5d54ecb 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* Importing Bootstrap SCSS file. */
+@import '~bootstrap/scss/bootstrap'
diff --git a/ui/src/test.ts b/ui/src/test.ts
new file mode 100644
index 0000000..50193eb
--- /dev/null
+++ b/ui/src/test.ts
@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);