Tests updated dependencies

package.json

@@ -38,9 +38,9 @@
     "prod-test": "npm run build:PROD:DEPLOY && npm run http-startup",
     "prod-test:SSR": "npm run build:SSR && npm run job && npm run start:SSR",
     "job": "npm run job:images; npm run job:link; npm run job:manifest",
-    "job:images:logo": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=generateLogoImages",
-    "job:images:frontend": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=generateFrontendPreview --host=http://localhost:4210",
-    "job:images": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=all --host=http://localhost:4000",
+    "job:images:logo": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=generateLogoImages --root",
+    "job:images:frontend": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=generateFrontendPreview --host=http://localhost:4210 --root",
+    "job:images": "cd dist/browser/assets/jobs/; node --experimental-modules GenerateImages.mjs --command=all --host=http://localhost:4000 --root",
     "job:link": "cd dist/browser/assets/jobs/; node GenerateMetaNodes.js --command=generateLinkImages --baseUrl=http://localhost:4000",
     "job:manifest": "cd dist/browser/assets/jobs/; node GenerateMetaNodes.js --command=generateManifest --baseUrl=http://localhost:4000"
   },
@@ -57,18 +57,18 @@
     "@angular/pwa": "^0.13.9",
     "@angular/router": "^8.2.13",
     "@angular/service-worker": "^8.2.13",
-    "@auth0/angular-jwt": "2.1.0",
-    "@fortawesome/angular-fontawesome": "^0.4.0",
+    "@auth0/angular-jwt": "3.0.1",
+    "@fortawesome/angular-fontawesome": "^0.5.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
+    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
     "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "~4.0.0",
     "@stomp/ng2-stompjs": "^7.2.0",
-    "angular-svg-icon": "^7.2.1",
-    "angulartics2": "^7.5.2",
-    "angularx-qrcode": "^1.6.4",
+    "angular-svg-icon": "^8.0.0",
+    "angulartics2": "^8.1.0",
+    "angularx-qrcode": "^1.7.0-beta.5",
     "bootstrap": "^4.3.1",
     "cors": "^2.8.5",
     "dexie": "^2.0.4",
@@ -76,8 +76,8 @@
     "marked": "git+https://github.com/trayhem/marked.git",
     "messageformat": "^2.3.0",
     "ng2-simple-mq": "^8.2.1",
-    "ngx-infinite-scroll": "^7.2.0",
-    "ngx-toastr": "^10.2.0",
+    "ngx-infinite-scroll": "^8.0.1",
+    "ngx-toastr": "^11.2.1",
     "ngx-translate-messageformat-compiler": "^4.5.0",
     "node-sass": "^4.13.0",
     "rxjs": "~6.4.0",
@@ -99,15 +99,15 @@
     "chrome-launcher": "^0.10.7",
     "chrome-remote-interface": "^0.27.2",
     "codelyzer": "^5.2.0",
-    "imagemin": "^6.1.0",
-    "imagemin-pngquant": "^6.0.1",
-    "jasmine-core": "~3.4.0",
+    "imagemin": "^7.0.0",
+    "imagemin-pngquant": "^8.0.0",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma": "~4.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "karma-mocha-reporter": "^2.2.5",
     "karma-phantomjs-launcher": "^1.0.4",
     "minimist": "^1.2.0",
@@ -116,9 +116,9 @@
     "puppeteer": "^1.20.0",
     "purify-css": "~1.2.5",
     "rimraf": "^3.0.0",
-    "sharp": "^0.22.1",
+    "sharp": "^0.23.2",
     "ts-node": "~7.0.0",
-    "tslint": "~5.18.0",
+    "tslint": "~5.20.1",
     "typescript": "~3.5.3"
   },
   "keywords": [

src/app/footer/footer-bar/footer-bar.component.ts

 import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { IFooterBarElement } from '../../lib/footerbar-element/interfaces';
 import { INamedType } from '../../lib/interfaces/interfaces';
 import { FileUploadService } from '../../service/file-upload/file-upload.service';
@@ -75,7 +75,7 @@ export class FooterBarComponent implements OnInit {
     });
   }
 
-  public getIconClass(elem: IFooterBarElement): IconProp {
+  public getIconClass(elem: IFooterBarElement): IconName {
     if (elem.isLoading) {
       return 'spinner';
     }

src/app/lib/footerbar-element/footerbar-element.ts

-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { IFooterBarElement } from './interfaces';
 
 export class FooterbarElement implements IFooterBarElement {
@@ -18,7 +18,7 @@ export class FooterbarElement implements IFooterBarElement {
     return this._id;
   }
 
-  get iconClass(): IconProp {
+  get iconClass(): IconName {
     return this._iconClass;
   }
 
@@ -78,7 +78,7 @@ export class FooterbarElement implements IFooterBarElement {
   private readonly _introTranslate: string;
   private _restoreOnClickCallback: Function;
   private readonly _id: string;
-  private readonly _iconClass: IconProp;
+  private readonly _iconClass: IconName;
   private readonly _textClass: string;
   private readonly _textName: string;
   private readonly _selectable: boolean;

src/app/lib/footerbar-element/interfaces.ts

-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 
 export declare interface IFooterBarElement {
   id: string;
-  iconClass: IconProp;
+  iconClass: IconName;
   textClass: string;
   textName: string;
   selectable: boolean;

src/app/markdown/markdown-bar/markdown-bar.component.ts

 import { Component, EventEmitter, Output } from '@angular/core';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { TranslateService } from '@ngx-translate/core';
 import { QuestiontextComponent } from '../../quiz/quiz-manager/details/questiontext/questiontext.component';
 import { TrackingService } from '../../service/tracking/tracking.service';
 
 class MarkdownBarElement {
-  private _iconClass: IconProp;
+  private _iconClass: IconName;
 
-  get iconClass(): IconProp {
+  get iconClass(): IconName {
     return this._iconClass;
   }
 
-  set iconClass(value: IconProp) {
+  set iconClass(value: IconName) {
     this._iconClass = value;
   }
 
@@ -31,13 +31,13 @@ class MarkdownBarElement {
     return this._titleRef;
   }
 
-  private _iconClassToggled: IconProp;
+  private _iconClassToggled: IconName;
 
-  get iconClassToggled(): IconProp {
+  get iconClassToggled(): IconName {
     return this._iconClassToggled;
   }
 
-  set iconClassToggled(value: IconProp) {
+  set iconClassToggled(value: IconName) {
     this._iconClassToggled = value;
   }
 

src/app/quiz/quiz-flow/quiz-results/question-details/question-details.component.spec.ts

-import { PLATFORM_ID, SecurityContext } from '@angular/core';
+import { PLATFORM_ID } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
@@ -92,7 +92,7 @@ describe('QuestionDetailsComponent', () => {
   it('#sanitizeHTML', inject([DomSanitizer], (sanitizer: DomSanitizer) => {
     const markup = '<div><span>TestMarkup</span></div>';
 
-    spyOn(sanitizer, 'sanitize').and.callFake((ctx: SecurityContext, value: string) => value as string);
+    spyOn(sanitizer, 'bypassSecurityTrustHtml').and.callFake((value: string) => value as string);
     component.sanitizeHTML(markup);
     expect(sanitizer.sanitize).toHaveBeenCalled();
   }));

src/app/quiz/quiz-manager/details/answeroptions/answeroptions-ranged/answeroptions-ranged.component.spec.ts

 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateService } from '@ngx-translate/core';
@@ -23,7 +24,7 @@ describe('AnsweroptionsRangedComponent', () => {
   beforeEach((() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule, HttpClientTestingModule,
+        RouterTestingModule, HttpClientTestingModule, FormsModule,
       ],
       providers: [
         {

src/app/quiz/quiz-manager/details/answeroptions/answeroptions.component.spec.ts

 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { PLATFORM_ID } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SwUpdate } from '@angular/service-worker';
@@ -45,7 +46,14 @@ describe('AnsweroptionsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule, RouterTestingModule, NgbModalModule, AngularSvgIconModule, NgbPopoverModule, FontAwesomeModule, JwtModule.forRoot({
+        HttpClientTestingModule,
+        RouterTestingModule,
+        FormsModule,
+        NgbModalModule,
+        AngularSvgIconModule,
+        NgbPopoverModule,
+        FontAwesomeModule,
+        JwtModule.forRoot({
           jwtOptionsProvider: {
             provide: JWT_OPTIONS,
             useFactory: jwtOptionsFactory,
@@ -54,8 +62,7 @@ describe('AnsweroptionsComponent', () => {
         }),
       ],
       providers: [
-        RxStompService,
-        {
+        RxStompService, {
           provide: StorageService,
           useClass: StorageServiceMock,
         }, {
@@ -93,8 +100,7 @@ describe('AnsweroptionsComponent', () => {
         LivePreviewComponent,
         AnsweroptionsDefaultComponent,
         AnsweroptionsFreetextComponent,
-        AnsweroptionsRangedComponent,
-        AnsweroptionsComponent, TranslatePipeMock,
+        AnsweroptionsRangedComponent, AnsweroptionsComponent, TranslatePipeMock,
       ],
     }).compileComponents();
   }));

src/app/quiz/quiz-manager/details/countdown/countdown.component.spec.ts

 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { PLATFORM_ID } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { JWT_OPTIONS, JwtModule } from '@auth0/angular-jwt';
@@ -30,7 +31,7 @@ describe('CountdownComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule, RouterTestingModule, FontAwesomeModule, JwtModule.forRoot({
+        HttpClientTestingModule, RouterTestingModule, FormsModule, FontAwesomeModule, JwtModule.forRoot({
           jwtOptionsProvider: {
             provide: JWT_OPTIONS,
             useFactory: jwtOptionsFactory,

src/app/quiz/quiz-manager/sound-manager/sound-manager.component.spec.ts

 import { HttpClientModule } from '@angular/common/http';
 import { PLATFORM_ID } from '@angular/core';
 import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { JWT_OPTIONS, JwtModule } from '@auth0/angular-jwt';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -28,7 +29,7 @@ describe('SoundManagerComponent', () => {
   beforeEach((() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule, HttpClientModule, FontAwesomeModule, JwtModule.forRoot({
+        RouterTestingModule, HttpClientModule, FormsModule, FontAwesomeModule, JwtModule.forRoot({
           jwtOptionsProvider: {
             provide: JWT_OPTIONS,
             useFactory: jwtOptionsFactory,

src/app/quiz/quiz-overview/quiz-overview.component.spec.ts

@@ -173,10 +173,9 @@ describe('QuizOverviewComponent', () => {
     it('should return null if the quiz does not exist', inject([StorageService], (storageService: StorageService) => {
       const quizName = 'validtestquiz';
 
-      component.deleteQuiz(0).subscribe(() => {
-        storageService.db.Quiz.get(quizName).then(quiz => {
-          expect(quiz).toBe(null);
-        });
+      component.deleteQuiz(0);
+      storageService.db.Quiz.get(quizName).then(quiz => {
+        expect(quiz).toBe(null);
       });
     }));
   });

src/app/quiz/quiz-overview/quiz-overview.component.ts

@@ -2,7 +2,6 @@ import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { QuizEntity } from '../../lib/entities/QuizEntity';
 import { MessageProtocol, StatusProtocol } from '../../lib/enums/Message';
@@ -146,28 +145,24 @@ export class QuizOverviewComponent implements OnInit {
     });
   }
 
-  public deleteQuiz(index: number): Observable<void> {
-    return new Observable(subscriber => {
-      this.trackingService.trackClickEvent({
-        action: QuizOverviewComponent.TYPE,
-        label: `delete-quiz`,
-      });
+  public deleteQuiz(index: number): void {
+    this.trackingService.trackClickEvent({
+      action: QuizOverviewComponent.TYPE,
+      label: `delete-quiz`,
+    });
 
-      if (isPlatformServer(this.platformId)) {
-        return;
-      }
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
 
-      this.quizApiService.deleteQuiz(this.sessions[index]).subscribe((response: IMessage) => {
-        if (response.status !== StatusProtocol.Success) {
-          console.log('QuizOverviewComponent: DeleteQuiz failed', response);
-        } else {
-          const sessionName = this.sessions[index].name;
-          this.sessions.splice(index, 1);
-          this.storageService.db.Quiz.delete(sessionName).then(() => {
-            subscriber.next();
-          });
-        }
-      });
+    this.quizApiService.deleteQuiz(this.sessions[index]).subscribe((response: IMessage) => {
+      if (response.status !== StatusProtocol.Success) {
+        console.log('QuizOverviewComponent: DeleteQuiz failed', response);
+      } else {
+        const sessionName = this.sessions[index].name;
+        this.sessions.splice(index, 1);
+        this.storageService.db.Quiz.delete(sessionName);
+      }
     });
   }
 

src/app/shared/audio-player/audio-player.component.spec.ts

 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { TrackingMockService } from '../../service/tracking/tracking.mock.service';
 import { TrackingService } from '../../service/tracking/tracking.service';
@@ -13,7 +14,7 @@ describe('AudioPlayerComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        FontAwesomeModule, HttpClientTestingModule,
+        FontAwesomeModule, HttpClientTestingModule, FormsModule,
       ],
       providers: [
         {

src/app/shared/shared.module.ts

@@ -3,8 +3,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {
   faAlignLeft,
   faAppleAlt,
@@ -66,60 +65,6 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
 import { AudioPlayerComponent } from './audio-player/audio-player.component';
 import { GamificationAnimationComponent } from './gamification-animation/gamification-animation.component';
 
-library.add(faTimes);
-library.add(faSpinner);
-library.add(faInfoCircle);
-library.add(faGlobe);
-library.add(faAppleAlt);
-library.add(faArrowsAlt);
-library.add(faWrench);
-library.add(faUpload);
-library.add(faLanguage);
-library.add(faUnlock);
-library.add(faSignOutAlt);
-library.add(faSignInAlt);
-library.add(faHome);
-library.add(faExclamationTriangle);
-library.add(faPaperPlane);
-library.add(faEdit);
-library.add(faDownload);
-library.add(faTrash);
-library.add(faCaretLeft);
-library.add(faCaretRight);
-library.add(faCaretSquareDown);
-library.add(faCaretUp);
-library.add(faArrowDown);
-library.add(faArrowUp);
-library.add(faUsers);
-library.add(faMusic);
-library.add(faFlag);
-library.add(faUndo);
-library.add(faBold);
-library.add(faHeading);
-library.add(faListUl);
-library.add(faCode);
-library.add(faImage);
-library.add(faHourglass);
-library.add(faLock);
-library.add(faPlay);
-library.add(faPause);
-library.add(faStop);
-library.add(faThumbsUp);
-library.add(faEye);
-library.add(faQrcode);
-library.add(faAlignLeft);
-library.add(faSlidersH);
-library.add(faQuestion);
-library.add(faCaretSquareUp);
-library.add(faCheck);
-library.add(faUnderline);
-library.add(faStrikethrough);
-library.add(faItalic);
-library.add(faTrophy);
-library.add(faBan);
-library.add(faSave);
-library.add(faCopy);
-
 @NgModule({
   imports: [
     FormsModule, CommonModule, HttpClientModule, FontAwesomeModule, NgbModule, RouterModule, AngularSvgIconModule,
@@ -140,5 +85,59 @@ library.add(faCopy);
   bootstrap: [],
 })
 export class SharedModule {
-  constructor() {}
+  constructor(library: FaIconLibrary) {
+    library.addIcons(faTimes);
+    library.addIcons(faSpinner);
+    library.addIcons(faInfoCircle);
+    library.addIcons(faGlobe);
+    library.addIcons(faAppleAlt);
+    library.addIcons(faArrowsAlt);
+    library.addIcons(faWrench);
+    library.addIcons(faUpload);
+    library.addIcons(faLanguage);
+    library.addIcons(faUnlock);
+    library.addIcons(faSignOutAlt);
+    library.addIcons(faSignInAlt);
+    library.addIcons(faHome);
+    library.addIcons(faExclamationTriangle);
+    library.addIcons(faPaperPlane);
+    library.addIcons(faEdit);
+    library.addIcons(faDownload);
+    library.addIcons(faTrash);
+    library.addIcons(faCaretLeft);
+    library.addIcons(faCaretRight);
+    library.addIcons(faCaretSquareDown);
+    library.addIcons(faCaretUp);
+    library.addIcons(faArrowDown);
+    library.addIcons(faArrowUp);
+    library.addIcons(faUsers);
+    library.addIcons(faMusic);
+    library.addIcons(faFlag);
+    library.addIcons(faUndo);
+    library.addIcons(faBold);
+    library.addIcons(faHeading);
+    library.addIcons(faListUl);
+    library.addIcons(faCode);
+    library.addIcons(faImage);
+    library.addIcons(faHourglass);
+    library.addIcons(faLock);
+    library.addIcons(faPlay);
+    library.addIcons(faPause);
+    library.addIcons(faStop);
+    library.addIcons(faThumbsUp);
+    library.addIcons(faEye);
+    library.addIcons(faQrcode);
+    library.addIcons(faAlignLeft);
+    library.addIcons(faSlidersH);
+    library.addIcons(faQuestion);
+    library.addIcons(faCaretSquareUp);
+    library.addIcons(faCheck);
+    library.addIcons(faUnderline);
+    library.addIcons(faStrikethrough);
+    library.addIcons(faItalic);
+    library.addIcons(faTrophy);
+    library.addIcons(faBan);
+    library.addIcons(faSave);
+    library.addIcons(faCopy);
+  }
 }